Column object properties

Example

In the following example the first column (0) is sortable and the table is initial sorted by this column in "asc" direction.
This column is also searchable and rendered with moment.js in the date format 'DD.MM.YYYY'.

The second (1) and third (2) columns are not sortable and not searchable.
The table cells have a data-attribute "data-link" which is used to render the table with a hyperlink.

columns: [
            {   
                select: 0,
                sortable: true,
                sort: "asc",
                searchable: true,
                render: function (cell, idx) {
                    let data = cell.innerHTML;
                    return moment(data).format('DD.MM.YYYY');
                }
            },
            {   
                select: [1, 2],
                sortable: false,
                searchable: false,
                render: function (cell, idx) {
                    let data = cell.innerHTML;
                    let link = cell.dataset.link;
                    return '<a href="' + link + '">' + data + '</a>';
                }
            }
]
                    

Data-Attributes

It is possible to define data-attributes on individual columns by applying them to the table header cell.

Sorting

Example

In the following example the table is sortable and should be initially sorted by the third column.

The data-attribute "data-sortable" disabled the sorting for the first column and the data-attribute "data-sort" changes the initial sorting to the second column.

HTML

<table id="example2">
    <thead>
        <tr>
            <th data-sortable="false">Name</th>
            <th data-sort="asc">Country</th>
            <th>Date</th>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Norman Small</td>
            <td>Tokelau</td>
            <td>2020-02-01 07:22:40</td>
            <td>8243</td>
        </tr>
    </tbody>
</table>
                    

JavaScript

new JSTable("#example2", {
        sortable: true,
        columns: [
            {
                select: 3,
                sortable: true,
                sort: "asc"
            }
        ]
    }
);
                    

Result

layout: {
    top: "{select}{search}",
    bottom: "{info}{pager}"
}
                            

Notices

• It is not advised to use the {search} and {select} elements more than once, since they are not synchronized and work independent
• The {info} and {pager} elements can only be used once.
• When using only one element this element is always display on the left.
  It is not possible to display a single element on the right aligned.
• The element {select} depends on the value of perPageSelect. When the perPageSelect option is false the container is not displayed.
• The element {search} depends on the value of searchable. When the searchable option is false the container is not displayed.

For large datasets it is possible to do the sorting, searching and pagination on the server.

The first table page needs to be available in plain HTML.
For the various actions the server is contacted and the table is replaced with the returning data from the server.

Default Query Parameters

Server Response

Example Responses

{
    "recordsTotal": 2,
    "recordsFiltered":2,
    "data": [
                [
                    "First Row First Column",
                    "First Row Second Column"
                ],
                [
                    "Second Row First Column",
                    "Second Row Second Column"
                ]
            ]
}
                    

{
    "recordsTotal": 2,
    "recordsFiltered":2,
    "data": [
                [
                    {"data":"First Row First Column", "attributes":{"data-customvalue":"test"}},
                    {"data":"First Row Second Column", "attributes":{}}
                ],
                [
                    {"data":"Second Row First Column", "attributes":{"data-customvalue2":"test2"}},
                    {"data":"Second Row Second Column"}
                ]
            ]
}
                    

{
    "recordsTotal": 2,
    "recordsFiltered":2,
    "data": [
                {
                    "data": [
                                "First Row First Column",
                                "First Row Second Column"
                    ],
                    "attributes": {
                        "data-customvalue": "test"
                    }
                },
                {
                    "data": [
                                {"data":"Second Row First Column", "attributes":{"data-customvalue2":"test2"}},
                                {"data":"Second Row Second Column"}
                    ],
                    "attributes": {
                        "data-customvalue2": "test2"
                    }
                }
            ]
}
                    

Example

It is possible to append URL query parameters when searching or navigating with the current selected value.
Additionally these parameters are parsed and applied when loading the current page.

queryParams: {
    page: 'page',
    search: 'search',
    sortColumn: 'sortColumn',
    sortDirection: 'sortDirection',
    perPage: 'perPage'
}
                            

It is possible to add row attributes based on the cells. Therefore a callback for the rowAttributesCreatorcan be defined.

rowAttributesCreator: function(cells){
    return {"data-customvalue1": "value1", "data-customvalue2": "value2"};
}