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