Flat AJAX/JSON Table Plugin With jQuery - Table Populator

File Size: 15.5 KB
Views Total: 13653
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Flat AJAX/JSON Table Plugin With jQuery - Table Populator

Table Populator is a dynamic table plugin for rendering a flat style data table with pagination, filtering and sorting using remote data via AJAX request.

More features:

  • Auto saves table status into local storage.
  • Callbacks.
  • AJAX loading spinner.
  • Sticky table header.

How to use it:

1. Load the table-populator.css for primary table styles.

<link rel="stylesheet" href="src/table-populator.css">

2. Create the html structure for the data table.

<table id="test-table" class="sticky-thead">
  <th data-sort-key="username">User name</th>
  <th data-sort-key="email">Email</th>
  <th data-sort-key="age">Age</th>


3. Create a search input to filter your table data.

<div class="search">
  <input type="text" id="search-input" placeholder="Search ..."/>

4. Create next/prev buttons to navigate between table pages.

  <button id="prev">Previous</button>
  <button id="next">Next</button>

5. Load jQuery library and other required resources at the bottom of the webpage.

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="src/table-populator.js"></script>

6. Initialize the data table and specify the path to the remote data.

  fetch_url: "remote.json",
  previous_button_selector: "#prev",
  next_button_selector: "#next",
  pagination_limit: 5,
  search_field_selector: "#search-input",
  row_mapper: function (json_element, row_element) {
    row_element[0] = json_element.username
    row_element[1] = json_element.email
    row_element[2] = json_element.age

7. The JSON data structure should be like this:

    "username": "jessi",
    "email": "[email protected]",
    "age": 18
    "username": "vane",
    "email": "[email protected]",
    "age": 19
    "username": "samantha",
    "email": "[email protected]",
    "age": 22

8. All default options which can be passed as an object on init.

save_table_status: false,
save_table_status_store_key: null,
save_table_session_expiration: false,
fetch_url: null,
previous_button_selector: null,
next_button_selector: null,
default_order_field: null,
default_sort: "DESC",
search_field_selector: null,
pagination_limit: 20,
pagination_global_status: {
    enabled: false,
    print_selector: null,
    url_counter: null,
    separator: "/",
    of_literal: "of"
row_mapper: function (json_element, row_element) {
    alert("please implement row_mapper function to print results")
beforeRender: function (jsonData) {
afterRender: function (jsonData) {

Change logs:


  • adding two new properties two set defaults on order and sorting first call


  • core fixes


  • added reload function trigger

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