pager ajax works with stickyheaders now

This commit is contained in:
Rob Garrison 2012-03-08 09:10:38 -06:00
parent 16330a28ee
commit 04aacd5449
11 changed files with 91 additions and 17 deletions

View File

@ -42,6 +42,7 @@ View the [complete listing here](http://mottie.github.com/tablesorter/changelog.
* The `sortInitialOrder` will work in either the main options or specifically within the headers option when a particular column needs a different initial sort order.
* Added a [sortReset/sortRestart](http://mottie.github.com/tablesorter/docs/example-option-sortreset-sortrestart.html) demo.
* Resolves [issue #30](https://github.com/Mottie/tablesorter/issues/29).
* Updated pager plugin to better work with the sticky header widget.
#### Version 2.1 (3/7/2012)

View File

@ -24,4 +24,15 @@ div.tablesorterPager input {
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
position: absolute;
z-index: 1000;
}
/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
.pager img.disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);
}

View File

@ -1,6 +1,6 @@
/*
* tablesorter pager plugin
* updated 3/7/2012
* updated 3/8/2012
*/
(function($) {
@ -149,7 +149,9 @@
// process data
if (typeof(c.ajaxProcessing) === "function") {
var result = c.ajaxProcessing(data), d = result[0], l = d.length,
i, k, th = [], tds = '', tf = '';
i, k, th = [], tds = '', tf = '', hsh = $(table).addClass('hasStickyHeaders'),
sh = '.' + ((table.config.widgetOptions && table.config.widgetOptions.stickyHeaders) || 'tablesorter-stickyheader'),
$sh = $t.find(sh);
for ( i=0; i < l; i++ ) {
tds += '<tr>';
for (k in d[i]) {
@ -162,11 +164,17 @@
}
tds += '</tr>';
}
$t.find('thead th').each(function(j){
$t.find('thead tr.tablesorter-header th').each(function(j){
var $t = $(this),
// add new test within the first span it finds, or just in the header
tar = ($t.find('span').length) ? $t.find('span:first') : $t;
$t.html(th[j]);
tar.html(th[j]);
// update sticky headers
if (hsh && $sh.length){
tar = $sh.find('th').eq(j);
tar = (tar.find('span').length) ? tar.find('span:first') : tar;
tar.html(th[j]);
}
tf += '<th>' + th[j] + '</th>';
});
$t.find('tfoot').html('<tr>' + tf + '</tr>');

File diff suppressed because one or more lines are too long

View File

@ -21,7 +21,33 @@
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<style id="css">/*** css used when "updateArrows" option is true ***/
<style id="css">div.tablesorterPager {
padding: 10px 0 10px 0;
background-color: #D6D2C2;
text-align: center;
}
div.tablesorterPager span {
padding: 0 5px 0 5px;
}
div.tablesorterPager input.prev {
width: auto;
margin-right: 10px;
}
div.tablesorterPager input.next {
width: auto;
margin-left: 10px;
}
div.tablesorterPager input {
font-size: 8px;
width: 50px;
border: 1px solid #330000;
text-align: center;
}
#tablesorterPagerLoading {
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
position: absolute;
z-index: 1000;
}/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.pager.disabled {
display: none;

View File

@ -21,7 +21,33 @@
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
<style id="css">/*** css used when "updateArrows" option is true ***/
<style id="css">div.tablesorterPager {
padding: 10px 0 10px 0;
background-color: #D6D2C2;
text-align: center;
}
div.tablesorterPager span {
padding: 0 5px 0 5px;
}
div.tablesorterPager input.prev {
width: auto;
margin-right: 10px;
}
div.tablesorterPager input.next {
width: auto;
margin-left: 10px;
}
div.tablesorterPager input {
font-size: 8px;
width: 50px;
border: 1px solid #330000;
text-align: center;
}
#tablesorterPagerLoading {
background: rgba(255,255,255,0.8) url(icons/loading.gif) center center no-repeat;
position: absolute;
z-index: 1000;
}/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
.pager.disabled {
display: none;

View File

@ -12,7 +12,7 @@
<!-- Pick a theme, load the plugin & initialize plugin -->
<link href="css/blue/style.css" rel="stylesheet">
<script src="js/jquery.tablesorter.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<script src="js/jquery.tablesorter.widgets.js"></script>
<script>
$(function(){
@ -34,7 +34,7 @@
<table class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric Sort *New*</th>
<th>AlphaNumeric Sort</th>
<th>Currency</th>
<th>Alphabetical</th>
<th>Sites</th>

View File

@ -363,6 +363,7 @@
}
// add cell to headerList
c.headerList[index] = this;
$(this).parent().addClass('tablesorter-header');
});
if (c.debug) {
benchmark("Built headers", time);

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
/* TableSorter 2.1 Widgets - updated 3/7/2012
/* TableSorter 2.1 Widgets - updated 3/8/2012
*
* jQuery UI Theme
* Column Styles
@ -226,7 +226,8 @@ $.tablesorter.addWidget({
css = wo.stickyHeaders || 'tablesorter-stickyheader',
firstCell = hdrCells.eq(0),
brdr = parseInt(hdrCells.eq(0).css('border-left-width'),10),
sticky = header.find('tr:not(.' + (wo.filter_cssFilter || 'tablesorter-filter') + ')').clone()
sticky = header.find('tr.tablesorter-header').clone()
.removeClass('tablesorter-header')
.addClass(css)
.css({
width : header.outerWidth() + brdr * 2,
@ -239,7 +240,7 @@ $.tablesorter.addWidget({
}),
stkyCells = sticky.children(),
laststate;
// update sticky header class names to match real header
// update sticky header class names to match real header after sorting
$table.bind('sortEnd', function(e,t){
var th = $(t).find('thead tr'),
sh = th.filter('.' + css).children();

View File

@ -1,11 +1,11 @@
/* TableSorter 2.1 Widgets - updated 3/7/2012 */
/* TableSorter 2.1 Widgets - updated 3/8/2012 */
(function(b){
b.tablesorter.storage=function(a,e,c){var d,g=!1;d={};var a=a.id||b(".tablesorter").index(b(a)),f=window.location.pathname;try{g=!!localStorage.getItem}catch(j){}c?(d[f]={},d[f][a]={},d[f][a]=c,g?localStorage[e]=JSON.stringify(d):(c=new Date,c.setTime(c.getTime()+31536E6),document.cookie=e+"="+JSON.stringify(d).replace(/\"/g,'"')+"; expires="+c.toGMTString()+"; path=/")):g?d=b.parseJSON(localStorage[e])||{}:(d=document.cookie.split(/[;\s|=]/),c=b.inArray(e,d)+1,d=0!==c?b.parseJSON(d[c])|| {}:{});return d&&d.hasOwnProperty(f)&&d[f].hasOwnProperty(a)?d[f][a]:{}};
b.tablesorter.addWidget({id:"uitheme",format:function(a){var e,c,d,g,f,j=b(a),i=a.config,h=i.widgetOptions,k=["ui-icon-arrowthick-2-n-s","ui-icon-arrowthick-1-s","ui-icon-arrowthick-1-n"],k=i.widgetUitheme&&i.widgetUitheme.hasOwnProperty("css")?i.widgetUitheme.css||k:h&&h.hasOwnProperty("uitheme")?h.uitheme:k;d=k.join(" ");i.debug&&(e=new Date);j.hasClass("ui-theme")||(j.addClass("ui-widget ui-widget-content ui-corner-all ui-theme"), b.each(i.headerList,function(){b(this).addClass("ui-widget-header ui-corner-all ui-state-default").append('<span class="ui-icon"/>').wrapInner('<div class="tablesorter-inner"/>').hover(function(){b(this).addClass("ui-state-hover")},function(){b(this).removeClass("ui-state-hover")})}));b.each(i.headerList,function(a){g=b(this);if(this.sortDisabled)g.find("span.ui-icon").removeClass(d+" ui-icon");else{c=g.hasClass(i.cssAsc)?k[1]:g.hasClass(i.cssDesc)?k[2]:g.hasClass(i.cssHeader)?k[0]:"";f=j.hasClass("hasStickyHeaders")? j.find("tr."+h.stickyHeaders||"tablesorter-stickyheader").find("th").eq(a).add(g):g;f[c===k[0]?"removeClass":"addClass"]("ui-state-active").find("span.ui-icon").removeClass(d).addClass(c)}});i.debug&&b.tablesorter.benchmark("Applying uitheme widget",e)}});
b.tablesorter.addWidget({id:"columns",format:function(a){var e,c,d,g,f=a.config,j=f.sortList,i=j.length,h=["primary","secondary","tertiary"],h=f.widgetColumns&&f.widgetColumns.hasOwnProperty("css")?f.widgetColumns.css||h:f.widgetOptions&&f.widgetOptions.hasOwnProperty("columns")? f.widgetOptions.columns||h:h;d=h.length-1;g=h.join(" ");f.debug&&(c=new Date);j&&j[0]?b("tr:visible",a.tBodies[0]).each(function(a){e=b(this).children().removeClass(g);e.eq(j[0][0]).addClass(h[0]);if(1<i)for(a=1;a<i;a++)e.eq(j[a][0]).addClass(h[a]||h[d])}):b("td",a.tBodies[0]).removeClass(g);f.debug&&b.tablesorter.benchmark("Applying Columns widget",c)}});
b.tablesorter.addWidget({id:"filter",format:function(a){if(!b(a).hasClass("hasFilters")){var e,c,d,g,f,j,i,h=a.config,k=h.widgetOptions,l=k.filter_cssFilter|| "tablesorter-filter",m=h.headerList.length,n=b(a).addClass("hasFilters"),a='<tr class="'+l+'">',o;h.debug&&(o=new Date);for(e=0;e<m;e++)a+='<td><input type="search" data-col="'+e+'" class="'+l,a+=h.headers[e]&&h.headers[e].hasOwnProperty("filter")&&!1===h.headers[e].filter||b(h.headerList[e]).is(".filter-false")?' disabled" disabled':'"',a+="></td>";n.find("thead").append(a+="</tr>").find("input."+l).bind("keyup search",function(){c=n.find("thead").find("input."+l).map(function(){return(b(this).val()|| "").toLowerCase()}).get();""===c.join("")?n.find("tr").show():n.find("tbody").find("tr:not(."+h.cssChildRow+")").each(function(){d=!0;j=b(this).nextUntil("tr:not(."+h.cssChildRow+")");g=j.length&&(k&&k.hasOwnProperty("filter_childRows")&&"undefined"!==typeof k.filter_childRows?k.filter_childRows:1)?j.text():"";i=b(this).find("td");for(e=0;e<m;e++)f=(i.eq(e).text()+g).toLowerCase().indexOf(c[e]),""!==c[e]&&(!k.filter_startsWith&&0<=f||k.filter_startsWith&&0===f)?d=d?!0:!1:""!==c[e]&&(d=!1);b(this)[d? "show":"hide"]();if(j.length)j[d?"show":"hide"]()});n.trigger("applyWidgets")});h.debug&&b.tablesorter.benchmark("Applying Filter widget",o)}}});
b.tablesorter.addWidget({id:"stickyHeaders",format:function(a){if(!b(a).hasClass("hasStickyHeaders")){var e=b(a).addClass("hasStickyHeaders"),c=a.config.widgetOptions,d=b(window),g=b(a).find("thead"),f=g.find("tr").children(),j=c.stickyHeaders||"tablesorter-stickyheader",i=f.eq(0),h=parseInt(f.eq(0).css("border-left-width"),10),k=g.find("tr:not(."+(c.filter_cssFilter|| "tablesorter-filter")+")").clone().addClass(j).css({width:g.outerWidth()+2*h,position:"fixed",left:i.offset().left,marginLeft:-h,top:0,visibility:"hidden",zIndex:10}),l=k.children(),m;e.bind("sortEnd",function(a,c){var d=b(c).find("thead tr"),e=d.filter("."+j).children();d.filter(":not(."+j+")").children().each(function(a){e.eq(a).attr("class",b(this).attr("class"))})}).bind("pagerComplete",function(){d.resize()});f.each(function(a){var c=b(this);l.eq(a).width(c.width()).bind("click",function(a){c.trigger(a)}).bind("mousedown", function(){this.onselectstart=function(){return!1};return!1})});g.prepend(k);d.scroll(function(){var a=i.offset(),b=d.scrollTop(),b=b>a.top&&b<a.top+e.find("tbody").height()?"visible":"hidden";k.css({left:a.left-d.scrollLeft(),visibility:b});b!==m&&(d.resize(),m=b)}).resize(function(){k.css({left:i.offset().left-d.scrollLeft(),width:g.outerWidth()+2*h});l.each(function(a){b(this).width(f.eq(a).width())})})}}});
b.tablesorter.addWidget({id:"resizable",format:function(a){if(!b(a).hasClass("hasResizable")){b(a).addClass("hasResizable"); var e,c,d=a.config,g=b(d.headerList).filter(":gt(0)"),f=0,j=null,i=null,h=function(){f=0;j=i=null;b(window).trigger("resize")};if(c=b.tablesorter.storage?b.tablesorter.storage(a,"tablesorter-resizable"):"")for(e in c)!isNaN(e)&&e<d.headerList.length&&b(d.headerList[e]).width(c[e]);g.each(function(){b(this).append('<div class="tablesorter-resizer" style="cursor:w-resize;position:absolute;height:100%;width:20px;left:-20px;top:0;z-index:1;"></div>').wrapInner('<div style="position:relative;height:100%;width:100%"></div>')}).bind("mousemove", function(a){if(0!==f&&j){var b=a.pageX-f;j.width()<-b||i&&i.width()<=b||(i.width(i.width()+b),f=a.pageX)}}).bind("mouseup",function(){c&&b.tablesorter.storage&&j&&(c[i.index()]=i.width(),b.tablesorter.storage(a,"tablesorter-resizable",c));h();return!1}).find(".tablesorter-resizer").bind("mousedown",function(a){j=b(a.target).closest("th");i=j.prev();f=a.pageX});b(a).find("thead").bind("mouseup mouseleave",function(){h()})}}});
b.tablesorter.addWidget({id:"stickyHeaders",format:function(a){if(!b(a).hasClass("hasStickyHeaders")){var e=b(a).addClass("hasStickyHeaders"),c=a.config.widgetOptions,d=b(window),g=b(a).find("thead"),f=g.find("tr").children(),j=c.stickyHeaders||"tablesorter-stickyheader",i=f.eq(0),h=parseInt(f.eq(0).css("border-left-width"),10),k=g.find("tr.tablesorter-header").clone().removeClass("tablesorter-header").addClass(j).css({width:g.outerWidth()+ 2*h,position:"fixed",left:i.offset().left,marginLeft:-h,top:0,visibility:"hidden",zIndex:10}),l=k.children(),m;e.bind("sortEnd",function(a,c){var d=b(c).find("thead tr"),e=d.filter("."+j).children();d.filter(":not(."+j+")").children().each(function(a){e.eq(a).attr("class",b(this).attr("class"))})}).bind("pagerComplete",function(){d.resize()});f.each(function(a){var c=b(this);l.eq(a).width(c.width()).bind("click",function(a){c.trigger(a)}).bind("mousedown",function(){this.onselectstart=function(){return!1}; return!1})});g.prepend(k);d.scroll(function(){var a=i.offset(),b=d.scrollTop(),b=b>a.top&&b<a.top+e.find("tbody").height()?"visible":"hidden";k.css({left:a.left-d.scrollLeft(),visibility:b});b!==m&&(d.resize(),m=b)}).resize(function(){k.css({left:i.offset().left-d.scrollLeft(),width:g.outerWidth()+2*h});l.each(function(a){b(this).width(f.eq(a).width())})})}}});
b.tablesorter.addWidget({id:"resizable",format:function(a){if(!b(a).hasClass("hasResizable")){b(a).addClass("hasResizable");var e,c,d=a.config, g=b(d.headerList).filter(":gt(0)"),f=0,j=null,i=null,h=function(){f=0;j=i=null;b(window).trigger("resize")};if(c=b.tablesorter.storage?b.tablesorter.storage(a,"tablesorter-resizable"):"")for(e in c)!isNaN(e)&&e<d.headerList.length&&b(d.headerList[e]).width(c[e]);g.each(function(){b(this).append('<div class="tablesorter-resizer" style="cursor:w-resize;position:absolute;height:100%;width:20px;left:-20px;top:0;z-index:1;"></div>').wrapInner('<div style="position:relative;height:100%;width:100%"></div>')}).bind("mousemove", function(a){if(0!==f&&j){var b=a.pageX-f;j.width()<-b||i&&i.width()<=b||(i.width(i.width()+b),f=a.pageX)}}).bind("mouseup",function(){c&&b.tablesorter.storage&&j&&(c[i.index()]=i.width(),b.tablesorter.storage(a,"tablesorter-resizable",c));h();return!1}).find(".tablesorter-resizer").bind("mousedown",function(a){j=b(a.target).closest("th");i=j.prev();f=a.pageX});b(a).find("thead").bind("mouseup mouseleave",function(){h()})}}});
b.tablesorter.addWidget({id:"saveSort",init:function(a,b,c){c.format(a,!0)}, format:function(a,e){var c,d,g=a.config;c={sortList:g.sortList};g.debug&&(d=new Date);b(a).hasClass("hasSaveSort")?a.hasInitialized&&b.tablesorter.storage&&(b.tablesorter.storage(a,"tablesorter-savesort",c),g.debug&&b.tablesorter.benchmark("saveSort widget: Saving last sort: "+g.sortList,d)):(b(a).addClass("hasSaveSort"),c="",b.tablesorter.storage&&(c=(c=b.tablesorter.storage(a,"tablesorter-savesort"))&&c.hasOwnProperty("sortList")&&b.isArray(c.sortList)?c.sortList:"",g.debug&&b.tablesorter.benchmark("saveSort: Last sort loaded: "+ c,d)),e&&c&&0<c.length?g.sortList=c:a.hasInitialized&&c&&0<c.length&&b(a).trigger("sorton",[c]))}})
})(jQuery);