DataTables example Individual column searching (select inputs)

This example is almost identical to text based individual column example and provides the same functionality, but in this case using select input controls.

After the table is initialised, the API is used to build the select inputs through the use of the column().data()DT method to get the data for each column in turn. The helper methods unique()DT and sort()DT are also used to reduce the data for set input to unique and ordered elements. Finally the change event from the select input is used to trigger a column search using the column().search()DT method.

Note that the column().search()DT method in this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built in smart searching. For more information on the search options in DataTables API please refer to the documentation for search()DT, column().search()DT and $.fn.dataTable.util.escapeRegex()DT which are used for searching globally, by column and escaping regular expressions respectively.

Note also that this example shows the use of initCompleteDT a callback function that is triggered when the table has fully loaded. Use of this callback isn't actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, initCompleteDT is useful to execute code after the data has been loaded.

NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Showing 1 to 10 of 57 entries

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
            var api = this.api();
 
            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: