Data Tables
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.
- Pagination, instant search and multi-column ordering.
- Supports almost any data source: DOM, Javascript, Ajax and server-side processing
- Wide variety of extensions inc. Editor, Buttons, FixedColumns and more
- Extensive options and a beautiful, expressive API
- Fully internationalisable

<table id="data-table" class="table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
...
</tbody>
</table>
if($('#data-table')[0]) {
// Custom action links
var dataTableActions = '<i class="zwicon-more-h" data-toggle="dropdown" />' +
'<div class="dropdown-menu dropdown-menu-right">' +
'<a data-table-action="print" class="dropdown-item">Print</a>' +
'<a data-table-action="fullscreen" class="dropdown-item">Fullscreen</a>' +
'<div class="dropdown-divider" />' +
'<div class="dropdown-header border-bottom-0 pt-0"><small>Download as</small></div>' +
'<a data-table-action="excel" class="dropdown-item">Excel (.xlsx)</a>' +
'<a data-table-action="csv" class="dropdown-item">CSV (.csv)</a>' +
'</div>';
// Initiate data-table
$('#data-table').DataTable({
autoWidth: false,
responsive: true,
lengthMenu: [[15, 30, 45, -1], ['15 Rows', '30 Rows', '45 Rows', 'Everything']],
language: {
searchPlaceholder: "Search for records..." // Search placeholder
},
"sDom": '<"dataTables__top"flB<"dataTables_actions">>rt<"dataTables__bottom"ip><"clear">',
buttons: [ // Data table buttons for export and print
{
extend: 'excelHtml5',
title: 'Export Data'
},
{
extend: 'csvHtml5',
title: 'Export Data'
},
{
extend: 'print',
title: 'Material Admin'
}
],
initComplete: function() {
$('.dataTables_actions').html(dataTableActions);
}
});
// Data table button actions
$('body').on('click', '[data-table-action]', function (e) {
e.preventDefault();
var action = $(this).data('table-action');
if(action === 'excel') {
$('#data-table_wrapper').find('.buttons-excel').click();
}
if(action === 'csv') {
$('#data-table_wrapper').find('.buttons-csv').click();
}
if(action === 'print') {
$('#data-table_wrapper').find('.buttons-print').click();
}
if(action === 'fullscreen') {
var parentCard = $(this).closest('.card');
if(parentCard.hasClass('card--fullscreen')) {
parentCard.removeClass('card--fullscreen');
$body.removeClass('data-table-toggled');
}
else {
parentCard.addClass('card--fullscreen')
$body.addClass('data-table-toggled');
}
}
});
}
Files required:
Please note that Super Admin does not use Datatable's default stylesheet as Bootstrap's Table and custom styling is in place for better theming capabilities.
Type | Files |
---|---|
Custom SCSS | /src/scss/inc/vendor-overrides/_data-table.scss |
Javascript | /src/js/vendors/datatables.js |
Library |
/resources/vendors/datatables/jquery.dataTables.min.js
/resources/vendors/datatables/datatables-buttons/dataTables.buttons.min.js
/resources/vendors/datatables/datatables-buttons/buttons.print.min.js
/resources/vendors/jszip/jszip.min.js
/resources/vendors/datatables/datatables-buttons/buttons.html5.min.js
|