org.wicketstuff.datatables.media.js.FixedColumns.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of datatables Show documentation
Show all versions of datatables Show documentation
DataTables jQuery integration for Wicket
The newest version!
/*
* File: FixedColumns.js
* Version: 1.0.2
* Description: "Fix" columns on the left of a scrolling DataTable
* Author: Allan Jardine (www.sprymedia.co.uk)
* Created: Sat Sep 18 09:28:54 BST 2010
* Language: Javascript
* License: GPL v2 or BSD 3 point style
* Project: Just a little bit of fun - enjoy :-)
* Contact: www.sprymedia.co.uk/contact
*
* Copyright 2010 Allan Jardine, all rights reserved.
*/
var FixedColumns = function ( oDT, oInit ) {
/* Sanity check - you just know it will happen */
if ( typeof this._fnConstruct != 'function' )
{
alert( "FixedColumns warning: FixedColumns must be initialised with the 'new' keyword." );
return;
}
if ( typeof oInit == 'undefined' )
{
oInit = {};
}
/**
* @namespace Settings object which contains customisable information for FixedColumns instance
*/
this.s = {
/**
* DataTables settings objects
* @property dt
* @type object
* @default null
*/
"dt": oDT.fnSettings(),
/**
* Number of columns to fix in position
* @property columns
* @type int
* @default 1
*/
"columns": 1
};
/**
* @namespace Common and useful DOM elements for the class instance
*/
this.dom = {
/**
* DataTables scrolling element
* @property scroller
* @type node
* @default null
*/
"scroller": null,
/**
* DataTables header table
* @property header
* @type node
* @default null
*/
"header": null,
/**
* DataTables body table
* @property body
* @type node
* @default null
*/
"body": null,
/**
* DataTables footer table
* @property footer
* @type node
* @default null
*/
"footer": null,
/**
* @namespace Cloned table nodes
*/
"clone": {
/**
* Cloned header table
* @property header
* @type node
* @default null
*/
"header": null,
/**
* Cloned body table
* @property body
* @type node
* @default null
*/
"body": null,
/**
* Cloned footer table
* @property footer
* @type node
* @default null
*/
"footer": null
}
};
/* Let's do it */
this._fnConstruct( oInit );
};
FixedColumns.prototype = {
/**
* Initialisation for FixedColumns
* @method _fnConstruct
* @param {Object} oInit User settings for initialisation
* @returns void
*/
"_fnConstruct": function ( oInit )
{
var that = this;
/* Sanity checking */
if ( typeof this.s.dt.oInstance.fnVersionCheck != 'function' ||
this.s.dt.oInstance.fnVersionCheck( '1.7.0' ) !== true )
{
alert( "FixedColumns 2 required DataTables 1.7.0 or later. "+
"Please upgrade your DataTables installation" );
return;
}
if ( this.s.dt.oScroll.sX === "" )
{
this.s.dt.oInstance.oApi._fnLog( this.s.dt, 1, "FixedColumns is not needed (no "+
"x-scrolling in DataTables enabled), so no action will be taken. Use 'FixedHeader' for "+
"column fixing when scrolling is not enabled" );
return;
}
if ( typeof oInit.columns != 'undefined' )
{
if ( oInit.columns < 1 )
{
this.s.dt.oInstance.oApi._fnLog( this.s.dt, 1, "FixedColumns is not needed (no "+
"columns to be fixed), so no action will be taken" );
return;
}
this.s.columns = oInit.columns;
}
/* Set up the DOM as we need it and cache nodes */
this.dom.body = this.s.dt.nTable;
this.dom.scroller = this.dom.body.parentNode;
this.dom.scroller.style.position = "relative";
this.dom.header = this.s.dt.nTHead.parentNode;
this.dom.header.parentNode.parentNode.style.position = "relative";
if ( this.s.dt.nTFoot )
{
this.dom.footer = this.s.dt.nTFoot.parentNode;
this.dom.footer.parentNode.parentNode.style.position = "relative";
}
/* Event handlers */
$(this.dom.scroller).scroll( function () {
that._fnScroll.call( that );
} );
this.s.dt.aoDrawCallback.push( {
"fn": function () {
that._fnClone.call( that );
that._fnScroll.call( that );
},
"sName": "FixedColumns"
} );
/* Get things right to start with */
this._fnClone();
this._fnScroll();
},
/**
* Clone the DataTable nodes and place them in the DOM (sized correctly)
* @method _fnClone
* @returns void
* @private
*/
"_fnClone": function ()
{
var
that = this,
iTableWidth = 0,
aiCellWidth = [],
i, iLen, jq,
bRubbishOldIE = ($.browser.msie && ($.browser.version == "6.0" || $.browser.version == "7.0"));
/* Grab the widths that we are going to need */
for ( i=0, iLen=this.s.columns ; i 0 )
{
this.dom.clone.body = $(this.dom.body).clone(true)[0];
this.dom.clone.body.className += " FixedColumns_Cloned";
if ( this.dom.clone.body.getAttribute('id') !== null )
{
this.dom.clone.body.removeAttribute('id');
}
$('thead tr:eq(0)', this.dom.clone.body).each( function () {
$('th:gt('+(that.s.columns-1)+')', this).remove();
} );
$('thead tr:gt(0)', this.dom.clone.body).remove();
var jqBoxHack = $('tbody tr:eq(0) td:eq(0)', that.dom.body);
var iBoxHack = jqBoxHack.outerHeight() - jqBoxHack.height();
/* Remove cells which are not needed and copy the height from the original table */
$('tbody tr', this.dom.clone.body).each( function (k) {
$('td:gt('+(that.s.columns-1)+')', this).remove();
/* Can we use some kind of object detection here?! This is very nasty - damn browsers */
if ( $.browser.mozilla || $.browser.opera )
{
$('td', this).height( $('tbody tr:eq('+k+')', that.dom.body).outerHeight() );
}
else
{
$('td', this).height( $('tbody tr:eq('+k+')', that.dom.body).outerHeight() - iBoxHack );
}
/* It's only really IE8 and Firefox which need this, but to simplify, lets apply to all.
* The reason it is needed at all is sub-pixel rounded, which is done differently in every
* browser... Except of course IE6 and IE7 - applying the height to them causes the cell
* size to grow, but they don't mess around with sub-pixels so we can do nothing.
*/
if ( !bRubbishOldIE )
{
$('tbody tr:eq('+k+')', that.dom.body).height( $('tbody tr:eq('+k+')', that.dom.body).outerHeight() );
}
} );
$('tfoot tr:eq(0)', this.dom.clone.body).each( function () {
$('th:gt('+(that.s.columns-1)+')', this).remove();
} );
$('tfoot tr:gt(0)', this.dom.clone.body).remove();
this.dom.clone.body.style.position = "absolute";
this.dom.clone.body.style.top = "0px";
this.dom.clone.body.style.left = "0px";
this.dom.clone.body.style.width = iTableWidth+"px";
this.dom.body.parentNode.appendChild( this.dom.clone.body );
}
/* Footer */
if ( this.s.dt.nTFoot !== null )
{
if ( this.dom.clone.footer !== null )
{
this.dom.clone.footer.parentNode.removeChild( this.dom.clone.footer );
}
this.dom.clone.footer = $(this.dom.footer).clone(true)[0];
this.dom.clone.footer.className += " FixedColumns_Cloned";
$('tfoot tr:eq(0)', this.dom.clone.footer).each( function () {
$('th:gt('+(that.s.columns-1)+')', this).remove();
$(this).height( $(that.dom.footer).height() );
} );
$('tr', this.dom.clone.footer).height( $(that.dom.footer).height() );
$('tfoot tr:gt(0)', this.dom.clone.footer).remove();
$('tfoot th', this.dom.clone.footer).each( function (i) {
this.style.width = aiCellWidth[i]+"px";
} );
this.dom.clone.footer.style.position = "absolute";
this.dom.clone.footer.style.top = "0px";
this.dom.clone.footer.style.left = "0px";
this.dom.clone.footer.style.width = iTableWidth+"px";
this.dom.footer.parentNode.appendChild( this.dom.clone.footer );
}
},
/**
* Set the absolute position of the fixed column tables when scrolling the DataTable
* @method _fnScroll
* @returns void
* @private
*/
"_fnScroll": function ()
{
var iScrollLeft = $(this.dom.scroller).scrollLeft();
this.dom.clone.header.style.left = iScrollLeft+"px";
if ( this.dom.clone.body !== null )
{
this.dom.clone.body.style.left = iScrollLeft+"px";
}
if ( this.dom.footer )
{
this.dom.clone.footer.style.left = iScrollLeft+"px";
}
}
};
© 2015 - 2025 Weber Informatics LLC | Privacy Policy