/* Widget: reflow - updated 2/7/2015 (v2.19.0) */ /* * Requires tablesorter v2.8+ and jQuery 1.7+ * Also, this widget requires the following default css (modify as desired) / * REQUIRED CSS: change your reflow breakpoint here (35em below) * / @media ( max-width: 35em ) { .ui-table-reflow td, .ui-table-reflow th { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: right; / * if not using the stickyHeaders widget (not the css3 version) * the "!important" flag, and "height: auto" can be removed * / width: 100% !important; height: auto !important; } / * reflow widget * / .ui-table-reflow tbody td[data-title]:before { color: #469; font-size: .9em; content: attr(data-title); float: left; width: 50%; white-space: pre-wrap; text-align: bottom; display: inline-block; } / * reflow2 widget * / table.ui-table-reflow .ui-table-cell-label.ui-table-cell-label-top { display: block; padding: .4em 0; margin: .4em 0; text-transform: uppercase; font-size: .9em; font-weight: 400; } table.ui-table-reflow .ui-table-cell-label { padding: .4em; min-width: 30%; display: inline-block; margin: -.4em 1em -.4em -.4em; } } .ui-table-reflow .ui-table-cell-label { display: none; } */ /*jshint browser:true, jquery:true, unused:false */ /*global jQuery: false */ !function(a){"use strict";var b=a.tablesorter,c={ // simple reflow // add data-attribute to each cell which shows when media query is active // this widget DOES NOT WORK on a table with multiple thead rows init:function(b,d,e){var f,g=e.reflow_dataAttrib,h=e.reflow_headerAttrib,i=[];d.$table.addClass(e.reflow_className).off("refresh.tsreflow updateComplete.tsreflow2").on("refresh.tsreflow updateComplete.tsreflow2",function(){c.init(b,d,e)}),d.$headers.each(function(){f=a(this),i.push(a.trim(f.attr(h)||f.text()))}),d.$tbodies.children().each(function(){a(this).children().each(function(b){a(this).attr(g,i[b])})})},init2:function(d,e,f){var g,h,i,j,k,l,m=e.columns,n=f.reflow2_headerAttrib,o=[]; // add to every table cell with thead cell contents for(e.$table.addClass(f.reflow2_className).off("refresh.tsreflow2 updateComplete.tsreflow2").on("refresh.tsreflow2 updateComplete.tsreflow2",function(){c.init2(d,e,f)}),i=0;m>i;i++)j=e.$headers.filter('[data-column="'+i+'"]'),j.length>1?(k=[],j.each(function(){g=a(this),g.hasClass(f.reflow2_classIgnore)||k.push(g.attr(n)||g.text())})):k=[j.attr(n)||j.text()],o.push(k);k='=0;)g.prepend(k+(0===i&&l>1?" "+f.reflow2_labelTop:"")+'">'+o[b][i]+""),i--}),b.processTbody(d,h,!1)})},remove:function(a,b,c){b.$table.removeClass(c.reflow_className)},remove2:function(a,b,c){b.$table.removeClass(c.reflow2_className)}};b.addWidget({id:"reflow",options:{ // class name added to make it responsive (class name within media query) reflow_className:"ui-table-reflow", // header attribute containing modified header name reflow_headerAttrib:"data-name", // data attribute added to each tbody cell reflow_dataAttrib:"data-title"},init:function(a,b,d,e){c.init(a,d,e)},remove:function(a,b,d){c.remove(a,b,d)}}),b.addWidget({id:"reflow2",options:{ // class name added to make it responsive (class name within media query) reflow2_className:"ui-table-reflow", // ignore header cell content with this class name reflow2_classIgnore:"ui-table-reflow-ignore", // header attribute containing modified header name reflow2_headerAttrib:"data-name", // class name applied to thead labels reflow2_labelClass:"ui-table-cell-label", // class name applied to first row thead label reflow2_labelTop:"ui-table-cell-label-top"},init:function(a,b,d,e){c.init2(a,d,e)},remove:function(a,b,d){c.remove2(a,b,d)}})}(jQuery);