/* 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($){ 'use strict'; var ts = $.tablesorter, tablereflow = { // 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(table, c, wo) { var $this, title = wo.reflow_dataAttrib, header = wo.reflow_headerAttrib, headers = []; c.$table .addClass(wo.reflow_className) .off('refresh.tsreflow updateComplete.tsreflow2') // emulate jQuery Mobile refresh // https://api.jquerymobile.com/table-reflow/#method-refresh .on('refresh.tsreflow updateComplete.tsreflow2', function(){ tablereflow.init(table, c, wo); }); c.$headers.each(function(){ $this = $(this); headers.push( $.trim( $this.attr(header) || $this.text() ) ); }); c.$tbodies.children().each(function(){ $(this).children().each(function(i){ $(this).attr(title, headers[i]); }); }); }, init2: function(table, c, wo) { var $this, $tbody, i, $hdr, txt, len, cols = c.columns, header = wo.reflow2_headerAttrib, headers = []; c.$table .addClass(wo.reflow2_className) .off('refresh.tsreflow2 updateComplete.tsreflow2') // emulate jQuery Mobile refresh // https://api.jquerymobile.com/table-reflow/#method-refresh .on('refresh.tsreflow2 updateComplete.tsreflow2', function(){ tablereflow.init2(table, c, wo); }); // add to every table cell with thead cell contents for (i = 0; i < cols; i++) { $hdr = c.$headers.filter('[data-column="' + i + '"]'); if ($hdr.length > 1) { txt = []; /*jshint loopfunc:true */ $hdr.each(function(){ $this = $(this); if (!$this.hasClass(wo.reflow2_classIgnore)) { txt.push( $this.attr(header) || $this.text() ); } }); } else { txt = [ $hdr.attr(header) || $hdr.text() ]; } headers.push( txt ); } // include 'remove-me' class so these additional elements are removed before updating txt = '' + headers[j][i] + ''); i--; } }); ts.processTbody(table, $tbody, false); }); }, remove : function(table, c, wo) { c.$table.removeClass(wo.reflow_className); }, remove2 : function(table, c, wo) { c.$table.removeClass(wo.reflow2_className); } }; ts.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(table, thisWidget, c, wo) { tablereflow.init(table, c, wo); }, remove: function(table, c, wo){ tablereflow.remove(table, c, wo); } }); ts.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(table, thisWidget, c, wo) { tablereflow.init2(table, c, wo); }, remove: function(table, c, wo){ tablereflow.remove2(table, c, wo); } }); })(jQuery);