sortable

Default: true
Type: Boolean

enable/disable sorting of the columns

searchable

Default: true
Type: Boolean

enable/disable searching

columns

Type: Array with column objects

the columns option can hold multiple column objects

Column object properties

select

Type: Integer or Array

select one or multiple columns for the following options

searchable

Type: Boolean

enable/disable searching for the columns in select

sortable

Type: Boolean

enable/disable sorting for the columns in select

sort

Type: asc" or "desc"

When the sort option is set, the table is initial sorted by this column with the defined sorting direction.
The sorting is only applied if the sortable option set to true
This property can only be applied to single columns, because the table can only be sorted by one column at the time.

render

Type: function (cell, idx)

the rendering function for the selected column(s) with the cell and the cell index as argument.
The function has to return the rendering for this column(s).

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

data-sortable

Type: Boolean

enable/disable sorting of the column

  • a global definition of the sortable attribute of the table can be overwritten
    by a "data-sortable" attribute on the table header or
    by a custom column definitions attribute "sortable"
  • a custom column definitions attribute "sortable" can be overwritten
    by a "data-sortable" attribute on the table header
  • a "data-sortable" attribute on the table header cannot be overwritten

data-sort

Type: asc" or "desc"

sort the table initially by this column in the defined direction

  • a custom column definitions attribute is overwritten by a "data-sort" attribute
  • since sorting is only supported for one column at the same time the last defined column is used

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

Name Country Date Number
Rhona Carey Northern Mariana Islands 2020-03-12 03:47:43 9761
Ria Sherman Denmark 2019-07-16 18:36:14 7472
Hoyt Delgado Tajikistan 2019-11-26 15:47:50 7470
Bernard Murray Sint Maarten 2019-09-25 21:14:41 2793
Arden House Armenia 2019-01-08 09:02:02 9055
Nina Ferrell Palau 2019-09-17 08:16:39 5120
Glenna Shannon Malta 2019-09-30 03:22:10 5166
Erica Grant Saint Kitts and Nevis 2019-11-12 02:18:39 1025
Simon Cardenas Cayman Islands 2019-08-25 11:31:53 2766
Joy Brennan Ireland 2019-05-18 01:31:41 9680
Kennedy Arnold Uganda 2019-08-18 12:37:04 3043
Baxter Rutledge Faroe Islands 2018-08-08 19:03:44 2476
Willa Cook Micronesia 2019-04-24 17:16:02 1026
Sara Fleming New Caledonia 2019-09-27 06:48:17 3981
Whilemina Whitfield Sri Lanka 2018-08-30 20:05:14 9917
Tiger Powell Laos 2018-11-15 21:26:51 7933
Maya Powers Kenya 2019-03-21 08:48:02 3199
Kermit Campbell Cambodia 2019-06-29 03:47:03 6323
Kennedy Sears Thailand 2019-01-13 05:29:01 8502
Aristotle Gallagher Sao Tome and Principe 2019-04-14 13:28:58 5982
Rahim Ortega Haiti 2019-05-15 02:45:11 4386
Abigail Conway Wallis and Futuna 2018-11-28 02:09:58 4243
Calvin Harding Switzerland 2019-01-26 02:41:56 9560
Nissim Owen South Africa 2019-05-18 22:24:41 2985
Edan Oneill Sweden 2018-11-25 07:18:01 3439
Simon Reese Lesotho 2019-05-09 14:24:04 8611
Kylee Herrera Kazakhstan 2020-03-28 06:08:52 8434
Melvin Stafford Bonaire, Sint Eustatius and Saba 2018-09-17 10:39:37 9539
Regan Allen Greenland 2020-01-13 15:54:15 8614
Castor Kelley Cameroon 2019-05-19 11:11:10 1703
Hamilton Durham Bulgaria 2019-06-22 09:46:17 6432
Carl Burch Bouvet Island 2020-04-08 07:09:33 4149
Hiroko Finley Nigeria 2020-02-11 07:20:14 2620
Fatima Miles Libya 2020-06-12 19:04:07 5222
Sylvia Lane Dominican Republic 2019-08-06 01:30:45 1857
Maggie Sawyer Åland Islands 2019-12-01 23:56:22 2825
Dominique Lang Nigeria 2019-07-30 00:11:31 1829
Wayne Shepherd Singapore 2019-12-02 14:16:56 1289
Oren Wiley Northern Mariana Islands 2020-01-21 01:23:54 8272
Hayden Dale Sierra Leone 2019-10-18 09:36:02 6573
Rhona Mullen Côte D'Ivoire (Ivory Coast) 2018-09-06 19:06:03 8237
Hector Hamilton Mauritania 2018-08-30 14:08:34 8929
Edan Sexton French Southern Territories 2020-05-25 18:01:10 6034
Rhea Monroe Syria 2018-10-23 13:11:54 7473
Emerald Clay Martinique 2020-02-28 19:11:24 9108
Griffin Dillon Saudi Arabia 2018-11-07 16:43:16 5947
Autumn Clay Laos 2020-03-14 07:57:07 5049
Rahim Vance Samoa 2020-05-03 05:32:40 5926
Hammett Levine Martinique 2020-01-06 00:53:12 5589
Yardley Fisher Sierra Leone 2018-09-04 04:05:40 3460

