diff --git a/.datatables-commit-sync b/.datatables-commit-sync index 3f907fe4..4fb4c179 100644 --- a/.datatables-commit-sync +++ b/.datatables-commit-sync @@ -1 +1 @@ -77b2cffc72bfb5b3fb1c73d131827bc31d0e1183 +cc87fa5ae24a0a73507010dbdfa1e9f8c454e0ee diff --git a/examples/api/multi_filter_select.html b/examples/api/multi_filter_select.html index 9edab30a..3e4a8150 100644 --- a/examples/api/multi_filter_select.html +++ b/examples/api/multi_filter_select.html @@ -20,22 +20,28 @@ $(document).ready(function() { - var table = $('#example').DataTable(); + $('#example').DataTable( { + initComplete: function () { + var api = this.api(); - $("#example tfoot th").each( function ( i ) { - var select = $('') - .appendTo( $(this).empty() ) - .on( 'change', function () { - var val = $(this).val(); + api.columns().indexes().flatten().each( function ( i ) { + var column = api.column( i ); + console.log( i ); + var select = $('') + .appendTo( $(column.footer()).empty() ) + .on( 'change', function () { + var val = $(this).val(); - table.column( i ) - .search( val ? '^'+$(this).val()+'$' : val, true, false ) - .draw(); + column + .search( val ? '^'+$(this).val()+'$' : val, true, false ) + .draw(); + } ); + + column.data().unique().sort().each( function ( d, j ) { + select.append( '' ) + } ); } ); - - table.column( i ).data().unique().sort().each( function ( d, j ) { - select.append( '' ) - } ); + } } ); } ); @@ -74,6 +80,15 @@ $(document).ready(function() { "DataTables API method">search()DT and column().search()DT.

+ +

Note also that this example shows the use of initCompleteDT a callback function that is + triggered when the table has fully loaded. Use of this callback isn't actually required in this example + since the data is available in the table on load, but in the case of Ajax loaded data, initCompleteDT is useful to execute code + after the data has been loaded.

@@ -571,22 +586,28 @@ $(document).ready(function() {

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { - var table = $('#example').DataTable(); + $('#example').DataTable( { + initComplete: function () { + var api = this.api(); - $("#example tfoot th").each( function ( i ) { - var select = $('<select><option value=""></option></select>') - .appendTo( $(this).empty() ) - .on( 'change', function () { - var val = $(this).val(); + api.columns().indexes().flatten().each( function ( i ) { + var column = api.column( i ); + console.log( i ); + var select = $('<select><option value=""></option></select>') + .appendTo( $(column.footer()).empty() ) + .on( 'change', function () { + var val = $(this).val(); - table.column( i ) - .search( val ? '^'+$(this).val()+'$' : val, true, false ) - .draw(); + column + .search( val ? '^'+$(this).val()+'$' : val, true, false ) + .draw(); + } ); + + column.data().unique().sort().each( function ( d, j ) { + select.append( '<option value="'+d+'">'+d+'</option>' ) + } ); } ); - - table.column( i ).data().unique().sort().each( function ( d, j ) { - select.append( '<option value="'+d+'">'+d+'</option>' ) - } ); + } } ); } );