dataTable.js

Note: Please ensure the Business Profile module is added to your CMS. The Business Document sub-module is required for this component to function properly.

Main Feature:

1. Dynamic dataTable layout
2. Custom Sorting Logic (Priority 1: 'Order', Priority 2: 'Date', Priority 3: 'Name')
3. Dynamic Filter System
4. Custom dataTables buttons that override the default export behavior

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>
    
    <!-- Start 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/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>
    <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>
    <!-- End DataTables Buttons Extension -->
    
    <!-- Customize Excel Layout (To add Title, Image, Merge Cell) -->
    <script type="text/javascript" charset="utf-8" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/exceljs.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>

<!-- Place this code at the bottom of your backend.php -->

<?php $business_document = BusinessDocument::findByModule($ctrl); ?>
<script>
    let url_public = "<input type='hidden' id='url_public' value='<?php echo URL_PUBLIC; ?>'>";
    let get_setting_ajax_url = "<input type='hidden' id='get_setting_ajax_url' value='<?php echo get_url('business_document/get_setting/'.$ctrl); ?>'>";
    let dt_layout = "<input type='hidden' id='dt_layout' value='<?php echo $business_document->dt_layout; ?>'>";
    let module_name = "<input type='hidden' id='module_name' value='<?php echo ucwords(str_replace('_', ' ', $ctrl)) ?>'>";
    $('body').append(url_public);
    $('body').append(get_setting_ajax_url);
    $('body').append(dt_layout);
    $('body').append(module_name);
</script>

<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 datatable" 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 */
#sites-list_wrapper {
  margin-top: 1rem;
}

.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: 2rem;
}

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

#filter_dataTable div:first-child {
    flex: 0 0 100%;
    margin: 0;
    align-items: center;
    justify-content: space-between;
}

#filter_dataTable .reset_filter {
  cursor: pointer;
}

<script>
    // Do NOT override the following settings:
    // - pageOrientation
    // - showExportDate
    // - showPagination
    // - backgroundImage
    // - headerImage
    // - headerText.text
    // - footerImage
    // - footerText.text
    // (These settings must be changed in the Backend → Business Document module only.)

    // Override window.dTFormatConfig.
    // To modify other properties, refer to dataTable_setting.js (window.dTFormatConfig).
    $(document).ready(function() {
      window.dTFormatConfig.skipColumns = [0, 3, 5];
      window.dTFormatConfig.tableDescription.text = 'Option List Description';
    })
</script>

async function buildPDF(dt, skipColumns) {
...

  return {
...

            // By default, all items here repeat on every page; use 'currentPage == 1' to prevent repetition:
            // if (currentPage == 1) {
            //     // All items here only appear on first page
            // }

            // Example to add items in header section(or any section)

            // Example to add 2 rows (title & description)
            // Use a plain array for simple vertical content, pdfMake automatically lays array items one after another vertically.
            // return [
            //     {
            //         text: 'Replace Your Title Here.',
            //         fontSize: 22,
            //         color: 'black',
            //         bold: false, 
            //         alignment: 'center', // 'left', 'center', 'right'
            //         margin: [0, 0, 0, 0], // [left, top, right, bottom]
            //     },
            //     {
            //         text: 'Replace Your Description Here.',
            //         fontSize: 12,
            //         color: 'black',
            //         bold: false, 
            //         alignment: 'center', // 'left', 'center', 'right'
            //         margin: [0, 0, 0, 0], // [left, top, right, bottom]
            //     }
            // ];  


            // Example of using 'stack' and 'columns'
            // Make sure don't use 'stack' or 'columns' at the same level, nest stack inside columns or vice versa

            // Example of using 'columns'
            // 'columns' group multiple items side-by-side horizontally, write styling right after columns:[] so they can share same styling
            // The width for each {} in columns: [] is equally divided
            // return {
            //     columns: [
            //         {
            //             text: 'Replace Your Title Here.',
            //             fontSize: 22,
            //             color: 'black',
            //             bold: false, 
            //             alignment: 'left', // 'left', 'center', 'right'
            //             margin: [0, 0, 0, 0], // [left, top, right, bottom]
            //         },
            //         {
            //             text: 'Replace Your Description Here.',
            //             fontSize: 12,
            //             color: 'black',
            //             bold: false, 
            //             alignment: 'right', // 'left', 'center', 'right'
            //             margin: [0, 0, 0, 0], // [left, top, right, bottom]
            //         }
            //     ],
            //     background: '#eee',
            //     margin: [10, 0, 10, 0]  // [left, top, right, bottom]
            // }

            // Example of using 'stack'
            // 'stack' groups multiple items row-by-row vertically, can share same styling too
            // return {
            //     stack: [
            //         {
            //             text: 'Replace Your Title Here.',
            //             fontSize: 22,
            //             color: 'black',
            //             bold: false, 
            //             alignment: 'center', // 'left', 'center', 'right'
            //             margin: [0, 0, 0, 0], // [left, top, right, bottom]
            //         },
            //         {
            //             text: 'Replace Your Description Here.',
            //             fontSize: 12,
            //             color: 'black',
            //             bold: false, 
            //             alignment: 'center', // 'left', 'center', 'right'
            //             margin: [0, 0, 0, 0], // [left, top, right, bottom]
            //         }
            //     ],
            //     background: '#eee',
            //     margin: [0, 10, 0, 10], // [left, top, right, bottom]
            // }

  }

}