1
0
mirror of https://github.com/DataTables/DataTables.git synced 2025-03-15 16:29:16 +01:00

Update example: Update the select column filtering example to use dt-init initComplete

* There are often questions about why it isn't working with Ajax. it
  will now
This commit is contained in:
Allan Jardine 2014-08-15 16:29:16 +01:00
parent e3a1d7b9a5
commit 267ab376b8
2 changed files with 48 additions and 27 deletions

View File

@ -1 +1 @@
77b2cffc72bfb5b3fb1c73d131827bc31d0e1183
cc87fa5ae24a0a73507010dbdfa1e9f8c454e0ee

View File

@ -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 = $('<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>' )
} );
}
} );
} );
@ -74,6 +80,15 @@ $(document).ready(function() {
"DataTables API method">search()<span>DT</span></code></a> and <a href=
"//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()<span>DT</span></code></a>.</p>
<p>Note also that this example shows the use of <a href=
"//datatables.net/reference/option/initComplete"><code class="option" title=
"DataTables initialisation option">initComplete<span>DT</span></code></a> 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, <a href=
"//datatables.net/reference/option/initComplete"><code class="option" title=
"DataTables initialisation option">initComplete<span>DT</span></code></a> is useful to execute code
after the data has been loaded.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -571,22 +586,28 @@ $(document).ready(function() {
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">$(document).ready(function() {
var table = $('#example').DataTable();
$('#example').DataTable( {
initComplete: function () {
var api = this.api();
$(&quot;#example tfoot th&quot;).each( function ( i ) {
var select = $('&lt;select&gt;&lt;option value=&quot;&quot;&gt;&lt;/option&gt;&lt;/select&gt;')
.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 = $('&lt;select&gt;&lt;option value=&quot;&quot;&gt;&lt;/option&gt;&lt;/select&gt;')
.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( '&lt;option value=&quot;'+d+'&quot;&gt;'+d+'&lt;/option&gt;' )
} );
} );
table.column( i ).data().unique().sort().each( function ( d, j ) {
select.append( '&lt;option value=&quot;'+d+'&quot;&gt;'+d+'&lt;/option&gt;' )
} );
}
} );
} );</code>