Multiple DataTables with seperate Custom filter for each table on same page

najram94

Hi,
I have 2 tables in same page, let say

$('#report-table1').DataTable();
$('#report-table2').DataTable();

No I want to add custom filter for each datatable using

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
       
    }
);

but above filter works only for one table. How to add different filter function for each datatables in same page. Please help me. Thanks in advance

kthorngren

Here is an example of two tables based on the Range Search example::
http://live.datatables.net/tihuyiqi/1/edit

Kevin

dreiquevada

Your simply doing a wrong approach here.
$.fn.dataTable.ext.search.push has another purpose which you should never use when you multiple datatables in the page that you want to differently filter. The easiest way to build a custom search for a specific table is to build an array of unique ids for your data and later search it in your column id. Example:

dgiff

dreiquevada solution works well.
Thanks for sharing!

The only thing I had to change was the Reg Exp.
The one I've used is:

'^.*\\b(' + searchIds.join("|") + ')\\b.*$'

TumeloM

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      console.log(settings.nTable.id);
      if ( settings.nTable.id !== 'example' ) {
        return true;
      }
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
      console.log(settings.nTable.id);
      if ( settings.nTable.id !== 'example2' ) {
        return true;
      }
        var min = parseInt( $('#min2').val(), 10 );
        var max = parseInt( $('#max2').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);

$(document).ready( function () {
  var table = $('#example').DataTable({
    dom: 'tir'
  });
  var table2 = $('#example2').DataTable({
    dom: 'tir'
  });
  
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
        table2.draw();
    } );

  
    // Event listener to the two range filtering inputs to redraw on input
    $('#min2, #max2').keyup( function() {
        table.draw();
        table2.draw();
    } );

});

I came across this when i was searching for the solution on this issue,but um not sure if its a good use of $.fn.dataTable.ext.search.push( datatable function is there better way to code this. Can someone help?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

@TumeloM We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

rf1234

You don't need that twice. Once will do.

$.fn.dataTable.ext.search.push will be executed for all data tables on the page.

In this (not so neatly coded) example I filter data from 5 different data tables. I don't need to know for what table $.fn.dataTable.ext.search is being executed. I just check whether the respective table rows are passed into the function:
- row.contract
- row.variable
- row.fixed and
- row.cashflow
- row.contract_has_infoma

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex, row, counter ) {
        if ( typeof row.contract !== 'undefined' &&
             typeof row.contract_has_infoma == 'undefined' )   {
             return false;
        }     //not a contract row but a row of an element
        if ( typeof row.variable !== 'undefined' || typeof row.fixed !== 'undefined' ) {
            var selected = contractTable.row( {selected: true} );
            if (selected.any()) {
            //in case it is a prolongation the expired components are filtered
            //out by default (redraw upon select of contract raw and also upon push button)
                if ( selected.data().contract.prolongation > '0' ) {
                    if ( typeof row.variable !== 'undefined' && 
                         typeof row.cashflow === 'undefined'    ) {
                        return filterExpElements(row.variable.end_date, 'VariableExpElementsButton', showVariableExpElements);
                    } 
                    if ( typeof row.fixed !== 'undefined'&& 
                         typeof row.cashflow === 'undefined'  ) {
                         return filterExpElements(row.fixed.end_date, 'FixedExpElementsButton', showFixedExpElements);              
                    }
                }
            }
        }
        return true;
    }                
);