perPage

Default: 5
Type: Integer

the maximum number of elements per page

perPageSelect

Default: [5, 10, 15, 20, 25]
Type: Array

the per page options in the dropdown as a list of integers. false hides the dropdown entirely.

nextPrev

Default: true
Type: Boolean

enable/disable the previous/next buttons

prevText

Default: "&lsaquo;"
Type: String

content of the previous button

nextText

Default: "&rsaquo;"
Type: String

content of the next button

firstLast

Default: false
Type: Boolean

enable/disable the buttons to go to first and last page

firstText

Default: "&laquo;"
Type: String

content of the go to first page button

lastText

Default: "&raquo;"
Type: String

content of the go to last page button

truncatePager

Default: true
Type: Boolean

truncate the page links

pagerDelta

Default: 2
Type: Integer

when truncating the page links show always pagerDelta elements before and after the current page

ellipsisText

Default: "&hellip;"
Type: String

content of item which indicates the truncated links

classes

Type: object
Default:
classes: {
    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"
}
                            

customization of the css classes

Propery Element
wrapper div-container element which wraps everything
top div-container of the {top} layout element
search div-container of the {search} layout element
input search input field
dropdown div-container of the {select} layout element
selector select element for choosing the elements per page
bottom div-container of the {bottom} layout element
info div-container of the {info} layout element
pagination div-container of the {pager} layout element
ellipsis list element which indicates a truncated pagination
loading div-container of the loading screen (server side)
container div-container element around the table
table table class
sorter table header cell of sortable column
message table cell which spans around the whole table to indicate no search result

labels

Type: object
Default:
labels: {
    placeholder: "Search...",
    perPage: "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)"
}
                            

customization of display text messages

Propery Element Variables
placeholder placeholder of the search input field
perPage label of the elements per page selection
noRows message text when no elements where found after doing a search
info text for the {info} layout element {start}: the first element on this page
{end}: the last element on this page
{page}: the current page number
{pages}: the total page number
{rows}: the total number of found elements (eventually filtered)
{rowsTotal}: the total number of elements
loading loading text
infoFiltered text for the {info} layout element when the table is filtered see info

layout

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

customization of the elements in the top and bottom containers

Variable Element
{select} the element per page selection dropdown
{search} the search field
{info} the info message
{pager} the pagination

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.

serverSide

Default: false
Type: Boolean

should the table data be retrieved from the server?

deferLoading

Default: null
Type: Integer

total data count

ajax

Default: null
Type: String

the URL for retrieving the data

ajaxParams

Default: {}
Type: object

additional parameters for the server

Default Query Parameters

Parameter Value
searchQuery the search text
sortColumn the index of the to sorted column
sortDirection the sorting direction (asc or desc)
start the data offset
length the length of the returning data

Server Response

Parameter Value
recordsTotal total data count
recordsFiltered filtered data count
data the table data which should be displayed as a two dimensional JSON array

Example

Name Country Date Number
Rhona Carey Northern Mariana Islands 2020-03-12 03:47:43 9761
Ria Sherman Denmark 2019-07-16 18:36:14 7472
Hoyt Delgado Tajikistan 2019-11-26 15:47:50 7470
Bernard Murray Sint Maarten 2019-09-25 21:14:41 2793
Arden House Armenia 2019-01-08 09:02:02 9055