add datatable (lite) version - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
(DIR) commit f9891fdfc1014d220da0169d87d0c2b0b545fa3c
(DIR) parent 555257513029c42bb4137c23ce0f47395e8f3bbd
(HTM) Author: Hiltjo Posthuma <hiltjo@codemadness.org>
Date: Thu, 28 Mar 2019 00:18:28 +0100
add datatable (lite) version
the lite version is without the features lazyload and text filtering. It is
just a (multi-)sortable table.
Diffstat:
M datatable/README | 5 +++++
A datatable/datatable_lite.css | 66 +++++++++++++++++++++++++++++++
A datatable/datatable_lite.js | 138 ++++++++++++++++++++++++++++++
3 files changed, 209 insertions(+), 0 deletions(-)
---
(DIR) diff --git a/datatable/README b/datatable/README
@@ -25,6 +25,11 @@ FEATURES
- Firefox and Firefox ESR.
- Chrome and most recent webkit-based browsers.
- IE10+.
+- Lite version: datatable_lite.js and datatable_lite.css is a smaller version
+ with the following features removed:
+ - lazyload (d.lazyscroll), CSS selectors with the "-lazyload" suffix.
+ - text filtering (d.search, d.filter*, datatable_filter*, etc).
+ This reduces the filesize to +- 4.0KB and 140 lines.
USAGE
(DIR) diff --git a/datatable/datatable_lite.css b/datatable/datatable_lite.css
@@ -0,0 +1,66 @@
+table.datatable {
+ table-layout: fixed;
+ border-collapse: collapse;
+}
+
+table.datatable tr th {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+table.datatable tr td {
+ border: 1px solid #aaa;
+ padding: 0 3px 0 3px;
+ line-height: 25px;
+}
+
+table.datatable tr th {
+ border: 1px solid #aaa;
+ padding: 0 16px 0 3px;
+ line-height: 25px;
+}
+
+table.datatable thead td,
+table.datatable thead th {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAMAAABFjsb+AAAAVFBMVEX////c3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3NzIvRbaAAAAG3RSTlMAAPf5AQprKuOQBnX6nZFB7vI8Db64B2HbI1kLO0PyAAAAaklEQVQYGZXBxw3EABADMY1zzln993nwa38HmNQnQF43gALQdgWgAGXl6wYFst72kKHAONmeFxTWza/9UDjT5JU++u9Jk1d6Khy7X9uqwDLbnkYUyAbbfYYC3JerEhSAomsBBaCpc0Bf/AAeJAWLTmqG7wAAAABJRU5ErkJggg==");
+ background-position: right center;
+ background-repeat: no-repeat;
+ cursor: pointer;
+}
+
+table.datatable thead td,
+table.datatable thead th,
+table.datatable tfoot td,
+table.datatable tfoot th {
+ background-color: #eee;
+}
+
+table.datatable thead tr td:hover,
+table.datatable thead tr th:hover {
+ background-color: #ccc;
+}
+
+table.datatable thead .sort-asc {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABIklEQVQ4y9WTL0gEQRTGf7Oji3/xEGwugj6xGsRmE4wG04UD4YqgxSDYLRtFMAnaTIeCySBosW02jUmzntxxKnI3lgvHMjt3e2rwKwPzPb75vnnvwS9Cda2IkwhYBW7YX3rylQbdtEYVu8BpCNs/cxYn0YjCNCzhmOK9blnwuQt8QgXNVcMSAtQtwxMBlXbs3DHL1SaLnRdvLZaBcj6xOIkKgdp0UZNalbLcOcXGA/aqLTvj4l6adjaEnZ7FprRe9/VlelBv8NdwjoYxpgicAx8ZabZE5CxNDGQ8ctE+hxzcLVDp+c9E5BNYAWop6hU4EJFa3jm7B9JRLoG7vtbJGDMHXAMCPANrIvLQ16KLyCNwCHwBRz4hXwM6cQLMA8f8W3wDnmNEHIbRWQMAAAAASUVORK5CYII=");
+}
+
+table.datatable thead .sort-desc {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAABGUlEQVQ4y82Uv0oDQRDGf3unGIOiWCtCnMpOuM7G0lbxFayENGnuEQSxEVMGBGsLS8EnEEHbwHigZyeIRCN6YbM21yiX+6OgLgwDM7PzfcN+s/BfjykqUNU60AcmRCTJq/VKAO6kfvtHzFR1GTgD5gEF1kXkpjIzVTVAK20EIEAzjVcecw3Y+BJrAquVxlTVaaCXA1QTkfeyzLZS/5ZhAJt/o7PG/pVGA7s06lJj3L+LWiuLpca8H9iTPAYP1p6Wfs0EDud8E2XlZj1z+zxkr7w0wiB+tO44K/U0dEeEQVxVZ50Zj4tPrHyugc73Fn33cmHK0H1xTNYNyatDRrEqXvQwiBPHQYrazmsEMFaknQTaQLfvOP/Vz/EDaOlUh4wYGM8AAAAASUVORK5CYII=");
+}
+
+table.datatable thead .sort-disabled {
+ background-image: none;
+ cursor: default;
+}
+
+table.datatable tbody tr:nth-child(2n+1) td {
+ background-color: #f9f9f9;
+}
+
+table.datatable tbody tr:hover td {
+ background-color: #d6f0ff;
+}
(DIR) diff --git a/datatable/datatable_lite.js b/datatable/datatable_lite.js
@@ -0,0 +1,138 @@
+var datatable_parse_date = Date.parse,
+ datatable_parse_float = parseFloat,
+ datatable_parse_int = parseInt,
+ datatable_parse_string = String;
+
+function datatable_sort_default(x, y) {
+ return x > y ? 1 : (x == y ? 0 : -1);
+}
+
+function datatable_init(el) {
+ var thead = el.tHead,
+ tbody = el.tBodies[0];
+ var ths = thead.children[0].children,
+ cols = [];
+ for (var i = 0; i < ths.length; i++)
+ cols.push({
+ parsefn: window["datatable_parse_" + (ths[i].getAttribute("data-parse") || "string")],
+ sortfn: window["datatable_sort_" + (ths[i].getAttribute("data-sort") || "default")],
+ sortable: ["1", "true"].indexOf(ths[i].getAttribute("data-sortable") || "true") != -1
+ });
+ var d = {
+ table: el,
+ thead: thead,
+ ths: ths,
+ tbody: tbody,
+ cols: cols,
+ sort: [] // sort options: [colidx, order (ASC = 0, DESC = 1)].
+ };
+ d.data = datatable_data_parse(d);
+
+ d.display = function(data) {
+ var tbody = document.createElement("tbody");
+ for (var i = 0; i < data.length; i++)
+ tbody.appendChild(data[i].tr);
+ d.table.replaceChild(tbody, d.tbody);
+ tbody.style.display = data.length ? "table-row-group" : "none";
+ d.tbody = tbody;
+ };
+
+ // setup click event handlers for sorting.
+ for (var i = 0; i < d.ths.length; i++)
+ d.cols[i].sortable && d.ths[i].addEventListener("click", function(idx) {
+ return function(e) {
+ // shift-click for multi-select modifier.
+ datatable_sort_column_toggle(d, idx, e.shiftKey);
+ d.data = datatable_sort(d, d.data);
+ d.display(d.data);
+ };
+ }(i), false);
+ return d;
+}
+
+function datatable_sort_column_get(d, idx) {
+ for (var i = 0; i < d.sort.length; i++)
+ if (d.sort[i][0] == idx)
+ return i;
+ return -1;
+}
+
+function datatable_sort_column_set(d, idx, order, multi) {
+ var c = datatable_sort_column_get(d, idx);
+ if (multi)
+ if (c != -1)
+ d.sort[c][1] = order;
+ else
+ d.sort.push([ idx, order ]);
+ else
+ d.sort = [ [idx, order] ];
+
+ for (var i = 0; i < d.ths.length; i++) {
+ var c = " " + d.ths[i].className + " ";
+ d.ths[i].className = c.replace(/ sort-(asc|desc) /g, " ").replace(/\s+/g, " ").trim();
+ }
+ for (var i = 0; i < d.sort.length; i++)
+ d.ths[d.sort[i][0]].className += " sort-" + (d.sort[i][1] ? "desc" : "asc");
+}
+
+// toggle sort or use default order: ASC.
+function datatable_sort_column_toggle(d, idx, multi) {
+ var c = datatable_sort_column_get(d, idx);
+ datatable_sort_column_set(d, idx, c == -1 || d.sort[c][1] ? 0 : 1, multi);
+}
+
+function datatable_data_parse(d) {
+ var data = [], trs = d.tbody.children;
+ // NOTE: assumes each tr has only "<td>" childnodes.
+ for (var i = 0; i < trs.length; i++) {
+ var values = [];
+ for (var j = 0, trc = trs[i].children; j < trc.length; j++) {
+ var td = trc[j], v = td.getAttribute("data-value");
+ // prefer data-value attribute, else use cell contents.
+ if (typeof(v) != "undefined" && v !== null)
+ values.push(d.cols[j].parsefn(v));
+ else
+ values.push(d.cols[j].parsefn(td.textContent || td.innerText));
+ }
+ data.push({
+ tr: trs[i],
+ values: values
+ });
+ }
+ return data;
+}
+
+function datatable_sort(d, data) {
+ // setup sort functions once (in order for multi-select).
+ var sortfns = d.sort.map(function(s) {
+ return (function(c, o, fn) {
+ if (o)
+ return function(xvals, yvals) {
+ return -fn(xvals[c], yvals[c]);
+ };
+ else
+ return function(xvals, yvals) {
+ return fn(xvals[c], yvals[c]);
+ };
+ })(s[0], s[1], d.cols[s[0]].sortfn);
+ });
+ return data.sort(function(x, y) {
+ for (var i = 0, r; i < sortfns.length; i++)
+ if ((r = sortfns[i](x.values, y.values)) != 0)
+ return r;
+ return r;
+ });
+}
+
+function datatable_autoload() {
+ // convert to Array (not changed in-place, mandatory).
+ var ds = [], dl = [], els = document.getElementsByClassName && document.getElementsByClassName("datatable") || [];
+ for (var i = 0; i < els.length; i++)
+ dl.push(els[i]);
+ for (var i = 0, d; i < dl.length; i++) {
+ if ((d = datatable_init(dl[i])) === null)
+ continue;
+ ds.push(d);
+ }
+ return ds;
+}