From a29c52a1ceff7e7fe0d93693ed7068fd14703eb4 Mon Sep 17 00:00:00 2001 From: Udo Walter Date: Mon, 15 May 2017 16:50:28 +0200 Subject: [js_stupidtable] changed one-line code to formatted code; modified to show sorting arrows on columns and different mouse cursor on hover --- modules-available/js_stupidtable/clientscript.js | 168 ++++++++++++++++++++++- modules-available/js_stupidtable/style.css | 3 + 2 files changed, 167 insertions(+), 4 deletions(-) create mode 100644 modules-available/js_stupidtable/style.css (limited to 'modules-available/js_stupidtable') diff --git a/modules-available/js_stupidtable/clientscript.js b/modules-available/js_stupidtable/clientscript.js index bfbc9112..4e0dd4c9 100644 --- a/modules-available/js_stupidtable/clientscript.js +++ b/modules-available/js_stupidtable/clientscript.js @@ -24,7 +24,167 @@ SOFTWARE. */ -(function(c){c.fn.stupidtable=function(b){return this.each(function(){var a=c(this);b=b||{};b=c.extend({},c.fn.stupidtable.default_sort_fns,b);a.data("sortFns",b);a.on("click.stupidtable","thead th",function(){c(this).stupidsort()})})};c.fn.stupidsort=function(b){var a=c(this),g=0,f=c.fn.stupidtable.dir,e=a.closest("table"),k=a.data("sort")||null;if(null!==k){a.parents("tr").find("th").slice(0,c(this).index()).each(function(){var a=c(this).attr("colspan")||1;g+=parseInt(a,10)});var d;1==arguments.length? - d=b:(d=b||a.data("sort-default")||f.ASC,a.data("sort-dir")&&(d=a.data("sort-dir")===f.ASC?f.DESC:f.ASC));if(a.data("sort-dir")!==d)return a.data("sort-dir",d),e.trigger("beforetablesort",{column:g,direction:d}),e.css("display"),setTimeout(function(){var b=[],l=e.data("sortFns")[k],h=e.children("tbody").children("tr");h.each(function(a,d){var e=c(d).children().eq(g),f=e.data("sort-value");"undefined"===typeof f&&(f=e.text(),e.data("sort-value",f));b.push([f,d])});b.sort(function(a,b){return l(a[0], - b[0])});d!=f.ASC&&b.reverse();h=c.map(b,function(a){return a[1]});e.children("tbody").append(h);e.find("th").data("sort-dir",null).removeClass("sorting-desc sorting-asc");a.data("sort-dir",d).addClass("sorting-"+d);e.trigger("aftertablesort",{column:g,direction:d});e.css("display")},10),a}};c.fn.updateSortVal=function(b){var a=c(this);a.is("[data-sort-value]")&&a.attr("data-sort-value",b);a.data("sort-value",b);return a};c.fn.stupidtable.dir={ASC:"asc",DESC:"desc"};c.fn.stupidtable.default_sort_fns= - {"int":function(b,a){return parseInt(b,10)-parseInt(a,10)},"float":function(b,a){return parseFloat(b)-parseFloat(a)},string:function(b,a){return b.toString().localeCompare(a.toString())},"string-ins":function(b,a){b=b.toString().toLocaleLowerCase();a=a.toString().toLocaleLowerCase();return b.localeCompare(a)}}})(jQuery); +(function($) { + $.fn.stupidtable = function(sortFns) { + return this.each(function() { + var $table = $(this); + sortFns = sortFns || {}; + sortFns = $.extend({}, $.fn.stupidtable.default_sort_fns, sortFns); + $table.data('sortFns', sortFns); + + $table.on("click.stupidtable", "thead th", function() { + $(this).stupidsort(); + }); + + // to show the sort-arrow next to the table header + $table.on("aftertablesort", function (event, data) { + var th = $(this).find("th"); + th.find(".arrow").remove(); + var dir = $.fn.stupidtable.dir; + var arrow = data.direction === dir.ASC ? "down" : "up"; + th.eq(data.column).append(' '); + }); + }); + }; + + + // Expects $("#mytable").stupidtable() to have already been called. + // Call on a table header. + $.fn.stupidsort = function(force_direction){ + var $this_th = $(this); + var th_index = 0; // we'll increment this soon + var dir = $.fn.stupidtable.dir; + var $table = $this_th.closest("table"); + var datatype = $this_th.data("sort") || null; + + // No datatype? Nothing to do. + if (datatype === null) { + return; + } + + // Account for colspans + $this_th.parents("tr").find("th").slice(0, $(this).index()).each(function() { + var cols = $(this).attr("colspan") || 1; + th_index += parseInt(cols,10); + }); + + var sort_dir; + if(arguments.length == 1){ + sort_dir = force_direction; + } + else{ + sort_dir = force_direction || $this_th.data("sort-default") || dir.ASC; + if ($this_th.data("sort-dir")) + sort_dir = $this_th.data("sort-dir") === dir.ASC ? dir.DESC : dir.ASC; + } + + // Bail if already sorted in this direction + if ($this_th.data("sort-dir") === sort_dir) { + return; + } + // Go ahead and set sort-dir. If immediately subsequent calls have same sort-dir they will bail + $this_th.data("sort-dir", sort_dir); + + $table.trigger("beforetablesort", {column: th_index, direction: sort_dir}); + + // More reliable method of forcing a redraw + $table.css("display"); + + // Run sorting asynchronously on a timout to force browser redraw after + // `beforetablesort` callback. Also avoids locking up the browser too much. + setTimeout(function() { + // Gather the elements for this column + var column = []; + var sortFns = $table.data('sortFns'); + var sortMethod = sortFns[datatype]; + var trs = $table.children("tbody").children("tr"); + + // Extract the data for the column that needs to be sorted and pair it up + // with the TR itself into a tuple. This way sorting the values will + // incidentally sort the trs. + trs.each(function(index,tr) { + var $e = $(tr).children().eq(th_index); + var sort_val = $e.data("sort-value"); + + // Store and read from the .data cache for display text only sorts + // instead of looking through the DOM every time + if(typeof(sort_val) === "undefined"){ + var txt = $e.text(); + $e.data('sort-value', txt); + sort_val = txt; + } + column.push([sort_val, tr]); + }); + + // Sort by the data-order-by value + column.sort(function(a, b) { return sortMethod(a[0], b[0]); }); + if (sort_dir != dir.ASC) + column.reverse(); + + // Replace the content of tbody with the sorted rows. Strangely + // enough, .append accomplishes this for us. + trs = $.map(column, function(kv) { return kv[1]; }); + $table.children("tbody").append(trs); + + // Reset siblings + $table.find("th").data("sort-dir", null).removeClass("sorting-desc sorting-asc"); + $this_th.data("sort-dir", sort_dir).addClass("sorting-"+sort_dir); + + $table.trigger("aftertablesort", {column: th_index, direction: sort_dir}); + $table.css("display"); + }, 10); + + return $this_th; + }; + + // Call on a sortable td to update its value in the sort. This should be the + // only mechanism used to update a cell's sort value. If your display value is + // different from your sort value, use jQuery's .text() or .html() to update + // the td contents, Assumes stupidtable has already been called for the table. + $.fn.updateSortVal = function(new_sort_val){ + var $this_td = $(this); + if($this_td.is('[data-sort-value]')){ + // For visual consistency with the .data cache + $this_td.attr('data-sort-value', new_sort_val); + } + $this_td.data("sort-value", new_sort_val); + return $this_td; + }; + + // ------------------------------------------------------------------ + // Default settings + // ------------------------------------------------------------------ + $.fn.stupidtable.dir = {ASC: "asc", DESC: "desc"}; + $.fn.stupidtable.default_sort_fns = { + "int": function(a, b) { + return parseInt(a, 10) - parseInt(b, 10); + }, + "float": function(a, b) { + return parseFloat(a) - parseFloat(b); + }, + "string": function(a, b) { + return a.toString().localeCompare(b.toString()); + }, + "string-ins": function(a, b) { + a = a.toString().toLocaleLowerCase(); + b = b.toString().toLocaleLowerCase(); + return a.localeCompare(b); + }, + "ipv4":function(a,b){ + var aa = a.split("."); + var bb = b.split("."); + + var resulta = aa[0]*0x1000000 + aa[1]*0x10000 + aa[2]*0x100 + aa[3]*1; + var resultb = bb[0]*0x1000000 + bb[1]*0x10000 + bb[2]*0x100 + bb[3]*1; + + return resulta-resultb; + } + }; +})(jQuery); + +document.addEventListener("DOMContentLoaded", function() { + var table = $(".stupidtable"); + if (table.length) { + table = table.stupidtable(); + } +}); \ No newline at end of file diff --git a/modules-available/js_stupidtable/style.css b/modules-available/js_stupidtable/style.css new file mode 100644 index 00000000..614a3d38 --- /dev/null +++ b/modules-available/js_stupidtable/style.css @@ -0,0 +1,3 @@ +th[data-sort] { + cursor: pointer; +} \ No newline at end of file -- cgit v1.2.3-55-g7522