diff --git a/README.md b/README.md index 644026a..73eb02d 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,45 @@ ColReorderWithResize ==================== -Column reordering with resizable columns plug-in for DataTables \ No newline at end of file +Column reordering with resizable columns plug-in for DataTables + +New options include: + +minResizeWidth: (default: 10). Minimum size that columns can be. + +bResizeTable: (Default: true). Allow table to be resized. Column resize events will grow or shrink table + +bAddFixed: (default: true). Automtically add taable-layout:fixed CSS to a table + +fnResizeTableCallback: Call function every time the table is resized + +allowResize (default: true): Allow table to be resized + +allowHeaderDoubleClick (default: false): Double-clicking on header field will expand to "full size". double-clicking again will reduce to minimum size. For best behavior, turn off sorting before enabling this. + +headerContextMenu (default: false): If set to true, enables a context menu for selecting columns to view. It can work with jquery ui or without jquery ui. (However it is really ugly without it.) A function can also be specified. If a function is given, it will have the scope of the element clicked. It will be passed the event object, the datatable settings and the colreorder scope. See the _fnDefaultContextMenu in the docs for example of creating a function. + +Other options remain the same as those in the ColReorder plugin. + +Basic initialization: +`````javascript +$(document).ready( function () { + $('#example').dataTable( { + "sDom": 'Rlfrtip' + } ); +} ); +````` + +The "R" option in sDom enables this feature. + +Additional options can be set with "oColReorder": +`````javascript +$(document).ready( function () { + $('#example').dataTable( { + "sDom": 'Rlfrtip', + "oColReorder": { + "bAddFixed":false + } + } ); +} ); +````` diff --git a/index.html b/index.html new file mode 100644 index 0000000..1a8a1eb --- /dev/null +++ b/index.html @@ -0,0 +1,499 @@ + + + + + + ColReorder example + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rendering engineBrowserPlatform(s)Engine versionCSS grade
TridentInternet Explorer 4.0Win 95+ (Entity: &) - This is a very old browser!4X
TridentInternet Explorer 5.0Win 95+5C
TridentInternet Explorer 5.5Win 95+5.5A
TridentInternet Explorer 6Win 98+6A
TridentInternet Explorer 7Win XP SP2+7A
TridentAOL browser (AOL desktop)Win XP6A
Gecko (UTF-8: $¢€)Firefox 1.0Win 98+ / OSX.2+1.7A
GeckoFirefox 1.5Win 98+ / OSX.2+1.8A
GeckoFirefox 2.0Win 98+ / OSX.2+1.8A
GeckoFirefox 3.0Win 2k+ / OSX.3+1.9A
GeckoCamino 1.0OSX.2+1.8A
GeckoCamino 1.5OSX.3+1.8A
GeckoNetscape 7.2Win 95+ / Mac OS 8.6-9.21.7A
GeckoNetscape Browser 8Win 98SE+1.7A
GeckoNetscape Navigator 9Win 98+ / OSX.2+1.8A
GeckoMozilla 1.0Win 95+ / OSX.1+1A
GeckoMozilla 1.1Win 95+ / OSX.1+1.1A
GeckoMozilla 1.2Win 95+ / OSX.1+1.2A
GeckoMozilla 1.3Win 95+ / OSX.1+1.3A
GeckoMozilla 1.4Win 95+ / OSX.1+1.4A
GeckoMozilla 1.5Win 95+ / OSX.1+1.5A
GeckoMozilla 1.6Win 95+ / OSX.1+1.6A
GeckoMozilla 1.7Win 98+ / OSX.1+1.7A
GeckoMozilla 1.8Win 98+ / OSX.1+1.8A
GeckoSeamonkey 1.1Win 98+ / OSX.2+1.8A
GeckoEpiphany 2.20Gnome1.8A
WebkitSafari 1.2OSX.3125.5A
WebkitSafari 1.3OSX.3312.8A
WebkitSafari 2.0OSX.4+419.3A
WebkitSafari 3.0OSX.4+522.1A
WebkitOmniWeb 5.5OSX.4+420A
WebkitiPod Touch / iPhoneiPod420.1A
WebkitS60S60413A
PrestoOpera 7.0Win 95+ / OSX.1+-A
PrestoOpera 7.5Win 95+ / OSX.2+-A
PrestoOpera 8.0Win 95+ / OSX.2+-A
PrestoOpera 8.5Win 95+ / OSX.2+-A
PrestoOpera 9.0Win 95+ / OSX.3+-A
PrestoOpera 9.2Win 88+ / OSX.3+-A
PrestoOpera 9.5Win 88+ / OSX.3+-A
PrestoOpera for WiiWii-A
PrestoNokia N800N800-A
PrestoNintendo DS browserNintendo DS8.5C/A1
KHTMLKonqureror 3.1KDE 3.13.1C
KHTMLKonqureror 3.3KDE 3.33.3A
KHTMLKonqureror 3.5KDE 3.53.5A
TasmanInternet Explorer 4.5Mac OS 8-9-X
TasmanInternet Explorer 5.1Mac OS 7.6-91C
TasmanInternet Explorer 5.2Mac OS 8-X1C
MiscNetFront 3.1Embedded devices-C
MiscNetFront 3.4Embedded devices-A
MiscDillo 0.8Embedded devices-X
MiscLinksText only-X
MiscLynxText only-X
MiscIE MobileWindows Mobile 6-C
MiscPSP browserPSP-C
Other browsersAll others--U
+
+ +

