jsdatatable: a small datatable Javascript

Last modification on 2017-09-24

This is a small datatable Javascript with no dependencies.

Features

Clone

git clone git://git.codemadness.org/jscancer

It is in the datatable directory.

Why? and a comparison

It was created because all the other datatable scripts suck balls.

Most Javascripts nowadays have a default dependency on jQuery, Bootstrap or other frameworks.

jQuery adds about 97KB and Bootstrap adds about 100KB to your scripts and CSS as a dependency. This increases the CPU, memory and bandwidth consumption and latency. It also adds complexity to your scripts.

jQuery was mostly used for backwards-compatibility in the Internet Explorer days, but is most often not needed anymore. It contains functionality to query the DOM using CSS-like selectors, but this is now supported with for example document.querySelectorAll. Functionality like a JSON parser is standard available now: JSON.parse().

Size comparison

All sizes are not "minified" or gzipped.

Name Total JS CSS Images jQuery
jsdatatable 12.9KB 9.1KB 2.5KB 1.3KB -
datatables.net (without plugins) 563.4KB 449.3KB 16KB 0.8KB 97.3KB
jdatatable 154.6KB 53KB 1KB 3.3KB 97.3KB

Ofcourse jsdatatable has less features (less is more!), but it does 90% of what's needed. Because it is so small it is also much simpler understand and extend with required features if needed.

See also: The website obesity crisis

Usage

Examples

See example.html for an example. A stylesheet file datatable.css is also included, it contains the icons as embedded images.

A table should have the classname "datatable" set, it must contain a <thead> for the column headers (<td> or <th>) and <tbody> element for the data. The minimal code needed for a working datatable:

<html>
<body>
<input class="filter-text" /><!-- optional -->
<table class="datatable">
	<thead><!-- columns -->
		<tr><td>Click me</td></tr>
	</thead>
	<tbody><!-- data -->
		<tr><td>a</td></tr>
		<tr><td>b</td></tr>
	</tbody>
</table>
<script type="text/javascript" src="datatable.js"></script>
<script type="text/javascript">var datatables = datatable_autoload();</script>
</body>
</html>

Column attributes

The following column attributes are supported:

Attribute name Description
data-filterable If "1" or "true" specifies if the column can be filtered, default: "true".
data-parse Specifies how to parse the values, default: "string", which is datatable_parse_string(). See PARSING section below.
data-sort Specifies how to sort the values: default: "default", which is datatable_sort_default(). See SORTING section below.
data-sortable If "1" or "true" specifies if the column can be sorted, default: "true".

Parsing

By default only parsing for the types: date, float, int and string are supported, but other types can be easily added as a function with the name: datatable_parse_<typename>(). The parse functions parse the data-value attribute when set or else the cell content (in order). Because of this behaviour you can set the actual values as the data-value attribute and use the cell content for display. This is useful to display and properly sort locale-aware currency, datetimes etc.

Filtering

Filtering will be done case-insensitively on the cell content and when set also on the data-value attribute. The filter string is split up as tokens separated by space. Each token must match atleast once per row to display it.

Sorting

Sorting is done on the parsed values by default with the function: datatable_sort_default(). To change this you can set a customname string on the data-sort attribute on the column which translates to the function: datatable_sort_<customname>().

In some applications locale values are used, like for currency, decimal numbers datetimes. Some people also like to use icons or extended HTML elements inside the cell. Because jsdatatable sorts on the parsed value (see section PARSING) it is possible to sort on the data-value attribute values and use the cell content for display.

For example:

currency, decimal numbers: use data-value attribute with floating-point number, set data-parse column to "float". date/datetimes: use data-value attribute with UNIX timestamps (type int), set data-parse on column to "int" or set the data-parse attribute on column to "date" which is datatable_parse_date(), then make sure to use Zulu times, like: "2016-01-01T01:02:03Z" or other time strings that are parsable as the data-value attribute. icons: generally use data-value attribute with integer as weight value to sort on, set data-parse column to "int".

Dynamically update data

To update data dynamically see example-ajax.html for an example how to do this.

Caveats

Example



ID Manufacturer Model Cores GHZ
(disabled sort)
SKU EAN Stock Price
1 Intel Core i7-7700k 4 4.2 BX80677I77700K 5032037092562 5 € 332.20
2 Intel Core i9-7900k 10 3.3 BX80673I97900X 5032037104791 0 € 969.95
3 AMD Ryzen 7 1700 8 3 YD1700BBAEBOX 0730143308328 3 € 300.95
4 AMD Ryzen 7 1800x 8 3.6 YD180XBCAEWOF 0730143308366 4 € 450.95
5 AMD Ryzen 7 1700x 8 3.4 YD170XBCAEWOF 0730143308342 12 € 339.95
6 Intel Core i5-7600k 4 3.8 BX80677I57600K 0675901428682 22 € 229.00
Footer... Total: 46