Making DataTables fun again.
Create a new table in your view. It must follow the following markup:
<table class="js-datatable" data-source="/url/to/json/source">
<thead>
<tr class="js-table-columns">
<th data-name="id">ID</th>
<th data-name="name" data-default-sort="true" data-default-sort-order="desc">Name</th>
<th data-name="created_at">Created at</th>
<th data-name="blocked">Blocked</th>
</tr>
</thead>
<tfoot>
<tr class="js-table-filters">
<th><input type="text" class="js-input-filter"></th>
<th><input type="text" class="js-input-filter"></th>
<th><input type="text" class="js-input-filter"></th>
<th><input type="text" class="js-input-filter"></th>
<th>
<select class="js-select-filter">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</th>
<th></th>
</tr>
</tfoot>
</table>
Javascript:
var translations = {
get: function(languageCode) {
return this[languageCode]();
},
nl: function() {
return {
'oPaginate': {
'sFirst': 'Eerste',
'sLast': 'Laatste',
'sNext': 'Volgende',
'sPrevious': 'Vorige'
},
'sEmptyTable': 'Geen resultaten aanwezig in de tabel',
'sInfo': '_START_ tot _END_ van _TOTAL_ resultaten',
'sInfoEmpty': 'Geen resultaten om weer te geven',
'sInfoFiltered': ' (gefilterd uit _MAX_ resultaten)',
'sInfoPostFix': '',
'sInfoThousands': '.',
'sLengthMenu': '_MENU_ resultaten weergeven',
'sLoadingRecords': 'Een moment geduld aub - bezig met laden...',
'sProcessing': 'Bezig...',
'sSearch': 'Zoeken:',
'sZeroRecords': 'Geen resultaten gevonden'
};
}
};
$('.js-datatable').each(function() {
var item = new DataTable(
$(this),
{
language: 'nl'
},
translations
);
item.functions.init();
});
This script will look for the '.js-datatable' selector and make a datatable out of it. A data attribute "source" is required, with an URL. This is the URL the table will get his contents from.
This is the selector the script uses to figure out how to map the json contents to the table. Each must contain a data attribute "name" with server side name. By default sorting and searching is enable for a column. If you would like to disable this, add data-orderable="false" and/or data-searchable="false". If you would like to set a default sorting column, you can add the following attributes to that column: data-default-sort="true" to say that this is the default sort column data-default-sort-order="desc" to say the sort order
This is the selector used to initialize input searching per column.
If you want a column to be searchable, add:
<input> with the ".js-input-filter" class for an input filter or a
<select> with the ".js-select-filter" class for a dropdown filter
You can let the table automaticly reload by adding: data-auto-reload="3000" Where 3000 can be any number of miliseconds.
By default a table shows 10 records, to override this, you can add: data-per-page="20" Where 20 can be any number of items.