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:
parent
e3a1d7b9a5
commit
267ab376b8
@ -1 +1 @@
|
||||
77b2cffc72bfb5b3fb1c73d131827bc31d0e1183
|
||||
cc87fa5ae24a0a73507010dbdfa1e9f8c454e0ee
|
||||
|
@ -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();
|
||||
|
||||
$("#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>' )
|
||||
} );
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user