filter table data based on drop down values of first column only in DataTables

Question

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;
               });
    } 

  }); 
});

Gyrocode.com · Accepted Answer · 2015-08-03 15:09:06Z

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.

Arka · Accepted Answer · 2015-02-16 07:47:06Z

-1

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.

answered Feb 16, 2015 at 7:47

Arka

5915 silver badges18 bronze badges

1 Comment

sandeepsingh0201 Over a year ago

thnks for the reply Arka, please see what i am using in the edit

Collectives™ on Stack Overflow

filter table data based on drop down values of first column only in DataTables

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related