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

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.