jquery-ajaxtable-loading

Handles a Table Loading with AJAX | jQuery ajaxTable

by

ajaxTable is an asynchronously rendered table and a feature-rich AJAX-enabled spreadsheet plugin that loads and displays data asynchronously from a specific data source.

no data available in table while data is loading in datatable, jquery datatable dynamic load data, how to increase jquery datatable loading speed, jquery datatables load large data server side, jquery datatable lazy loading example

More features:

  • Sort the table.
  • Table filter.
  • Pagination table.
  • Export data to CSV / EXCEL / PDF.

How to make use of it:

1. Load the mandatory assets within the HTML doc.

<!-- 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 information within the doc.

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

3. Create an empty table on the web 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 info source.

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

5. The returned JSON response must 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 instance 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 attainable 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) { }
  
});

Load Data Asynchronously In Data Table, ajaxTable Plugin/Github, jquery datatables load large data client side, jquery datatables load large data mvc, jquery datatable after page load

See Demo And Download

Demo
Download

Official Website(Zenoo): Click Here

This superior jQuery/javascript plugin is developed by Zenoo. For extra Advanced Usages, please go to the official website.

Leave a Comment