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