From 5ae658f2a068daa3052c81ec2447ca6b2214be43 Mon Sep 17 00:00:00 2001 From: Kyle Smith Date: Wed, 2 Nov 2011 09:57:16 -0400 Subject: [PATCH 1/2] Modified column exclusion array (amExclude) to match to mDataProp value of each column. This will allow you to match to either the column index or an mDataProp value. Update documentation for amExclude and bShowAll options. --- exclude_columns.html | 10 +++++----- media/js/ColVis.js | 43 +++++++++++++++++++++++++------------------ style.html | 2 +- 3 files changed, 31 insertions(+), 24 deletions(-) mode change 100755 => 100644 exclude_columns.html mode change 100755 => 100644 media/js/ColVis.js mode change 100755 => 100644 style.html diff --git a/exclude_columns.html b/exclude_columns.html old mode 100755 new mode 100644 index bf6756c..8a2fc62 --- a/exclude_columns.html +++ b/exclude_columns.html @@ -18,7 +18,7 @@ $('#example').dataTable( { "sDom": 'C<"clear">lfrtip', "oColVis": { - "aiExclude": [ 0 ] + "amExclude": [ 0 ] } } ); } ); @@ -33,9 +33,9 @@

Preamble

It can at times be useful to exclude columns from being in the 'show / hide' list (for example if you have hidden information that the end user shouldn't be able to make - visible. This can be done by the oColVis.aiExclude initialisation parameter when creating - the DataTable. This is simply an array of integers, indicating which columns should - be excluded. This example shows the first column being excluded.

+ visible. This can be done by the oColVis.amExclude initialisation parameter when creating + the DataTable. This array can contain a mix of integers or strings (matching the mDataProp value) + indicating which columns should be excluded. This example shows the first column being excluded.

Live example

@@ -485,7 +485,7 @@

Initialisation code

$('#example').dataTable( { "sDom": 'C<"clear">lfrtip', "oColVis": { - "aiExclude": [ 0 ] + "amExclude": [ 0 ] } } ); } ); diff --git a/media/js/ColVis.js b/media/js/ColVis.js old mode 100755 new mode 100644 index 33d10e0..bd3217a --- a/media/js/ColVis.js +++ b/media/js/ColVis.js @@ -1,6 +1,6 @@ /* * File: ColVis.js - * Version: 1.0.6 + * Version: 1.0.7.dev * CVS: $Id$ * Description: Controls for column visiblity in DataTables * Author: Allan Jardine (www.sprymedia.co.uk) @@ -106,20 +106,20 @@ ColVis = function( oDTSettings, oInit ) "hidden": true, /** - * List of columns (integers) which should be excluded from the list - * @property aiExclude + * List of columns (mixed) which should be excluded from the list + * @property amExclude * @type Array * @default [] */ - "aiExclude": [], + "amExclude": [], /** * Store the original viisbility settings so they could be restored - * @property abOriginal + * @property aoOriginal * @type Array * @default [] */ - "abOriginal": [], + "aoOriginal": [], /** * Show Show-All button @@ -320,7 +320,7 @@ ColVis.prototype = { /* Store the original visbility information */ for ( var i=0, iLen=this.s.dt.aoColumns.length ; i'+this.s.sRestore+'' ); $(nButton).click( function (e) { - for ( var i=0, iLen=that.s.abOriginal.length ; i'+this.s.sShowAll+'' ); $(nButton).click( function (e) { - for ( var i=0, iLen=that.s.abOriginal.length ; i

Preamble

-

This demo of ColVis shows a number of different features of the plug-in. Firstly, it shows alternative styling of the plug-in with the button nested just above the scrollbar in the DataTable. Secondly there is a "Restore" button in the ColVis drop down, which will restore the original visibility settings when the table was initialised (this is controlled by using the "bRestore" option). Finally it shows that the drop down can be set to align on the right of the button, rather than the left.

+

This demo of ColVis shows a number of different features of the plug-in. Firstly, it shows alternative styling of the plug-in with the button nested just above the scrollbar in the DataTable. Secondly there is a "Restore" button in the ColVis drop down, which will restore the original visibility settings when the table was initialised (this is controlled by using the "bRestore" option). Thirdly there is a "Show All" button in the ColVis drop down, which will set all non-excluded columns to visible (this is controlled by using the "bShowAll" option). Finally it shows that the drop down can be set to align on the right of the button, rather than the left.

Note that this demo requires DataTables 1.7.5 or later.

Live example

From 62a033e104099666ccb60c2b732b3c94177c993b Mon Sep 17 00:00:00 2001 From: Kyle Smith Date: Thu, 3 Nov 2011 15:29:53 -0400 Subject: [PATCH 2/2] Added a new variable, iDrawDelay, to postpone the redrawing of the table after the column visibility is changed --- media/js/ColVis.js | 37 +++++++++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/media/js/ColVis.js b/media/js/ColVis.js index bd3217a..da5628b 100644 --- a/media/js/ColVis.js +++ b/media/js/ColVis.js @@ -177,7 +177,16 @@ ColVis = function( oDTSettings, oInit ) * @type String * @default auto */ - "sSize": "auto" + "sSize": "auto", + + /** + * Amount of time to wait in mS for the table to redraw after altering the visibility of a column. + * This allows you to show/hide multiple columns and only do one Redraw. Good for large data sets. + * @property iDrawDelay + * @type int (milliseconds) + * @default 0 + */ + "iDrawDelay": 0 }; @@ -247,6 +256,7 @@ ColVis = function( oDTSettings, oInit ) /* Constructor logic */ this.s.dt = oDTSettings; + this.s.oTimerDrawDelay = null; this._fnConstruct(); return this; }; @@ -406,9 +416,13 @@ ColVis.prototype = { { this.s.sSize = oConfig.sSize; } + + if ( typeof oConfig.iDrawDelay != 'undefined' ) + { + this.s.iDrawDelay = oConfig.iDrawDelay; + } }, - /** * On each table draw, check the visiblity checkboxes as needed. This allows any process to * update the table's column visiblity and ColVis will still be accurate. @@ -544,7 +558,6 @@ ColVis.prototype = { return nButton; }, - /** * Create the DOM for a show / hide button * @method _fnDomColumnButton @@ -575,14 +588,30 @@ ColVis.prototype = { showHide = $('input', this).is(":checked"); } + /* Add or remove the check in the checkbox + * Without this, the check will not show up until the redraw + */ + showHide ? $('input', this).attr('checked', 'checked') : $('input', this).removeAttr('checked'); + /* Need to consider the case where the initialiser created more than one table - change the * API index that DataTables is using */ var oldIndex = $.fn.dataTableExt.iApiIndex; $.fn.dataTableExt.iApiIndex = that._fnDataTablesApiIndex.call(that); - that.s.dt.oInstance.fnSetColumnVis( i, showHide ); + that.s.dt.oInstance.fnSetColumnVis( i, showHide, false ); $.fn.dataTableExt.iApiIndex = oldIndex; /* Restore */ + if (that.s.iDrawDelay > 0) { + window.clearTimeout(that.s.oTimerDrawDelay) + + that.s.oTimerDrawDelay = window.setTimeout(function() { + that.s.dt.oInstance.fnDraw(); + }, that.s.iDrawDelay); + } + else { + that.s.dt.oInstance.fnDraw(); + } + if ( that.s.fnStateChange !== null ) { that.s.fnStateChange.call( that, i, showHide );