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">
  <thead>
  <th data-sort-key="username">User name</th>
  <th data-sort-key="email">Email</th>
  <th data-sort-key="age">Age</th>
  </thead>
  <tbody>

  </tbody>
</table>

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

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

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

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

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.

$('#table').tablePopulator({
  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:

2016-07-28

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

2016-07-27

• core fixes

2016-04-29

• 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.