datatable.md - www.codemadness.org - www.codemadness.org saait content files
(HTM) git clone git://git.codemadness.org/www.codemadness.org
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
datatable.md (6615B)
---
1 This is a small datatable Javascript with no dependencies.
2
3
4 ## Features
5
6 * Small:
7 * Filesize: +- 9.1KB.
8 * Lines: +- 300, not much code, so hopefully easy to understand.
9 * No dependencies on other libraries like jQuery.
10 * Sorting on columns, multi-column support with shift-click.
11 * Filtering values: case-insensitively, tokenized (separated by space).
12 * Able to add custom filtering, parsing and sorting functions.
13 * Helper function for delayed (150ms) filtering, so filtering feels more
14 responsive for big datasets.
15 * Permissive ISC license, see LICENSE file.
16 * "Lazy scroll" mode:
17 * fixed column headers and renders only visible rows, this allows you to
18 "lazily" render millions of rows.
19 * Officially supported browsers are:
20 * Firefox and Firefox ESR.
21 * Chrome and most recent webkit-based browsers.
22 * IE10+.
23
24
25 ## Why? and a comparison
26
27 It was created because all the other datatable scripts suck balls.
28
29 Most Javascripts nowadays have a default dependency on jQuery, Bootstrap or
30 other frameworks.
31
32 jQuery adds about 97KB and Bootstrap adds about 100KB to your scripts and CSS
33 as a dependency. This increases the CPU, memory and bandwidth consumption and
34 latency. It also adds complexity to your scripts.
35
36 jQuery was mostly used for backwards-compatibility in the Internet Explorer
37 days, but is most often not needed anymore. It contains functionality to query
38 the DOM using CSS-like selectors, but this is now supported with for example
39 document.querySelectorAll. Functionality like a JSON parser is standard
40 available now: JSON.parse().
41
42
43 ### Size comparison
44
45 All sizes are not "minified" or gzipped.
46
47 Name | Total | JS | CSS | Images | jQuery
48 ---------------------------------+---------+---------+-------+--------+-------
49 jsdatatable | 12.9KB | 9.1KB | 2.5KB | 1.3KB | -
50 datatables.net (without plugins) | 563.4KB | 449.3KB | 16KB | 0.8KB | 97.3KB
51 jdatatable | 154.6KB | 53KB | 1KB | 3.3KB | 97.3KB
52
53 * [datatables.net](https://datatables.net/) (without plugins).
54 * [jdatatable](https://plugins.jquery.com/jdatatable/)
55
56 Of course jsdatatable has less features (less is more!), but it does 90% of
57 what's needed. Because it is so small it is also much simpler to understand and
58 extend with required features if needed.
59
60 See also:
61 [The website obesity crisis](https://idlewords.com/talks/website_obesity.htm)
62
63
64 ## Clone
65
66 git clone git://git.codemadness.org/jscancer
67
68
69 ## Browse
70
71 You can browse the source-code at:
72
73 * <https://git.codemadness.org/jscancer/>
74 * <gopher://codemadness.org/1/git/jscancer>
75
76 It is in the datatable directory.
77
78
79 ## Download releases
80
81 Releases are available at:
82
83 * <https://codemadness.org/releases/jscancer/>
84 * <gopher://codemadness.org/1/releases/jscancer>
85
86
87 ## Usage
88
89 ### Examples
90
91
92 See example.html for an example. A stylesheet file datatable.css is also
93 included, it contains the icons as embedded images.
94
95 A table should have the classname "datatable" set, it must contain a <thead>
96 for the column headers (<td> or <th>) and <tbody> element for the data. The
97 minimal code needed for a working datatable:
98
99 <html>
100 <body>
101 <input class="filter-text" /><!-- optional -->
102 <table class="datatable">
103 <thead><!-- columns -->
104 <tr><td>Click me</td></tr>
105 </thead>
106 <tbody><!-- data -->
107 <tr><td>a</td></tr>
108 <tr><td>b</td></tr>
109 </tbody>
110 </table>
111 <script type="text/javascript" src="datatable.js"></script>
112 <script type="text/javascript">var datatables = datatable_autoload();</script>
113 </body>
114 </html>
115
116
117 ### Column attributes
118
119 The following column attributes are supported:
120
121 * data-filterable: if "1" or "true" specifies if the column can be filtered,
122 default: "true".
123 * data-parse: specifies how to parse the values, default: "string", which is
124 datatable\_parse\_string(). See PARSING section below.
125 * data-sort: specifies how to sort the values: default: "default", which is
126 datatable\_sort\_default(). See SORTING section below.
127 * data-sortable: if "1" or "true" specifies if the column can be sorted,
128 default: "true".
129
130
131 ### Parsing
132
133 By default only parsing for the types: date, float, int and string are
134 supported, but other types can be easily added as a function with the name:
135 datatable\_parse\_<typename>(). The parse functions parse the data-value
136 attribute when set or else the cell content (in order). Because of this
137 behaviour you can set the actual values as the data-value attribute and use the
138 cell content for display. This is useful to display and properly sort
139 locale-aware currency, datetimes etc.
140
141
142 ### Filtering
143
144 Filtering will be done case-insensitively on the cell content and when set also
145 on the data-value attribute. The filter string is split up as tokens separated
146 by space. Each token must match at least once per row to display it.
147
148
149 ### Sorting
150
151 Sorting is done on the parsed values by default with the function:
152 datatable\_sort\_default(). To change this you can set a customname string on
153 the data-sort attribute on the column which translates to the function:
154 datatable\_sort\_<customname>().
155
156 In some applications locale values are used, like for currency, decimal numbers
157 datetimes. Some people also like to use icons or extended HTML elements inside
158 the cell. Because jsdatatable sorts on the parsed value (see section PARSING)
159 it is possible to sort on the data-value attribute values and use the cell
160 content for display.
161
162 For example:
163
164 * currency, decimal numbers: use data-value attribute with floating-point
165 number, set data-parse column to "float".
166 * date/datetimes: use data-value attribute with UNIX timestamps (type int), set
167 data-parse on column to "int" or set the data-parse attribute on column to
168 "date" which is datatable\_parse\_date(), then make sure to use Zulu times, like:
169 "2016-01-01T01:02:03Z" or other time strings that are parsable as the
170 data-value attribute.
171 * icons: generally use data-value attribute with integer as weight value to
172 sort on, set data-parse column to "int".
173
174
175 ### Dynamically update data
176
177 To update data dynamically see example-ajax.html for an example how to do this.
178
179
180 ### Caveats
181
182 * A date, integer, float or other values must be able to parse properly, when
183 the parse function returns NaN, null or undefined etc. the sorting behaviour is
184 also undefined. It is recommended to always set a zero value for each type.
185 * <tfoot> is not supported in datatables in "lazy" mode.
186
187
188 ## Demo / example
189
190 **For the below example to work you need to have Javascript enabled.**
191
192 [datatable-example.html](https://codemadness.org/datatable-example.html)