Interactive JavaScript Plugin Makes an HTML Table | JSTable

How to make use of 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 optionally available polyfills if your visitors are nonetheless utilizing 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 in your existing HTML table and finished it.

<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 information from an exterior information supply through 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 web page.

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.

new JSTable("#example", {
    searchable: false
});

8. Enable/disable the table kind functionality.

new JSTable("#example", {
    sortable: false
});

9. You’re additionally allowed to specify the choices for every column:

new JSTable("#example", {
    columns: [
      {
        select: 3,
        sortable: true,
        searchable: true
        sort: "asc",
        render: function(cell, idx){
          // custom render function 
        }
      }
    ]
});

10. Or by utilizing 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 textual content.

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);
});

Flexible Interactive Data Table, JSTable Plugin/Github

See Demo And Download