EasyTable.js

EasyTable.js is a simple VanillaJS solution for adding pagination, sorting and filtering to HTML tables whether the data is loaded on page render or via AJAX.

Installation

npm install easytable.js

Usage

This example shows how to use EasyTable with AJAX, but you can also load your data with the page turn that table into an EasyTable.

<div>
    <label for="limit">Per Page</label>
    <select id="limit">
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100">100</option>
        <option value="">All</option>
    </select>
</div>
<div>
    <table id="dataTable">
        <thead class="cm_blue">
            <tr>
                <th class="et-sortable" data-column="name">Name</th>
                <th class="et-sortable" data-column="phone_number">Phone Number</th>
                <th class="et-sortable" data-column="datetime">Date</th>
                <th>Time</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <td>
                    <div>
                        <p id="page_view_count"></p>
                    </div>
                    <div id="pagination_container"></div>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

window.EasyTable = require('./easytable.js');

let easyTable = new EasyTable('#dataTable', {
    ajax: {
        url: 'url',
        type: 'POST',
        data: {},
        emptyText: 'No Data Found',
        columns: [
            //...
        ],
        handlers: {
            error: function(xhr, status, error) {
                //...
            },
            success: function(result) {
                //...
            },
        },
    },
    countText: 'Showing {PF} - {PL} of {TR} items',
    countTextContainer: '#page_view_count',
    dataType: 'ajax',
    pageSize: $('#limit').val(),
    pageSizeSelector: '#limit',
    pagination: true,
    paginationContainer: '#pagination_container',
    paginationSideLinks: 3,
    sortingIcons: {
        none: 'fas fa-sort',
        asc: 'fas fa-sort-down',
        desc: 'fas fa-sort-up',
    },
    stickyHeader: true,
    stickyHeaderTop: function(element) {
        //
    },
    sorting: true,
});

Options

| Name | Type | Default | Description | | ----- | ----- | ----- | ----- | | ajax.columns | array | [] | list of data properties in the order it will be displayed in the table | | ajax.data | object | {} | AJAX request data | | ajax.emptyText | string | "No Records Found" | message shown when no data in table | | ajax.handlers.error | function | function(xhr, error, status) | AJAX error handler | | ajax.handlers.success | function | function(result) | AJAX success handler | | ajax.sorting.column | string | "" | column to sort on; from ajax.columns | | ajax.sorting.desc | boolean | false | sorting direction | | ajax.type | string | "GET" | type of request; supports GET and POST | | ajax.url | string | "" | request URL | | countText | string | "Showing {PF} - {PL} of {TR} rows" | pagination count text | | countTextContainer | string | "" | identifier for count text container | | dataType | string | "html" | data source ("html", "ajax") | | filtering | boolean | false | enables filtering | | filteringInput | string | "" | <input/> element for filtering table data | | filteringTrigger | string | "" | element that triggers filtering, only supports buttons, defaults to input's input event | | pageActive | integer | 1 | which page to start on | | pageSize | integer | 10 | page size, set to null to display all data on 1 page | | pageSizeSelector | string | "" | identifier of element that triggers changing the page size, can be any element that triggers a change event, a <select> element is suggested | | pagination | boolean | false | enables pagination | | paginationContainer | string | "" | identifier for pagination container | | paginationNext.arrow | string/function | "»" | next page button icon | | paginationPrevious.arrow | string/function | "«" | previous page button icon | | paginationSideLinks | integer | null | number of buttons to show on each side of active page | | stickyHeader | boolean | false | stick header to top of page on table scroll | | stickyHeaderTop | string/function | "" | distance from the top of the page the header is allowed or a function to modify the <th>s | | sorting | boolean | false | enables sorting | | sortingIcons.none | string/function | "" | icon for no sorting | | sortingIcons.asc | string/function | "" | icon for ASC sorting | | sortingIcons.desc | string/function | "" | icon for DESC sorting |

Methods

EasyTable.getCurrentPage(): returns the current page

EasyTable.setCurrentPage(page = 1): sets the current page (defaults to 1), call EasyTable.refresh() after calling this

EasyTable.getProperties(): gets the current properties of the current instance of EasyTable

EasyTable.loadPage(page = null, reset_sort = false): loads a page via AJAX (page = null will load page 1)

EasyTable.refresh(): redraws EasyTable

Miscellaneous

countText Placeholders

| Placeholder | Value | | ----- | ----- | | {CP} | current page number | | {TP} | total pages | | {PF} | position first record on current page | | {PL} | position last record on current page | | {TR} | total records |

Notes

add the class .et-sortable to <th>s to make a column sortable

add the class .et-filter to <th>s to allow filtering on a column

add data-column attribute with value of column to <th>s when sorting via AJAX