README - jscancer - Javascript crap (relatively small) | |
git clone git://git.codemadness.org/jscancer | |
Log | |
Files | |
Refs | |
README | |
LICENSE | |
--- | |
README (5068B) | |
--- | |
1 jsdatatable | |
2 =========== | |
3 | |
4 small datatable script. | |
5 | |
6 | |
7 FEATURES | |
8 -------- | |
9 | |
10 - Small: | |
11 - Filesize: +- 9.1KB. | |
12 - Lines: +- 300, not much code, so hopefully easy to understand. | |
13 - No dependencies on other libraries like jQuery. | |
14 - Sorting on columns, multi-column support with shift-click. | |
15 - Filtering values: case-insensitively, tokenized (separated by space). | |
16 - Able to add custom filtering, parsing and sorting functions. | |
17 - Helper function for delayed (150ms) filtering, so filtering feels more | |
18 responsive for big datasets. | |
19 - Permissive ISC license, see LICENSE file. | |
20 - "Lazy scroll" mode: | |
21 - fixed column headers and renders only visible rows, this allows you … | |
22 "lazily" render millions of rows. | |
23 - Officially supported browsers are: | |
24 - Firefox and Firefox ESR. | |
25 - Chrome and most recent webkit-based browsers. | |
26 - IE10+. | |
27 - Lite version: datatable_lite.js and datatable_lite.css is a smaller ve… | |
28 with the following features removed: | |
29 - lazyload (d.lazyscroll), CSS selectors with the "-lazyload" suffix. | |
30 - text filtering (d.search, d.filter*, datatable_filter*, etc). | |
31 This reduces the filesize to +- 4.0KB and 140 lines. | |
32 | |
33 | |
34 USAGE | |
35 ----- | |
36 | |
37 | |
38 EXAMPLES | |
39 -------- | |
40 | |
41 See example.html for an example. A stylesheet file datatable.css is also | |
42 included, it contains the icons as embedded images. | |
43 | |
44 A table should have the classname "datatable" set, it must contain a <th… | |
45 for the column headers (<td> or <th>) and <tbody> element for the data. … | |
46 minimal code needed for a working datatable: | |
47 | |
48 <html> | |
49 <body> | |
50 <input class="filter-text" /><!-- optional --> | |
51 <table class="datatable"> | |
52 <thead><!-- columns --> | |
53 <tr><td>Click me</td></tr> | |
54 </thead> | |
55 <tbody><!-- data --> | |
56 <tr><td>a</td></tr> | |
57 <tr><td>b</td></tr> | |
58 </tbody> | |
59 </table> | |
60 <script type="text/javascript" src="datatable.js"></script> | |
61 <script type="text/javascript">var datatables = datatable_autoload();</s… | |
62 </body> | |
63 </html> | |
64 | |
65 | |
66 COLUMN ATTRIBUTES | |
67 ----------------- | |
68 | |
69 The following column attributes are supported: | |
70 | |
71 data-filterable - If "1" or "true" specifies if the column can be fi… | |
72 default: "true". | |
73 data-parse - Specifies how to parse the values, default: "strin… | |
74 which is datatable_parse_string(). See PARSING sec… | |
75 below. | |
76 data-sort - Specifies how to sort the values: default: "defaul… | |
77 which is datatable_sort_default(). See SORTING sec… | |
78 below. | |
79 data-sortable - If "1" or "true" specifies if the column can be so… | |
80 default: "true". | |
81 | |
82 | |
83 PARSING | |
84 ------- | |
85 | |
86 By default only parsing for the types: date, float, int and string are | |
87 supported, but other types can be easily added as a function with the na… | |
88 datatable_parse_<typename>(). The parse functions parse the data-value | |
89 attribute when set or else the cell content (in order). Because of this | |
90 behaviour you can set the actual values as the data-value attribute and … | |
91 the cell content for display. This is useful to display and properly sort | |
92 locale-aware currency, datetimes etc. | |
93 | |
94 | |
95 FILTERING | |
96 --------- | |
97 | |
98 Filtering will be done case-insensitively on the cell content and when s… | |
99 on the data-value attribute. The filter string is split up as tokens sep… | |
100 by space. Each token must match atleast once per row to display it. | |
101 | |
102 | |
103 SORTING | |
104 ------- | |
105 | |
106 Sorting is done on the parsed values by default with the function: | |
107 datatable_sort_default(). To change this you can set a customname string… | |
108 the data-sort attribute on the column which translates to the function: | |
109 datatable_sort_<customname>(). | |
110 | |
111 In some applications locale values are used, like for currency, decimal … | |
112 datetimes. Some people also like to use icons or extended HTML elements … | |
113 the cell. Because jsdatatable sorts on the parsed value (see section PAR… | |
114 it is possible to sort on the data-value attribute values and use the ce… | |
115 content for display. | |
116 | |
117 For example: | |
118 | |
119 currency, decimal numbers: | |
120 use data-value attribute with floating-point number, set data-pa… | |
121 column to "float". | |
122 date/datetimes: | |
123 use data-value attribute with UNIX timestamps (type int), set | |
124 data-parse on column to "int" or set the data-parse attribute on | |
125 column to "date" which is datatable_parse_date(), then make sure… | |
126 use Zulu times, like: "2016-01-01T01:02:03Z" or other | |
127 time strings that are parsable as the data-value attribute. | |
128 icons: | |
129 generally use data-value attribute with integer as weight value … | |
130 on, set data-parse column to "int". | |
131 | |
132 | |
133 DYNAMICALLY UPDATE DATA | |
134 ----------------------- | |
135 | |
136 To update data dynamically see example-ajax.html for an example how to d… | |
137 | |
138 | |
139 CAVEATS | |
140 ------- | |
141 | |
142 - A date, integer, float or other values must be able to parse properly,… | |
143 the parse function returns NaN, null or undefined etc. the sorting beh… | |
144 is also undefined. It is recommended to always set a zero value for ea… | |
145 type. | |
146 - <tfoot> is not supported in datatables in "lazy" mode. | |
147 | |
148 | |
149 Author | |
150 ------ | |
151 | |
152 Hiltjo Posthuma <[email protected]> |