Prevent DataTables custom filter from affecting all tables on a page
When we add a custom filter to DataTables:
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
...
-
In your custom filter, check for
settings.nTable.idand take action if the id matches the id of your table.Credits to 'kthorngren' who posted it here initially.
/* 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(); } ); });body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff; }Minimum age: Maximum age: Name Position Office Age Start date Salary Name Position Office Age Start date Salary Tiger Nixon System Architect Edinburgh 61 2011/04/25 $3,120 Garrett Winters Director Edinburgh 63 2011/07/25 $5,300 Ashton Cox Technical Author San Francisco 66 2009/01/12 $4,800 Cedric Kelly Javascript Developer Edinburgh 22 2012/03/29 $3,600 Jenna Elliott Financial Controller Edinburgh 33 2008/11/28 $5,300 Brielle Williamson Integration Specialist New York 61 2012/12/02 $4,525 Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $4,080 Rhona Davidson Integration Specialist Edinburgh 55 2010/10/14 $6,730 Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $5,000 Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $3,600 Jena Gaines System Architect London 30 2008/12/19 $5,000 Quinn Flynn Financial Controller Edinburgh 22 2013/03/03 $4,200 Charde Marshall Regional Director San Francisco 36 2008/10/16 $5,300 Haley Kennedy Senior Marketing Designer London 43 2012/12/18 $4,800 Tatyana Fitzpatrick Regional Director London 19 2010/03/17 $2,875 Michael Silva Senior Marketing Designer London 66 2012/11/27 $3,750 Paul Byrd Javascript Developer New York 64 2010/06/09 $5,000 Gloria Little Systems Administrator New York 59 2009/04/10 $3,120 Bradley Greer Software Engineer London 41 2012/10/13 $3,120 Dai Rios System Architect Edinburgh 35 2012/09/26 $4,200 Jenette Caldwell Financial Controller New York 30 2011/09/03 $4,965 Yuri Berry System Architect New York 40 2009/06/25 $3,600 Caesar Vance Technical Author New York 21 2011/12/12 $4,965 Doris Wilder Sales Assistant Edinburgh 23 2010/09/20 $4,965 Angelica Ramos System Architect London 36 2009/10/09 $2,875 Gavin Joyce Developer Edinburgh 42 2010/12/22 $4,525 Jennifer Chang Regional Director London 28 2010/11/14 $4,080 Brenden Wagner Software Engineer San Francisco 18 2011/06/07 $3,750 Ebony Grimes Software Engineer San Francisco 48 2010/03/11 $2,875 Russell Chavez Director Edinburgh 20 2011/08/14 $3,600 Minimum age: Maximum age: Name Position Office Age Start date Salary Name Position Office Age Start date Salary Michelle House Integration Specialist Edinburgh 37 2011/06/02 $3,750 Suki Burks Developer London 53 2009/10/22 $2,875 Prescott Bartlett Technical Author London 27 2011/05/07 $6,730 Gavin Cortez Technical Author San Francisco 22 2008/10/26 $6,730 Martena Mccray Integration Specialist Edinburgh 46 2011/03/09 $4,080 Unity Butler Senior Marketing Designer San Francisco 47 2009/12/09 $3,750 Howard Hatfield Financial Controller San Francisco 51 2008/12/16 $4,080 Hope Fuentes Financial Controller San Francisco 41 2010/02/12 $4,200 Vivian Harrell System Architect San Francisco 62 2009/02/14 $4,965 Timothy Mooney Financial Controller London 37 2008/12/11 $4,200 Jackson Bradshaw Director New York 65 2008/09/26 $5,000 Miriam Weiss Support Engineer Edinburgh 64 2011/02/03 $4,965 Bruno Nash Software Engineer London 38 2011/05/03 $4,200 Odessa Jackson Support Engineer Edinburgh 37 2009/08/19 $3,600 Thor Walton Developer New York 61 2013/08/11 $3,600 Finn Camacho Support Engineer San Francisco 47 2009/07/07 $4,800 Elton Baldwin Data Coordinator Edinburgh 64 2012/04/09 $6,730 Zenaida Frank Software Engineer New York 63 2010/01/04 $4,800 Zorita Serrano Software Engineer San Francisco 56 2012/06/01 $5,300 Jennifer Acosta Javascript Developer Edinburgh 43 2013/02/01 $2,875 Cara Stevens Sales Assistant New York 46 2011/12/06 $4,800 Hermione Butler Director London 47 2011/03/21 $4,080 Lael Greer Systems Administrator London 21 2009/02/27 $3,120 Jonas Alexander Developer San Francisco 30 2010/07/14 $5,300 Shad Decker Regional Director Edinburgh 51 2008/11/13 $5,300 Michael Bruce Javascript Developer Edinburgh 29 2011/06/27 $4,080 Donna Snider System Architect New York 27 2011/01/25 $3,120 - 热议问题
加载中...