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