DataTable (Standardize Excel & PDF & Print)

Include:

1. Apply dataTable.js
2. Define custom layout
3. Add filtering funtion
4. Standardize Excel & PDF & Print

Note : Make sure you have 'Option' module in your CMS, if not you can skip Step 2 & Step 3

Directory

    <!-- 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>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/dataTable_setting.js"></script>
    
    <!-- DataTables Buttons Extension -->
    <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>
    
    <!-- Moment.js to sort dataTable date correctly -->
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/moment.min.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/datetime-moment.js"></script>

    <?php
        $dataTable_settings = Option::findByCategory('dataTable_setting');
        $dataTable_data = null;

        foreach ($dataTable_settings as $s) {
            if ($s->option_id == $ctrl.'_layout') {
                $dataTable_data = $s->code;
                break;
            }

            if ($s->option_id == 'default_layout' && $dataTable_data === null) {
                $dataTable_data = $s->code;
            }
        }

        if ($dataTable_data !== null) {
            echo '<input type="hidden" id="dataTable_setting" value="'.$dataTable_data.'">';
        }
    ?>

INSERT INTO `wolf_option` (`id`, `category`, `name`, `option_id`, `code`, `description`, `status`, `created_on`) VALUES 
(NULL, 'dataTable_setting', 'Default Layout', 'default_layout', 'lfrtip', NULL, 1, NOW()),
(NULL, 'dataTable_setting', 'Option Layout', 'option_layout', 'Blfrtip', 'NOTE : ID must update = module name + \'_layout\'\r\n\r\nB	Buttons (export: CSV, Excel, PDF, Print)\r\nC	ColVis (column visibility control – requires plugin)\r\nl	Length changing (show X rows dropdown)\r\nf	Filter (search box)\r\nr	Processing display (loading indicator)\r\nt	The table itself\r\ni	Table information (e.g., “Showing 1–10 of 50 entries”)\r\np	Pagination (previous / next buttons)\r\nP	SearchPanes (advanced column filtering — plugin)\r\nQ	SearchBuilder (advanced custom filter — plugin)\r\nR	ColReorder button (requires plugin)\r\nS	StateSave indicator (loading saved state)\r\n>	Open a div container wrapper\r\n<	Close the div container wrapper\r\n“ ”	Any custom HTML string (e.g. \'<\"myClass\"f>\')\r\n', 1, Now());

<form name="thisform" method="post" action="<?php echo get_url('option/save_order') ?>">
    <div align=right><input type=submit value="<?php echo __('Save Order'); ?>"></div>
    <table id="sites-list" class="index" cellpadding="0" cellspacing="0" border="0">
      <thead>
        <tr>
          <th></th> <!-- add an extra <th> for checkbox column -->
          <th class="files"><?php echo __('Name'); ?></th>
          <th class="files filterColumn"><?php echo __('Category'); ?></th>
          <th class="size"><?php echo __('Order'); ?></th>
          <th class="size filterDate" width=100><?php echo __('Date Added'); ?></th>
          <th class="modify" width=50><?php echo __('Action'); ?></th>
        </tr>
      </thead>

/* dataTable */
.dataTables_length,
.dataTables_filter {
  margin: 1rem 0;
}

#sites-list_wrapper .dt-buttons {
  position: absolute;
  top: -35px;
}

#filter_dataTable {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

#filter_dataTable h3 {
    flex: 0 0 100%;
    margin: 0;
}

#filter_dataTable > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

// Overwrite customConfig for Option Table in views -> option -> index.php
if ($("body#body_option_index").length) {
    customConfig.skipColumns = [0, 3, 5];
    customConfig.title.text = 'Option List';
    customConfig.shortDescription.text = 'Option List Table';
}

// To change the default setting for all tables, update code here
let customConfig = {...}