Introduction
Introduction Statistics Contact Development Disclaimer Help
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]>
You are viewing proxied material from codemadness.org. The copyright of proxied material belongs to its original authors. Any comments or complaints in relation to proxied material should be directed to the original authors of the content concerned. Please see the disclaimer for more details.