DataTable

Make table searchable and sortable using DataTables.js.

Directory

File	Folder Link
.css & .js	\\SYNAS\Allan\DOCUMENTATION\Component\DataTable\rckuc\wolf\admin\javascript
backend.php	\\SYNAS\Allan\DOCUMENTATION\Component\DataTable\rckuc\wolf\app\layouts
backend.js	\\SYNAS\Allan\DOCUMENTATION\Component\DataTable\rckuc\wolf\admin\javascript

Step 1

Update: backend.php

Insert all script & css link to <head> section

  <head>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/jquery.dataTables-1.13.6.min.css"></link>
    <link rel="stylesheet" href="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/buttons.dataTables-2.4.1.min.css"></link>
    
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/jquery.dataTables-1.13.6.min.js"></script>
    
    <!-- DataTables Buttons Extension (Feature for Print, Copy, Download Excel & PDF & CSV)-->
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/dataTables.buttons-2.4.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/jszip-3.10.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/pdfmake-0.2.7.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/vfs_fonts-0.2.7.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/buttons.html5-2.4.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/buttons.print-2.4.1.min.js"></script>
  </head>

  <head>
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/jquery.dataTables-1.13.6.min.css"></link>
    <link rel="stylesheet" href="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/buttons.dataTables-2.4.1.min.css"></link>
    
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/jquery.dataTables-1.13.6.min.js"></script>
    
    <!-- DataTables Buttons Extension (Feature for Print, Copy, Download Excel & PDF & CSV)-->
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/dataTables.buttons-2.4.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/jszip-3.10.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/pdfmake-0.2.7.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/vfs_fonts-0.2.7.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/buttons.html5-2.4.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/buttons.print-2.4.1.min.js"></script>
  </head>

Step 2

Copy and paste all 'dataTable' files to "wolf/admin/javascript" folder

Step 3

Update: backend.js
Apply 'dataTable' to all views -> index.php <table id="sites-list">

// Jquery 'DataTable' apply to all index.php table
$(document).ready(function() {
    // if this table have 'order' column then set ordering to <td>
    $('#sites-list tbody td').each(function () {
        let $input = $(this).find('input[name="order[]"]');
        if ($input.length) {
            $(this).attr('data-order', $input.val());
        }
    });

    let tableConfig = {
        lengthMenu: [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, 'All']
        ]
    };

    // Detect sort column priority
    let $ths = $('#sites-list thead th');
    let orderCol = $ths.filter('.size').index();        // "Order"
    let dateCol  = $ths.filter('.datefilter').index();  // "Date Added"
    let sortCol  = orderCol >= 0 ? orderCol : (dateCol >= 0 ? dateCol : 0);

    // Default order
    tableConfig.order = [[sortCol, 'asc']];

    window.sitesTable = $('#sites-list').DataTable(tableConfig);
})

// Jquery 'DataTable' apply to all index.php table
$(document).ready(function() {
    // if this table have 'order' column then set ordering to <td>
    $('#sites-list tbody td').each(function () {
        let $input = $(this).find('input[name="order[]"]');
        if ($input.length) {
            $(this).attr('data-order', $input.val());
        }
    });

    let tableConfig = {
        lengthMenu: [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, 'All']
        ]
    };

    // Detect sort column priority
    let $ths = $('#sites-list thead th');
    let orderCol = $ths.filter('.size').index();        // "Order"
    let dateCol  = $ths.filter('.datefilter').index();  // "Date Added"
    let sortCol  = orderCol >= 0 ? orderCol : (dateCol >= 0 ? dateCol : 0);

    // Default order
    tableConfig.order = [[sortCol, 'asc']];

    window.sitesTable = $('#sites-list').DataTable(tableConfig);
})

Component

Module

DataTable

Directory

Step 1

Step 2

Step 3