mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-10-08 13:44:18 +00:00
75 lines
4.0 KiB
JavaScript
75 lines
4.0 KiB
JavaScript
/* 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 <b> 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='<b class="'+e.selectorRemove.slice(1)+" "+f.reflow2_labelClass,e.$tbodies.children().each(function(){h=b.processTbody(d,a(this),!0),h.children().each(function(b){for(g=a(this),l=o[b].length,i=l-1;i>=0;)g.prepend(k+(0===i&&l>1?" "+f.reflow2_labelTop:"")+'">'+o[b][i]+"</b>"),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); |