Load Data Asynchronously In Data Table - jQuery ajaxTable

A feature-rich and AJAX-enabled data table jQuery plugin that loads & displays data asynchronously from a specific data source.

More Features:

• Table sort.
• Table filter.
• Table pagination.
• Export data to CSV/EXCEL/PDF.

Dependencies:

• jQuery
• slick-loader: for ajax loading indicator
• csvExport: Export HTML Table Into CSV File
• excel-export: Export HTML Table Into Excel File

How to use it:

1. Load the necessary resources in the HTML document.

<!-- JQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- slick-loader -->
<link rel="stylesheet" href="https://unpkg.com/slick-loader/slick-loader.min.css">
<script src="https://unpkg.com/slick-loader/slick-loader.min.js"></script>
<!-- CSV Export -->
<script src="https://unpkg.com/csvexporter/csvExport.min.js"></script>
<!-- Excel Export -->
<script src="https://unpkg.com/jquery-excel-exporter/excel-export.min.js"></script>

2. Load the ajaxTable jQuery plugin's files in the document.

<link rel="stylesheet" href="ajaxTable.min.css" />
<script src="ajaxTable.min.js"></script>

3. Create an empty table on the page.

<table>
  <thead>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </thead>
  <tbody>
  </tbody>
</table>

4. Call the function on the table and specify the data source.

$('table').ajaxTable({
  source: 'example.php'
});

5. The returned JSON response should be like these:

{
  "data":[
    "<tr><td>Lorem</td><td>ipsum</td><td>dolor</td></tr>",
    "<tr><td>enim</td><td>nesciunt</td><td>quidem</td></tr>",
    // ...
  ],
  "total":2 // total number of pages
}

6. The example PHP code:

if(isset($_POST['total']) || isset($_POST['page'])){
    $return = array();
    $page = isset($_POST['page']) ? (int)$_POST['page'] : 1;
    $search = isset($_POST['search']) ? $_POST['search'] : array_fill(0, (int)$_POST['columns'], "");
    $orderIndex = isset($_POST['orderBy']) ? $_POST['orderBy'] : 0;
    $order = isset($_POST['order']) ? $_POST['order'] : 'desc';
    $context = $_POST['context']
    $currentData = getItems($page, $search, $orderIndex, $order, $context);  // Get your items here
    $currentTotal = getTotalItems($search, $context);                        // Get the total number of items here
    $return['data'] = $currentData;
    if(isset($_POST['total']) && $_POST['total'] == 'true'){
      $return['total'] = $currentTotal;
    }
    echo json_encode($return);
}

7. All possible configurations.

$('table').ajaxTable({

  // data source
  source: false,

  // object to pass to the server while fetching the data
  sourceContext: {},

  // displays export buttons
  printButtons: true,

  // index of the column should be sortable
  orderBy: 0,

  // or 'asc'
  orderSort: 'desc',

  // enables console log
  logging: false,

  // content type
  contentType: 'application/x-www-form-urlencoded; charset=UTF-8',

  // callback function
  onReady: function (table, data) { },
  onStructureReady: function (table, data) { },
  beforeAjax: function (table, data) { },
  onUpdate: function (table, data) { }
  
});

Changelog:

v1.12.4 (07/12/2021)

• Bug Fixes

---

This awesome jQuery plugin is developed by Zenoo. For more Advanced Usages, please check the demo page or visit the official website.