filter table data based on drop down values of fir

问题:

The functionality for select options for all the columns as mentioned on the website of data tables is mentioned below. How do i make it filter the table data on the drop down values of the first column only and also place the select drop down somewhere else rather than the usual header section.see link for example

initComplete: function () {
    var api = this.api();

    api.column().indexes().flatten().each( function (i) {
        var column = api.column(i);
        var select = $('<select><option value=""></option></select>').appendTo('$selectTriggerFilter').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>' )
        } );
    } );
} 

I am using the following code . As soon as i remove the dom options the select options appear but not without dom.

$(document).ready(function() {
     $('#tableTrigger').DataTable({

    "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
    searching: false,
    "scrollY": "200px",
    "dom": 'frtipS',
    "deferRender": true,

    initComplete: function () 
    {
        var api = this.api();

        api.columns().indexes().flatten().each( function ( i ) 
                {
                            if(i == 0){ //Create just one SelectBox
                                var select = $('<select class='+i+'><option value=""></option></select>')
                                            .appendTo( '#selectTriggerFilter')
                                            .on( 'change', function () {

                                        var val = $(this).val();
                                        column( i ).search( val ? '^'+$(this).val()+'$' : val, true, false ).draw();
                                    });

                                column( i ).data().unique().sort().each( function ( d, j ) {
                                    select.append( '<option value="'+d+'">'+d+'</option>' );
                                } );
                        }
                            else return;
               });
    } 

  }); 
});

回答1:

CAUSE

There are some problems with your code:

• searching should not be set to false otherwise search() function will not work
• column variable is not defined

SOLUTION

Below is corrected code.

$(document).ready(function() {
   $('#tableTrigger').DataTable({
        "lengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
        "scrollY": "200px",
        "dom": 'rtipS',
        // searching: false,
        "deferRender": true,
        initComplete: function () {
           var column = this.api().column(0);
           var select = $('<select class="filter"><option value=""></option></select>')
               .appendTo('#selectTriggerFilter')
               .on('change', function () {
                  var val = $(this).val();
                  column.search(val ? '^' + $(this).val() + '$' : val, true, false).draw();
               });

           column.data().unique().sort().each(function (d, j) {
               select.append('<option value="' + d + '">' + d + '</option>');
           });
        }
    });
});

Notes

• I have omitted f in "dom": 'frtipS' since I think you wanted to exclude that initially by setting searching to false. Include f if you want to have search box along with the drop-down filter.

• There is no sense in setting lengthMenu if you're omitting l in dom property.

DEMO

See this jsFiddle for demonstration of corrected code.

回答2:

You can place search section anywhere in the dom. then your event call (click, select, keyup). call serach api like below.

var dTable= $("example").DataTable();
dTable.columns(i).search(v).draw();

Here i is your datatable column index and v is the search value.