DataTables logo
≡

Select2

Use the Select2 library with Editor for complex select input options.

Select2 is a replacement for HTML select elements, enhancing standard select's with searching, remote data sets and more. This plug-in provides the ability to use Select2 with Editor very easily.

Note for when using Select2's remote Ajax data source option: In order to have the label correctly render for an item being edited, the server-side script that is responding to the Select2 requests must be able to accept a request with the parameters: initialValue:true and value:... (i.e. the value). The server must respond with { "id": value, "text": "Label to show" }.

Please note that this plug-in was published, Editor now has a built-in autocomplete and tags field type which can be used with full integration for the published server-side libraries. It is recommended that you use the new built-in field types in preference to this plug-in, particularly for new projects.

Use

This plug-in can be obtained and used in multiple different ways.

Browser

This plug-in is available on the DataTables CDN:

JS

The plug-in will then automatically register itself against a global DataTables instance. This file can also be used if you are using an AMD loader such as Require.js.

Note that if you are using multiple plug-ins, it can be beneficial in terms of performance to combine the plug-ins into a single file and host it on your own server, rather than making multiple requests to the DataTables CDN.

NPM

The plug-ins are all available on NPM (which can also be used with Yarn or any other Javascript package manager) as part of the datatables.net-plugins package. To use this plug-in, first install the plug-ins package:

npm install datatables.net-plugins

Then import datatables.net, any other DataTables extensions you need, plus the plug-in:

import DataTable from 'datatables.net';
import 'datatables.net-plugins/editorFields/editor.select2.mjs';

Examples

// Create an Editor instance with a Select2 field and data
new DataTable.Editor( {
 "ajax": "/api/todo",
 "table": "#example",
 "fields": [ {
         "label": "Item:",
         "name": "item"
     }, {
         "label": "Priority:",
         "name": "priority",
         "type": "select2",
         "options": [
             { "label": "1 (highest)", "value": "1" },
             { "label": "2",           "value": "2" },
             { "label": "3",           "value": "3" },
             { "label": "4",           "value": "4" },
             { "label": "5 (lowest)",  "value": "5" }
         ]
     }, {
         "label": "Status:",
         "name": "status",
         "type": "radio",
         "default": "Done",
         "options": [
             { "label": "To do", "value": "To do" },
             { "label": "Done", "value": "Done" }
         ]
     }
 ]
} );

// Add a Select2 field to Editor with Select2 options set
editor.add( {
   "label": "State:",
   "name": "state",
   "type": "select2",
   "opts": {
       "placeholder": "Select State",
       "allowClear": true
   }
} );

Version control

If you have any ideas for how this plug-in can be improved, or spot anything that is in error, it is available on GitHub and pull requests are very welcome!