Answers

• kthorngren Posts: 20,332Questions: 26Answers: 4,774

  March 2018

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

  Kevin
• dreiquevada Posts: 1Questions: 0Answers: 0

  January 2020

  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 Posts: 1Questions: 0Answers: 0

  January 2021

  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 Posts: 4Questions: 2Answers: 0

  March 2022 edited March 2022

  /* 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 Posts: 15,154Questions: 1Answers: 2,587

  March 2022

  @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 Posts: 2,808Questions: 85Answers: 406

  March 2022

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