DataTables Sort By Dom Object
Sorting based on text field, select box & check box
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
<th>Is Active</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
<th>Is Active</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>
<input type="text" id="row-1-age" name="row-1-age" value="61">
</td>
<td>
<input type="text" id="row-1-position" name="row-1-position" value="System Architect">
</td>
<td>
<select size="1" id="row-1-office" name="row-1-office">
<option value="Edinburgh" selected="selected">
Edinburgh
</option>
<option value="London">
London
</option>
<option value="New York">
New York
</option>
<option value="San Francisco">
San Francisco
</option>
<option value="Tokyo">
Tokyo
</option>
</select>
</td>
<td>
<input type="checkbox" name="row-2-active" />
</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>
<input type="text" id="row-2-age" name="row-2-age" value="63">
</td>
<td>
<input type="text" id="row-2-position" name="row-2-position" value="Accountant">
</td>
<td>
<select size="1" id="row-2-office" name="row-2-office">
<option value="Edinburgh">
Edinburgh
</option>
<option value="London">
London
</option>
<option value="New York">
New York
</option>
<option value="San Francisco">
...
JavaScript
/* 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 input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order['dom-text-numeric'] = function(settings, col) {
return this.api().column(col, {
order: 'index'
}).nodes().map(function(td, i) {
return $('input', td).val() * 1;
});
}
/* 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';
});
}
$("#getSelectedChecks").click(function() {
var table1 = $('#example').dataTable();
$('input[type=checkbox]:checked', table1.fnGetNodes()).each(function(index,element){
alert(element.name);
});
});
/* Initialise the table with the required column ordering data types */
$(document).ready(function() {
$('#example').DataTable({
"columns": [
null, {
"orderDataType": "dom-text-numeric"
}, {
"orderDataType": "dom-text",
type: 'string'
}, {
"orderDataType": "dom-select"
}, {
"orderDataType": "dom-checkbox"
}
]
});
});