tablesorter/js/widgets/widget-reflow.js

/* table reflow widget for TableSorter 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 <b> 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 = '<b class="' + c.selectorRemove.slice(1) + ' ' + wo.reflow2_labelClass;
		c.$tbodies.children().each(function(){
			$tbody = ts.processTbody(table, $(this), true);
			$tbody.children().each(function(j){
				$this = $(this);
				len = headers[j].length;
				i = len - 1;
				while (i >= 0) {
					$this.prepend(txt + (i === 0 && len > 1 ? ' ' + wo.reflow2_labelTop : '') + '">' + headers[j][i] + '</b>');
					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);