Initialisation code

+ 
+   $(document).ready( function () {
+	    var oTable = $('#example').dataTable( {
+          "sDom": 'Rlfrtip',
+          "headerContextMenu":true
+          "oColReorder": {
+            "headerContextMenu": true
+          }
+	    } );
+} );
+ + + + + diff --git a/media/css/ColReorder.css b/media/css/ColReorder.css new file mode 100644 index 0000000..cf5cf55 --- /dev/null +++ b/media/css/ColReorder.css @@ -0,0 +1,21 @@ +/* + * Namespace DTCR - "DataTables ColReorder" plug-in + */ + +table.DTCR_clonedTable { + background-color: rgba(255, 255, 255, 0.7); + z-index: 202; +} + +div.DTCR_pointer { + width: 1px; + background-color: #0259C4; + z-index: 201; +} + +body.alt div.DTCR_pointer { + margin-top: -15px; + margin-left: -9px; + width: 18px; + background: url('../images/insert.png') no-repeat top left; +} \ No newline at end of file diff --git a/media/images/insert.png b/media/images/insert.png new file mode 100644 index 0000000..15d5522 Binary files /dev/null and b/media/images/insert.png differ diff --git a/media/js/ColReorderWithResize.js b/media/js/ColReorderWithResize.js index 8096aa0..f7fd1fc 100644 --- a/media/js/ColReorderWithResize.js +++ b/media/js/ColReorderWithResize.js @@ -1,1194 +1,1770 @@ /* - * File: ColReorderWithResize.js - * Version: 1.0.5 - * CVS: $Id$ - * Description: Controls for column visiblity in DataTables + Columns resizable by user - * Author: Allan Jardine (www.sprymedia.co.uk) - * Author: Christophe Battarel (www.altairis.fr) - * Created: Wed Sep 15 18:23:29 BST 2010 - * Modified: July 2011 by Christophe Battarel - christophe.battarel@altairis.fr (columns resizable) - * Modified: February 2012 by Martin Marchetta - martin.marchetta@gmail.com - * 1. Made the "hot area" for resizing a little wider (it was a little difficult to hit the exact border of a column for resizing) - * 2. Resizing didn't work at all when using scroller (that plugin splits the table into 2 different tables: one for the header and another one for the body, so when you resized the header, the data columns didn't follow) - * 3. Fixed collateral effects of sorting feature - * 4. If sScrollX is enabled (i.e. horizontal scrolling), when resizing a column the width of the other columns is not changed, but the whole - * table is resized to give an Excel-like behavior (good suggestion by Allan) - * Modified: February 2012 by Christophe Battarel - christophe.battarel@altairis.fr (ColReorder v1.0.5 adaptation) - * Language: Javascript - * License: GPL v2 or BSD 3 point style - * Project: DataTables - * Contact: www.sprymedia.co.uk/contact - * - * Copyright 2010-2011 Allan Jardine, all rights reserved. - * - * This source file is free software, under either the GPL v2 license or a - * BSD style license, available at: - * http://datatables.net/license_gpl2 - * http://datatables.net/license_bsd - * - */ - - -(function($, window, document) { - - -/** - * Switch the key value pairing of an index array to be value key (i.e. the old value is now the - * key). For example consider [ 2, 0, 1 ] this would be returned as [ 1, 2, 0 ]. - * @method fnInvertKeyValues - * @param array aIn Array to switch around - * @returns array - */ -function fnInvertKeyValues( aIn ) -{ - var aRet=[]; - for ( var i=0, iLen=aIn.length ; i= iCols ) - { - this.oApi._fnLog( oSettings, 1, "ColReorder 'from' index is out of bounds: "+iFrom ); - return; - } - - if ( iTo < 0 || iTo >= iCols ) - { - this.oApi._fnLog( oSettings, 1, "ColReorder 'to' index is out of bounds: "+iTo ); - return; - } - - /* - * Calculate the new column array index, so we have a mapping between the old and new - */ - var aiMapping = []; - for ( i=0, iLen=iCols ; i this.s.fixed-1 ) - { - this._fnMouseListener( i, this.s.dt.aoColumns[i].nTh ); - } - - /* Mark the original column order for later reference */ - this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i; - } - - /* State saving */ - this.s.dt.oApi._fnCallbackReg( this.s.dt, 'aoStateSaveParams', function (oS, oData) { - that._fnStateSave.call( that, oData ); - }, "ColReorder_State" ); - - /* An initial column order has been specified */ - var aiOrder = null; - if ( typeof this.s.init.aiOrder != 'undefined' ) - { - aiOrder = this.s.init.aiOrder.slice(); - } - - /* State loading, overrides the column order given */ - if ( this.s.dt.oLoadedState && typeof this.s.dt.oLoadedState.ColReorder != 'undefined' && - this.s.dt.oLoadedState.ColReorder.length == this.s.dt.aoColumns.length ) - { - aiOrder = this.s.dt.oLoadedState.ColReorder; - } - - /* If we have an order to apply - do so */ - if ( aiOrder ) - { - /* We might be called during or after the DataTables initialisation. If before, then we need - * to wait until the draw is done, if after, then do what we need to do right away - */ - if ( !that.s.dt._bInitComplete ) - { - var bDone = false; - this.s.dt.aoDrawCallback.push( { - "fn": function () { - if ( !that.s.dt._bInitComplete && !bDone ) - { - bDone = true; - var resort = fnInvertKeyValues( aiOrder ); - that._fnOrderColumns.call( that, resort ); - } - }, - "sName": "ColReorder_Pre" - } ); - } - else - { - var resort = fnInvertKeyValues( aiOrder ); - that._fnOrderColumns.call( that, resort ); - } - } - }, - - - /** - * Set the column order from an array - * @method _fnOrderColumns - * @param array a An array of integers which dictate the column order that should be applied - * @returns void - * @private - */ - "_fnOrderColumns": function ( a ) - { - if ( a.length != this.s.dt.aoColumns.length ) - { - this.s.dt.oInstance.oApi._fnLog( oDTSettings, 1, "ColReorder - array reorder does not "+ - "match known number of columns. Skipping." ); - return; - } - - for ( var i=0, iLen=a.length ; i 0) - this.table_size = $($('div.dataTables_scrollHead', this.s.dt.nTableWrapper)[0].childNodes[0].childNodes[0]).width(); - } - //////////////////// - - /* are we resizing a column ? */ - if (this.dom.resize) { - var nTh = this.s.mouse.resizeElem; - var nThNext = $(nTh).next(); - var moveLength = e.pageX-this.s.mouse.startX; - if (moveLength != 0 && !scrollXEnabled) - $(nThNext).width(this.s.mouse.nextStartWidth - moveLength); - $(nTh).width(this.s.mouse.startWidth + moveLength); - - //Martin Marchetta: Resize the header too (if sScrollX is enabled) - if(scrollXEnabled && $('div.dataTables_scrollHead', this.s.dt.nTableWrapper) != undefined){ - if($('div.dataTables_scrollHead', this.s.dt.nTableWrapper).length > 0) - $($('div.dataTables_scrollHead', this.s.dt.nTableWrapper)[0].childNodes[0].childNodes[0]).width(this.table_size + moveLength); - } - - //////////////////////// - //Martin Marchetta: Fixed col resizing when the scroller is enabled. - var visibleColumnIndex; - //First determine if this plugin is being used along with the smart scroller... - if($('div.dataTables_scrollBody') != null){ - //...if so, when resizing the header, also resize the table's body (when enabling the Scroller, the table's header and - //body are split into different tables, so the column resizing doesn't work anymore) - if($('div.dataTables_scrollBody').length > 0){ - //Since some columns might have been hidden, find the correct one to resize in the table's body - var currentColumnIndex; - visibleColumnIndex = -1; - for(currentColumnIndex=-1; currentColumnIndex < this.s.dt.aoColumns.length-1 && currentColumnIndex != colResized; currentColumnIndex++){ - if(this.s.dt.aoColumns[currentColumnIndex+1].bVisible) - visibleColumnIndex++; - } - - //Get the scroller's div - tableScroller = $('div.dataTables_scrollBody', this.s.dt.nTableWrapper)[0]; - - //Get the table - scrollingTableHead = $(tableScroller)[0].childNodes[0].childNodes[0].childNodes[0]; - - //Resize the columns - if (moveLength != 0 && !scrollXEnabled){ - $($(scrollingTableHead)[0].childNodes[visibleColumnIndex+1]).width(this.s.mouse.nextStartWidth - moveLength); - } - $($(scrollingTableHead)[0].childNodes[visibleColumnIndex]).width(this.s.mouse.startWidth + moveLength); - - //Resize the table too - if(scrollXEnabled) - $($(tableScroller)[0].childNodes[0]).width(this.table_size + moveLength); - } - } - //////////////////////// - - return; - } - else if (this.s.allowReorder) { - if ( this.dom.drag === null ) - { - /* Only create the drag element if the mouse has moved a specific distance from the start - * point - this allows the user to make small mouse movements when sorting and not have a - * possibly confusing drag element showing up - */ - if ( Math.pow( - Math.pow(e.pageX - this.s.mouse.startX, 2) + - Math.pow(e.pageY - this.s.mouse.startY, 2), 0.5 ) < 5 ) - { - return; - } - this._fnCreateDragNode(); - } - - /* Position the element - we respect where in the element the click occured */ - this.dom.drag.style.left = (e.pageX - this.s.mouse.offsetX) + "px"; - this.dom.drag.style.top = (e.pageY - this.s.mouse.offsetY) + "px"; - - /* Based on the current mouse position, calculate where the insert should go */ - var bSet = false; - for ( var i=1, iLen=this.s.aoTargets.length ; i