Author: | jstable |
---|---|
Views Total: | 2,281 views |
Official Page: | Go to website |
Last Update: | January 5, 2023 |
License: | MIT |
Preview:

Description:
JSTable is a tiny, flexible, powerful data table library to make your HTML table interactive with sorting, filtering, and pagination functionalities.
Inspired by Vanilla-DataTables and DataTables jQuery plugin.
Works both with static HTML table and dynamic tabular data stored on the server-side (JSON, PHP, etc).
How to use it:
1. Add JSTable’s JavaScript and Stylesheet to the webpage.
<link rel="stylesheet" href="jstable.css" /> <script src="jstable.min.js"></script>
2. Load optional polyfills if your visitors are still using legacy browsers.
<script src="polyfill-babel.min.js"></script> <script src="polyfill-promise.min.js"></script> <script src="polyfill-fetch.min.js"></script>
3. Initialize the JSTable on your existing HTML table and done.
<table id="example"> <thead> <tr> <th>Name</th> <th>Country</th> <th>Date</th> <th>Number</th> </tr> </thead> <tbody> <tr> <td>Rhona Carey</td> <td>Northern Mariana Islands</td> <td>2020-03-12 03:47:43</td> <td>9761</td> </tr> ... </tbody> </table>
new JSTable("#example");
4. Or load tabular data from an external data source via AJAX as follows:
new JSTable("#example", { serverSide: true, deferLoading: 1000, ajax: 'data.json', ajaxParams: { // ajax params here } } );
5. Determine how many rows to display per page. Default: 5.
new JSTable("#example", { perPage: 5, perPageSelect: [5, 10, 15, 20, 25] });
6. Customize the pagination controls.
new JSTable("#example", { nextPrev: true, firstLast: false, prevText: "‹", nextText: "›", firstText: "«", lastText: "»", ellipsisText: "…", truncatePager: true, pagerDelta: 2, });
7. Enable/disable the table filter functionality. Default: true.
new JSTable("#example", { searchable: false });
8. Enable/disable the table sort functionality. Default: true.
new JSTable("#example", { sortable: false });
9. You’re also allowed to specify the options for each column:
new JSTable("#example", { columns: [ { select: 3, sortable: true, searchable: true sort: "asc", render: function(cell, idx){ // custom render function } } ] });
10. Or by using data
attributes:
<table id="example"> <thead> <tr> <th data-sortable="false">Name</th> <th data-sort="asc">Country</th> <th>Date</th> <th>Number</th> </tr> </thead> </table>
11. Override the default CSS classes.
new JSTable("#example", { top: "dt-top", info: "dt-info", input: "dt-input", table: "dt-table", bottom: "dt-bottom", search: "dt-search", sorter: "dt-sorter", wrapper: "dt-wrapper", dropdown: "dt-dropdown", ellipsis: "dt-ellipsis", selector: "dt-selector", container: "dt-container", pagination: "dt-pagination", loading: "dt-loading", message: "dt-message" });
12. Customize the display text.
new JSTable("#example", { labels: { placeholder: "Search...", perPage: "{select} entries per page", noRows: "No entries found", info: "Showing {start} to {end} of {rows} entries", loading: "Loading...", infoFiltered: "Showing {start} to {end} of {rows} entries (filtered from {rowsTotal} entries)" }, });
13. Customize the layout.
new JSTable("#example", { layout: { top: "{select}{search}", bottom: "{info}{pager}" }, });
14. Event handlers.
const myTable = new JSTable("#example"); myTable.on("init", function () { // on init }); myTable.on("update", function () { // when the data is updated }); myTable.on("getData", function (dataRows) { // when the data is processed }); myTable.on("fetchData", function (serverData) { // when the data is fetched from the server }); myTable.on("search", function (query) { // after filtering }); myTable.on("sort", function (column, direction) { // after the data is sorted }); myTable.on("paginate", function (old_page, new_page) { console.log(old_page); console.log(new_page); }); myTable.on("perPageChange", function (old_value, new_value) { console.log(old_value); console.log(new_value); });
Changelog:
v1.6.5 (01/05/2023)
- Fix search timeout replacing input value
- Extend url query params with perPage and sorting
v1.6.3 (10/16/2022)
- Fix sorting, again
- Custom http method
v1.6.2 (10/04/2022)
- Fix sorting
v1.6.1 (09/02/2022)
- add a search delay
v1.6 (06/26/2022)
- Add possibility to load initial page from server when using server side
v1.5 (01/17/2022)
- Add possibility to define table row data with server side rendering.
v1.4 (01/09/2022)
- parse table row attributes
- add callback (rowAttributesCreator) to set table attributes based on cells
- add possibility to set table cell attributes from server side rendering
v1.3 (12/06/2021)
- Some improvements with overriding configuration fields
- Add url parameters on paginate and search
- Parse url parameters for pagination and search
- Improve browser compatibility
- When a missing column is defined in the config no error is thrown and the column is ignored
v1.2 (05/16/2021)
- Update dependencies and change how table cells are rendered
12/11/2020
- Add paginate function
same as this example
” https://jsfiddle.net/andrebertonha/xk4hwvo7/30/ “,
but i don’t want use this code, not match my project.
Can it add boolean buttons for filter data?
Can it click next page, go to top side first?
Can it just using pagination function, for simple click paginate number then open html page directly?
You can add boolean buttons. Just type in boolean MAGIC=”(null)”
Hello, first of all GREAT PRODUCT, working like a charm. One very little detail on the manual page https://jstable.github.io/options.html under Labels :
perPage: “entries per page”,
this should be
perPage: “{select} entries per page”