DataTables with server-side
HTML
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<table id="example" class="display" cellspacing="0">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>A</th>
<th>B</th>
<th>A</th>
<th>B</th>
<th>A</th>
<th>B</th>
<th>A</th>
<th>B</th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody></tbody>
</table>
CSS
table.dataTable.select tbody tr {
cursor: pointer;
}
JavaScript
// AJAX emulation
// FOR TESTING ONLY
$.mockjax({
url: '/admin/ldx/json-listings/',
responseTime: 200,
response: function(settings){
console.log("Request data: ", settings.data);
var recordsTotal = 1000;
this.responseText = {
draw: settings.data.draw,
recordsTotal:recordsTotal,
recordsFiltered:recordsTotal,
data: []
};
var end = (settings.data.start + settings.data.length <= recordsTotal) ? settings.data.length : recordsTotal - settings.data.start;
for(var i = 0; i < end; i++){
this.responseText.data.push(
{ id: settings.data.start+i+1, title: 'title', location: 'location', advertiser: 'advertiser', type: 'type', date_start: 'date_start', date_end: 'date_end',payment: 'OK' }
);
}
}
});
var rows_selected = [];
var listings_table = $('#example').DataTable({
"pageLength": 25,
"dom": '<"toolbar"><"top"f>rt<"bottom"lip><"clear">',
stateSave: true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "/admin/ldx/json-listings/",
"type": "POST",
"data": function ( d ) {
d.filter_categoryId = $('#category_id').val();
d.filter_advertiserId = $('#advertiser_id').val();
}
},
'columnDefs': [{
'targets': 0,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox">';
}
}],
'order': [1, 'asc'],
'rowCallback': function(row, data, dataIndex){
// If row ID is in list of selected row IDs
if($.inArray(data.id, rows_selected) !== -1){
$(row).find('input[type="checkbox"]').prop('checked', true);
$(row).addClass('selected');
}
},
"columns": [
{ "data": "id" },
{ "data": "id" },
{...