Two separate filters on same table

Two separate filters on same table

welle77welle77 Posts: 8Questions: 3Answers: 0

I am enjoying datatable very much and eager to try the Editor too. I have the following need: I have a table of 3 columns, the 3nd column is hidden and used as a filter through a drop-down menu. For this part I use the following:

var table =  $('#example').DataTable( {
            "dom": 'Z<"top"i>rt<"bottom"lp>',
            colReorder: true,
                    "columnDefs": [
            {
                "targets": [ 2 ],
                "visible": false,
                "searchable": true
            }
        ]
} );

$('.filter').on('keyup change', function() {
          //clear global search values
          table.search('');
          table.column($(this).data('columnIndex')).search(this.value).draw();
});

$(".dataTables_filter input").on('keyup change', function() {
          //clear column search values
          table.columns().search('');
          //clear input values
          $('.filter').val('');
});

HTML
                <select id="MyFilter" class='filter' data-column-index='2'>
                    <option value="" selected="selected"></option>
                    <option value="Cat1">Cat1</option>
                    <option value="Cat2">Cat2</option>
                </select>

This works like a charm. However, I have the usual search field the user can use to query the table. The search field needs now to apply only to the first 2 columns! Now it applies to all 3 columns, which is unintended. Any ideas? Thanks!

Answers

  • welle77welle77 Posts: 8Questions: 3Answers: 0

    I came out with this:

        $('#myInputTextField').keyup(function(){
                      table.column( [0, 1] ).search( $(this).val() ).draw();
        })
    
This discussion has been closed.