Skip to main content

Bug Tracker

Side navigation

#981 closed enhancement (invalid)

Opened February 20, 2007 04:56AM UTC

Closed October 12, 2009 11:22PM UTC

Last modified March 15, 2012 04:33PM UTC

[PATCH] Enable tbody scrolling on tables with tablesorter

Reported by: s0undt3ch Owned by:
Priority: major Milestone: 1.1.3
Component: plugin Version: 1.1.1
Keywords: tablesorter Cc:
Blocked by: Blocking:
Description

Here's a patch that enables scrolling the table's tbody for both IE and Firefox, others are still left out because other hacks are needed.

Attachments (1)
Change History (3)

Changed February 20, 2007 05:01AM UTC by john comment:1

description: Here's a patch that enables scrolling the table's `tbody` for both IE and Firefox, others are still left out because other hacks are needed.\ {{{\ #!diff\ --- jquery.tablesorter.js.svn 2007-02-20 04:34:25.000000000 +0000\ +++ jquery.tablesorter.js 2007-02-20 04:48:39.000000000 +0000\ @@ -1,4 +1,4 @@\ -/*\ +/* vim: sts=4:ts=4:sw=4:noet:fenc=utf-8\ *\ * TableSorter - Client-side table sorting with ease!\ *\ @@ -33,8 +33,12 @@\ bind: true,\ addHeaderLink: false,\ lockedSortDir: false,\ + minToScroll: false,\ dateFormat: 'mm/dd/yyyy' /** us default, uk dd/mm/yyyy */\ };\ +\ + var ieDivID = 0;\ + var enableScrollHasRun = false;\ \ return this.each(function(){\ /** add a class name for identifiying the table for companion plugins */\ @@ -58,6 +62,70 @@\ /** table object holder.*/\ var oTable = this;\ \ + function enableScroll() {\ + if ( defaults.minToScroll ) {\ + if ( jQuery.browser.mozilla ) { if (enableScrollHasRun) { return; }; mozScroll(); };\ + if ( jQuery.browser.msie ) { ieScroll() };\ + };\ + enableScrollHasRun = true;\ + };\ +\ + function mozScroll() {\ + for (i=0; i < oTable.tBodies.length; i++) {\ + finalSetup = false;\ + var rows = oTable.tBodies[i].rows;\ + if (rows.length > defaults.minToScroll) {\ + finalSetup = true;\ + var lastChilds = jQuery(oTable.tBodies[i]).find('td:last-child');\ + jQuery(lastChilds).css('padding-right', '16px');\ + var rows_height = jQuery(rows).height();\ + if ( rows_height == 0 ) { rows_height = 32; };\ + var tbody_height = (rows_height * defaults.minToScroll) + 'px';\ + jQuery(oTable.tBodies[i]).css({ overflow: 'auto', overflowX: 'hidden', height: tbody_height });\ + };\ + if (finalSetup) { jQuery(oTable).css('border-collapse', 'separate'); };\ + };\ + };\ +\ + function ieScroll () {\ + var rows = 0;\ + for ( i=0; i < oTable.tBodies.length; i++) {\ + rows += oTable.tBodies[i].rows.length;\ + };\ + var tDivID = 'scrollWrapper-';\ + var scrollTop_ = 0;\ + if (rows > defaults.minToScroll) {\ + var createDiv = true;\ + var div_id = tDivID + ieDivID;\ + if ( jQuery(oTable).parent().is('div') && jQuery(oTable).parent().attr('id') == tDivID + (ieDivID-1) ) {\ + createDiv = false;\ + scrollTop_ = oTable.parentNode.scrollTop\ + };\ + if ( createDiv ) { jQuery(oTable).wrap('<div id="' + div_id + '"></div>'); };\ + jQuery(oTable).css({\ + margin: '0px', marginRight: '22px', top: '0px', left: '0px'\ + });\ + jQuery(oTable.tHead).css('position', 'relative');\ + jQuery(oTable.tHead.rows).css({\ + top: '0px', bottom: '0px', position: 'relative'\ + });\ + var rows_height = jQuery(oTable.tBodies[0].rows).height();\ + if ( rows_height == 0 ) { rows_height = 32; };\ + var div_height = (rows_height * defaults.minToScroll) + 'px';\ + jQuery('#'+div_id).css({\ + width: '100%', overflow: 'auto', overflowX: 'hidden', height: div_height\ + });\ + oTable.parentNode.scrollTop = scrollTop_;\ + jQuery(oTable.tHead.rows).css('top', scrollTop_ + 'px');\ + if ( createDiv ) { ieDivID++; };\ + var div_width = jQuery('#'+div_id).width();\ + var table_width = (div_width-18)*100/div_width;\ + jQuery(oTable).css('width', table_width+'%');\ + };\ + return;\ + };\ +\ +\ if(defaults.stripeRowsOnStartUp && defaults.stripingRowClass) {\ jQuery.tableSorter.utils.stripeRows(oTable,defaults);\ }\ @@ -132,11 +200,13 @@\ \ jQuery(".sorter",oCell).click(function(e) {\ sortOnColumn( jQuery(this).parent(), ((defaults.lockedSortDir) ? defaults.lockedSortDir : jQuery(this).parent()+ enableScroll()\ return false;\ });\ } else {\ jQuery(oCell).click(function(e) {\ sortOnColumn( jQuery(this), ((defaults.lockedSortDir) ? defaults.lockedSortDir : jQuery(this)[0].count++) % 2,\ + enableScroll()\ return false;\ });\ }\ @@ -254,6 +324,7 @@\ jQuery.event.trigger("sortStop",[COLUMN_INDEX]);\ }\ COLUMN_LAST_INDEX = COLUMN_INDEX;\ + enableScroll();\ }\ }\ });\ }}}Here's a patch that enables scrolling the table's `tbody` for both IE and Firefox, others are still left out because other hacks are needed.

Changed February 21, 2007 04:25AM UTC by s0undt3ch comment:2

This ticket can be closed because a solution has been made as an extra plugin, thus enabling scrolling for any tables including those that are sorted by [source:trunk/plugins/tablesorter/jquery.tablesorter.js tableSorter].

It works for Firefox and IE like the patch but makes less assumptions about hardcoded widths of scrollbars, etc.

Here's the source and here's the demo.

Changed October 12, 2009 11:22PM UTC by dmethvin comment:3

need: → Review
resolution: → invalid
status: newclosed

This is not a jQuery core bug. Please report plugin bugs to the plugin's author, or ask on the jQuery forums. jQuery UI bugs should be reported on the UI bug tracker, http://dev.jqueryui.com .