jsdatatable
===========

small datatable script.


FEATURES
--------

- Small:
  - Filesize: +- 9.4KB.
  - Lines: +- 300, not much code, so hopefully easy to understand.
  - No dependencies on other libraries like jQuery.
- Sorting on columns, multi-column support with shift-click.
- Filtering values: case-insensitively, tokenized (separated by space).
- Able to add custom filtering, parsing and sorting functions.
- Helper function for delayed (150ms) filtering, so filtering feels more
  responsive for big datasets.
- Permissive ISC license, see LICENSE file, feel free to contact me for
  questions or other terms.
- "Lazy scroll" mode:
  - fixed column headers and renders only visible rows, this allows you to
    "lazily" render millions of rows.
- Officially supported browsers are:
  - Firefox and Firefox ESR.
  - Chrome and most recent webkit-based browsers.
  - IE10+.


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:

    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-insensitvely 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
-------

A date, integer, float or other values must be able to parse properly, when
the parse function returns NaN, null or undefined etc. the sorting behaviour
is also undefined. It is recommended to always set a zero value for each type.


Author
------

Hiltjo Posthuma <hiltjo@codemadness.org>
