rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-03-21 13:29:04 +01:00
Code Issues Releases Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
77b2cffc72bfb5b3fb1c73d131827bc31d0e1183
cc87fa5ae24a0a73507010dbdfa1e9f8c454e0ee

73
examples/api/multi_filter_select.html
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>