This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.
The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.
This is a fairly simple example, but it you aren't constrained to just using form input elements,
you could use anything and customise your DOM queries to suit yourself. You could also update the
ordering live as a user in entered data into a form using an event handler calling order() or
draw()
methods.
| Name | Age | Position | Office |
|---|---|---|---|
| Name | Age | Position | Office |
| Tiger Nixon | |||
| Garrett Winters | |||
| Ashton Cox | |||
| Cedric Kelly | |||
| Jenna Elliott | |||
| Brielle Williamson | |||
| Herrod Chandler | |||
| Rhona Davidson | |||
| Colleen Hurst | |||
| Sonya Frost | |||
| Jena Gaines | |||
| Quinn Flynn | |||
| Charde Marshall | |||
| Haley Kennedy | |||
| Tatyana Fitzpatrick | |||
| Michael Silva | |||
| Paul Byrd | |||
| Gloria Little | |||
| Bradley Greer | |||
| Dai Rios | |||
| Jenette Caldwell | |||
| Yuri Berry | |||
| Caesar Vance | |||
| Doris Wilder | |||
| Angelica Ramos | |||
| Gavin Joyce | |||
| Jennifer Chang | |||
| Brenden Wagner | |||
| Ebony Grimes | |||
| Russell Chavez | |||
| Michelle House | |||
| Suki Burks | |||
| Prescott Bartlett | |||
| Gavin Cortez | |||
| Martena Mccray | |||
| Unity Butler | |||
| Howard Hatfield | |||
| Hope Fuentes | |||
| Vivian Harrell | |||
| Timothy Mooney | |||
| Jackson Bradshaw | |||
| Miriam Weiss | |||
| Bruno Nash | |||
| Odessa Jackson | |||
| Thor Walton | |||
| Finn Camacho | |||
| Elton Baldwin | |||
| Zenaida Frank | |||
| Zorita Serrano | |||
| Jennifer Acosta | |||
| Cara Stevens | |||
| Hermione Butler | |||
| Lael Greer | |||
| Jonas Alexander | |||
| Shad Decker | |||
| Michael Bruce | |||
| Donna Snider |
The Javascript shown below is used to initialise the table shown in this example:
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val();
} );
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('select', td).val();
} );
}
/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).prop('checked') ? '1' : '0';
} );
}
/* Initialise the table with the required column ordering data types */
$(document).ready(function() {
$('#example').dataTable( {
"columns": [
null,
{ "orderDataType": "dom-text", "type": "numeric" },
{ "orderDataType": "dom-text" },
{ "orderDataType": "dom-select" }
]
} );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.