Load Data Asynchronously In Data Table - jQuery ajaxTable
File Size: | 141 KB |
---|---|
Views Total: | 3820 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.