diff options
Diffstat (limited to 'wqflask')
8 files changed, 3417 insertions, 893 deletions
diff --git a/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.colReorder.js b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.colReorder.js new file mode 100644 index 00000000..58e7656e --- /dev/null +++ b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.colReorder.js @@ -0,0 +1,1372 @@ +/*! ColReorder 1.1.3 + * ©2010-2014 SpryMedia Ltd - datatables.net/license + */ + +/** + * @summary ColReorder + * @description Provide the ability to reorder columns in a DataTable + * @version 1.1.3 + * @file dataTables.colReorder.js + * @author SpryMedia Ltd (www.sprymedia.co.uk) + * @contact www.sprymedia.co.uk/contact + * @copyright Copyright 2010-2014 SpryMedia Ltd. + * + * This source file is free software, available under the following license: + * MIT license - http://datatables.net/license/mit + * + * This source file is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY + * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. + * + * For details please refer to: http://www.datatables.net + */ + +(function(window, document, undefined) { + + +/** + * 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<iLen ; i++ ) + { + aRet[ aIn[i] ] = i; + } + return aRet; +} + + +/** + * Modify an array by switching the position of two elements + * @method fnArraySwitch + * @param array aArray Array to consider, will be modified by reference (i.e. no return) + * @param int iFrom From point + * @param int iTo Insert point + * @returns void + */ +function fnArraySwitch( aArray, iFrom, iTo ) +{ + var mStore = aArray.splice( iFrom, 1 )[0]; + aArray.splice( iTo, 0, mStore ); +} + + +/** + * Switch the positions of nodes in a parent node (note this is specifically designed for + * table rows). Note this function considers all element nodes under the parent! + * @method fnDomSwitch + * @param string sTag Tag to consider + * @param int iFrom Element to move + * @param int Point to element the element to (before this point), can be null for append + * @returns void + */ +function fnDomSwitch( nParent, iFrom, iTo ) +{ + var anTags = []; + for ( var i=0, iLen=nParent.childNodes.length ; i<iLen ; i++ ) + { + if ( nParent.childNodes[i].nodeType == 1 ) + { + anTags.push( nParent.childNodes[i] ); + } + } + var nStore = anTags[ iFrom ]; + + if ( iTo !== null ) + { + nParent.insertBefore( nStore, anTags[iTo] ); + } + else + { + nParent.appendChild( nStore ); + } +} + + + +var factory = function( $, DataTable ) { +"use strict"; + +/** + * Plug-in for DataTables which will reorder the internal column structure by taking the column + * from one position (iFrom) and insert it into a given point (iTo). + * @method $.fn.dataTableExt.oApi.fnColReorder + * @param object oSettings DataTables settings object - automatically added by DataTables! + * @param int iFrom Take the column to be repositioned from this point + * @param int iTo and insert it into this point + * @returns void + */ +$.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo ) +{ + var v110 = $.fn.dataTable.Api ? true : false; + var i, iLen, j, jLen, iCols=oSettings.aoColumns.length, nTrs, oCol; + var attrMap = function ( obj, prop, mapping ) { + if ( ! obj[ prop ] ) { + return; + } + + var a = obj[ prop ].split('.'); + var num = a.shift(); + + if ( isNaN( num*1 ) ) { + return; + } + + obj[ prop ] = mapping[ num*1 ]+'.'+a.join('.'); + }; + + /* Sanity check in the input */ + if ( iFrom == iTo ) + { + /* Pointless reorder */ + return; + } + + if ( iFrom < 0 || iFrom >= 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<iLen ; i++ ) + { + aiMapping[i] = i; + } + fnArraySwitch( aiMapping, iFrom, iTo ); + var aiInvertMapping = fnInvertKeyValues( aiMapping ); + + + /* + * Convert all internal indexing to the new column order indexes + */ + /* Sorting */ + for ( i=0, iLen=oSettings.aaSorting.length ; i<iLen ; i++ ) + { + oSettings.aaSorting[i][0] = aiInvertMapping[ oSettings.aaSorting[i][0] ]; + } + + /* Fixed sorting */ + if ( oSettings.aaSortingFixed !== null ) + { + for ( i=0, iLen=oSettings.aaSortingFixed.length ; i<iLen ; i++ ) + { + oSettings.aaSortingFixed[i][0] = aiInvertMapping[ oSettings.aaSortingFixed[i][0] ]; + } + } + + /* Data column sorting (the column which the sort for a given column should take place on) */ + for ( i=0, iLen=iCols ; i<iLen ; i++ ) + { + oCol = oSettings.aoColumns[i]; + for ( j=0, jLen=oCol.aDataSort.length ; j<jLen ; j++ ) + { + oCol.aDataSort[j] = aiInvertMapping[ oCol.aDataSort[j] ]; + } + + // Update the column indexes + if ( v110 ) { + oCol.idx = aiInvertMapping[ oCol.idx ]; + } + } + + if ( v110 ) { + // Update 1.10 optimised sort class removal variable + $.each( oSettings.aLastSort, function (i, val) { + oSettings.aLastSort[i].src = aiInvertMapping[ val.src ]; + } ); + } + + /* Update the Get and Set functions for each column */ + for ( i=0, iLen=iCols ; i<iLen ; i++ ) + { + oCol = oSettings.aoColumns[i]; + + if ( typeof oCol.mData == 'number' ) { + oCol.mData = aiInvertMapping[ oCol.mData ]; + + // regenerate the get / set functions + oSettings.oApi._fnColumnOptions( oSettings, i, {} ); + } + else if ( $.isPlainObject( oCol.mData ) ) { + // HTML5 data sourced + attrMap( oCol.mData, '_', aiInvertMapping ); + attrMap( oCol.mData, 'filter', aiInvertMapping ); + attrMap( oCol.mData, 'sort', aiInvertMapping ); + attrMap( oCol.mData, 'type', aiInvertMapping ); + + // regenerate the get / set functions + oSettings.oApi._fnColumnOptions( oSettings, i, {} ); + } + } + + + /* + * Move the DOM elements + */ + if ( oSettings.aoColumns[iFrom].bVisible ) + { + /* Calculate the current visible index and the point to insert the node before. The insert + * before needs to take into account that there might not be an element to insert before, + * in which case it will be null, and an appendChild should be used + */ + var iVisibleIndex = this.oApi._fnColumnIndexToVisible( oSettings, iFrom ); + var iInsertBeforeIndex = null; + + i = iTo < iFrom ? iTo : iTo + 1; + while ( iInsertBeforeIndex === null && i < iCols ) + { + iInsertBeforeIndex = this.oApi._fnColumnIndexToVisible( oSettings, i ); + i++; + } + + /* Header */ + nTrs = oSettings.nTHead.getElementsByTagName('tr'); + for ( i=0, iLen=nTrs.length ; i<iLen ; i++ ) + { + fnDomSwitch( nTrs[i], iVisibleIndex, iInsertBeforeIndex ); + } + + /* Footer */ + if ( oSettings.nTFoot !== null ) + { + nTrs = oSettings.nTFoot.getElementsByTagName('tr'); + for ( i=0, iLen=nTrs.length ; i<iLen ; i++ ) + { + fnDomSwitch( nTrs[i], iVisibleIndex, iInsertBeforeIndex ); + } + } + + /* Body */ + for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ ) + { + if ( oSettings.aoData[i].nTr !== null ) + { + fnDomSwitch( oSettings.aoData[i].nTr, iVisibleIndex, iInsertBeforeIndex ); + } + } + } + + /* + * Move the internal array elements + */ + /* Columns */ + fnArraySwitch( oSettings.aoColumns, iFrom, iTo ); + + /* Search columns */ + fnArraySwitch( oSettings.aoPreSearchCols, iFrom, iTo ); + + /* Array array - internal data anodes cache */ + for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ ) + { + var data = oSettings.aoData[i]; + + if ( v110 ) { + // DataTables 1.10+ + if ( data.anCells ) { + fnArraySwitch( data.anCells, iFrom, iTo ); + } + + // For DOM sourced data, the invalidate will reread the cell into + // the data array, but for data sources as an array, they need to + // be flipped + if ( data.src !== 'dom' && $.isArray( data._aData ) ) { + fnArraySwitch( data._aData, iFrom, iTo ); + } + } + else { + // DataTables 1.9- + if ( $.isArray( data._aData ) ) { + fnArraySwitch( data._aData, iFrom, iTo ); + } + fnArraySwitch( data._anHidden, iFrom, iTo ); + } + } + + /* Reposition the header elements in the header layout array */ + for ( i=0, iLen=oSettings.aoHeader.length ; i<iLen ; i++ ) + { + fnArraySwitch( oSettings.aoHeader[i], iFrom, iTo ); + } + + if ( oSettings.aoFooter !== null ) + { + for ( i=0, iLen=oSettings.aoFooter.length ; i<iLen ; i++ ) + { + fnArraySwitch( oSettings.aoFooter[i], iFrom, iTo ); + } + } + + // In 1.10 we need to invalidate row cached data for sorting, filtering etc + if ( v110 ) { + var api = new $.fn.dataTable.Api( oSettings ); + api.rows().invalidate(); + } + + /* + * Update DataTables' event handlers + */ + + /* Sort listener */ + for ( i=0, iLen=iCols ; i<iLen ; i++ ) + { + $(oSettings.aoColumns[i].nTh).off('click.DT'); + this.oApi._fnSortAttachListener( oSettings, oSettings.aoColumns[i].nTh, i ); + } + + + /* Fire an event so other plug-ins can update */ + $(oSettings.oInstance).trigger( 'column-reorder', [ oSettings, { + "iFrom": iFrom, + "iTo": iTo, + "aiInvertMapping": aiInvertMapping + } ] ); +}; + + +/** + * ColReorder provides column visibility control for DataTables + * @class ColReorder + * @constructor + * @param {object} dt DataTables settings object + * @param {object} opts ColReorder options + */ +var ColReorder = function( dt, opts ) +{ + var oDTSettings; + + if ( $.fn.dataTable.Api ) { + oDTSettings = new $.fn.dataTable.Api( dt ).settings()[0]; + } + // 1.9 compatibility + else if ( dt.fnSettings ) { + // DataTables object, convert to the settings object + oDTSettings = dt.fnSettings(); + } + else if ( typeof dt === 'string' ) { + // jQuery selector + if ( $.fn.dataTable.fnIsDataTable( $(dt)[0] ) ) { + oDTSettings = $(dt).eq(0).dataTable().fnSettings(); + } + } + else if ( dt.nodeName && dt.nodeName.toLowerCase() === 'table' ) { + // Table node + if ( $.fn.dataTable.fnIsDataTable( dt.nodeName ) ) { + oDTSettings = $(dt.nodeName).dataTable().fnSettings(); + } + } + else if ( dt instanceof jQuery ) { + // jQuery object + if ( $.fn.dataTable.fnIsDataTable( dt[0] ) ) { + oDTSettings = dt.eq(0).dataTable().fnSettings(); + } + } + else { + // DataTables settings object + oDTSettings = dt; + } + + // Ensure that we can't initialise on the same table twice + if ( oDTSettings._colReorder ) { + throw "ColReorder already initialised on table #"+oDTSettings.nTable.id; + } + + // Convert from camelCase to Hungarian, just as DataTables does + var camelToHungarian = $.fn.dataTable.camelToHungarian; + if ( camelToHungarian ) { + camelToHungarian( ColReorder.defaults, ColReorder.defaults, true ); + camelToHungarian( ColReorder.defaults, opts || {} ); + } + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Public class variables + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + + /** + * @namespace Settings object which contains customisable information for ColReorder instance + */ + this.s = { + /** + * DataTables settings object + * @property dt + * @type Object + * @default null + */ + "dt": null, + + /** + * Initialisation object used for this instance + * @property init + * @type object + * @default {} + */ + "init": $.extend( true, {}, ColReorder.defaults, opts ), + + /** + * Number of columns to fix (not allow to be reordered) + * @property fixed + * @type int + * @default 0 + */ + "fixed": 0, + + /** + * Number of columns to fix counting from right (not allow to be reordered) + * @property fixedRight + * @type int + * @default 0 + */ + "fixedRight": 0, + + /** + * Callback function for once the reorder has been done + * @property reorderCallback + * @type function + * @default null + */ + "reorderCallback": null, + + /** + * @namespace Information used for the mouse drag + */ + "mouse": { + "startX": -1, + "startY": -1, + "offsetX": -1, + "offsetY": -1, + "target": -1, + "targetIndex": -1, + "fromIndex": -1 + }, + + /** + * Information which is used for positioning the insert cusor and knowing where to do the + * insert. Array of objects with the properties: + * x: x-axis position + * to: insert point + * @property aoTargets + * @type array + * @default [] + */ + "aoTargets": [] + }; + + + /** + * @namespace Common and useful DOM elements for the class instance + */ + this.dom = { + /** + * Dragging element (the one the mouse is moving) + * @property drag + * @type element + * @default null + */ + "drag": null, + + /** + * The insert cursor + * @property pointer + * @type element + * @default null + */ + "pointer": null + }; + + + /* Constructor logic */ + this.s.dt = oDTSettings; + this.s.dt._colReorder = this; + this._fnConstruct(); + + /* Add destroy callback */ + oDTSettings.oApi._fnCallbackReg(oDTSettings, 'aoDestroyCallback', $.proxy(this._fnDestroy, this), 'ColReorder'); + + return this; +}; + + + +ColReorder.prototype = { + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Public methods + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + + /** + * Reset the column ordering to the original ordering that was detected on + * start up. + * @return {this} Returns `this` for chaining. + * + * @example + * // DataTables initialisation with ColReorder + * var table = $('#example').dataTable( { + * "sDom": 'Rlfrtip' + * } ); + * + * // Add click event to a button to reset the ordering + * $('#resetOrdering').click( function (e) { + * e.preventDefault(); + * $.fn.dataTable.ColReorder( table ).fnReset(); + * } ); + */ + "fnReset": function () + { + var a = []; + for ( var i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ ) + { + a.push( this.s.dt.aoColumns[i]._ColReorder_iOrigCol ); + } + + this._fnOrderColumns( a ); + + return this; + }, + + /** + * `Deprecated` - Get the current order of the columns, as an array. + * @return {array} Array of column identifiers + * @deprecated `fnOrder` should be used in preference to this method. + * `fnOrder` acts as a getter/setter. + */ + "fnGetCurrentOrder": function () + { + return this.fnOrder(); + }, + + /** + * Get the current order of the columns, as an array. Note that the values + * given in the array are unique identifiers for each column. Currently + * these are the original ordering of the columns that was detected on + * start up, but this could potentially change in future. + * @return {array} Array of column identifiers + * + * @example + * // Get column ordering for the table + * var order = $.fn.dataTable.ColReorder( dataTable ).fnOrder(); + *//** + * Set the order of the columns, from the positions identified in the + * ordering array given. Note that ColReorder takes a brute force approach + * to reordering, so it is possible multiple reordering events will occur + * before the final order is settled upon. + * @param {array} [set] Array of column identifiers in the new order. Note + * that every column must be included, uniquely, in this array. + * @return {this} Returns `this` for chaining. + * + * @example + * // Swap the first and second columns + * $.fn.dataTable.ColReorder( dataTable ).fnOrder( [1, 0, 2, 3, 4] ); + * + * @example + * // Move the first column to the end for the table `#example` + * var curr = $.fn.dataTable.ColReorder( '#example' ).fnOrder(); + * var first = curr.shift(); + * curr.push( first ); + * $.fn.dataTable.ColReorder( '#example' ).fnOrder( curr ); + * + * @example + * // Reverse the table's order + * $.fn.dataTable.ColReorder( '#example' ).fnOrder( + * $.fn.dataTable.ColReorder( '#example' ).fnOrder().reverse() + * ); + */ + "fnOrder": function ( set ) + { + if ( set === undefined ) + { + var a = []; + for ( var i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ ) + { + a.push( this.s.dt.aoColumns[i]._ColReorder_iOrigCol ); + } + return a; + } + + this._fnOrderColumns( fnInvertKeyValues( set ) ); + + return this; + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Private methods (they are of course public in JS, but recommended as private) + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + + /** + * Constructor logic + * @method _fnConstruct + * @returns void + * @private + */ + "_fnConstruct": function () + { + var that = this; + var iLen = this.s.dt.aoColumns.length; + var i; + + /* Columns discounted from reordering - counting left to right */ + if ( this.s.init.iFixedColumns ) + { + this.s.fixed = this.s.init.iFixedColumns; + } + + /* Columns discounted from reordering - counting right to left */ + this.s.fixedRight = this.s.init.iFixedColumnsRight ? + this.s.init.iFixedColumnsRight : + 0; + + /* Drop callback initialisation option */ + if ( this.s.init.fnReorderCallback ) + { + this.s.reorderCallback = this.s.init.fnReorderCallback; + } + + /* Add event handlers for the drag and drop, and also mark the original column order */ + for ( i = 0; i < iLen; i++ ) + { + if ( i > this.s.fixed-1 && i < iLen - this.s.fixedRight ) + { + 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 ( this.s.init.aiOrder ) + { + 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 ); + } + } + else { + this._fnSetColumnIndexes(); + } + }, + + + /** + * 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( this.s.dt, 1, "ColReorder - array reorder does not "+ + "match known number of columns. Skipping." ); + return; + } + + for ( var i=0, iLen=a.length ; i<iLen ; i++ ) + { + var currIndex = $.inArray( i, a ); + if ( i != currIndex ) + { + /* Reorder our switching array */ + fnArraySwitch( a, currIndex, i ); + + /* Do the column reorder in the table */ + this.s.dt.oInstance.fnColReorder( currIndex, i ); + } + } + + /* When scrolling we need to recalculate the column sizes to allow for the shift */ + if ( this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== "" ) + { + this.s.dt.oInstance.fnAdjustColumnSizing( false ); + } + + /* Save the state */ + this.s.dt.oInstance.oApi._fnSaveState( this.s.dt ); + + this._fnSetColumnIndexes(); + + if ( this.s.reorderCallback !== null ) + { + this.s.reorderCallback.call( this ); + } + }, + + + /** + * Because we change the indexes of columns in the table, relative to their starting point + * we need to reorder the state columns to what they are at the starting point so we can + * then rearrange them again on state load! + * @method _fnStateSave + * @param object oState DataTables state + * @returns string JSON encoded cookie string for DataTables + * @private + */ + "_fnStateSave": function ( oState ) + { + var i, iLen, aCopy, iOrigColumn; + var oSettings = this.s.dt; + var columns = oSettings.aoColumns; + + oState.ColReorder = []; + + /* Sorting */ + if ( oState.aaSorting ) { + // 1.10.0- + for ( i=0 ; i<oState.aaSorting.length ; i++ ) { + oState.aaSorting[i][0] = columns[ oState.aaSorting[i][0] ]._ColReorder_iOrigCol; + } + + var aSearchCopy = $.extend( true, [], oState.aoSearchCols ); + + for ( i=0, iLen=columns.length ; i<iLen ; i++ ) + { + iOrigColumn = columns[i]._ColReorder_iOrigCol; + + /* Column filter */ + oState.aoSearchCols[ iOrigColumn ] = aSearchCopy[i]; + + /* Visibility */ + oState.abVisCols[ iOrigColumn ] = columns[i].bVisible; + + /* Column reordering */ + oState.ColReorder.push( iOrigColumn ); + } + } + else if ( oState.order ) { + // 1.10.1+ + for ( i=0 ; i<oState.order.length ; i++ ) { + oState.order[i][0] = columns[ oState.order[i][0] ]._ColReorder_iOrigCol; + } + + var stateColumnsCopy = $.extend( true, [], oState.columns ); + + for ( i=0, iLen=columns.length ; i<iLen ; i++ ) + { + iOrigColumn = columns[i]._ColReorder_iOrigCol; + + /* Columns */ + oState.columns[ iOrigColumn ] = stateColumnsCopy[i]; + + /* Column reordering */ + oState.ColReorder.push( iOrigColumn ); + } + } + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Mouse drop and drag + */ + + /** + * Add a mouse down listener to a particluar TH element + * @method _fnMouseListener + * @param int i Column index + * @param element nTh TH element clicked on + * @returns void + * @private + */ + "_fnMouseListener": function ( i, nTh ) + { + var that = this; + $(nTh).on( 'mousedown.ColReorder', function (e) { + e.preventDefault(); + that._fnMouseDown.call( that, e, nTh ); + } ); + }, + + + /** + * Mouse down on a TH element in the table header + * @method _fnMouseDown + * @param event e Mouse event + * @param element nTh TH element to be dragged + * @returns void + * @private + */ + "_fnMouseDown": function ( e, nTh ) + { + var that = this; + + /* Store information about the mouse position */ + var target = $(e.target).closest('th, td'); + var offset = target.offset(); + var idx = parseInt( $(nTh).attr('data-column-index'), 10 ); + + if ( idx === undefined ) { + return; + } + + this.s.mouse.startX = e.pageX; + this.s.mouse.startY = e.pageY; + this.s.mouse.offsetX = e.pageX - offset.left; + this.s.mouse.offsetY = e.pageY - offset.top; + this.s.mouse.target = this.s.dt.aoColumns[ idx ].nTh;//target[0]; + this.s.mouse.targetIndex = idx; + this.s.mouse.fromIndex = idx; + + this._fnRegions(); + + /* Add event handlers to the document */ + $(document) + .on( 'mousemove.ColReorder', function (e) { + that._fnMouseMove.call( that, e ); + } ) + .on( 'mouseup.ColReorder', function (e) { + that._fnMouseUp.call( that, e ); + } ); + }, + + + /** + * Deal with a mouse move event while dragging a node + * @method _fnMouseMove + * @param event e Mouse event + * @returns void + * @private + */ + "_fnMouseMove": function ( e ) + { + var that = this; + + 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.css( { + left: e.pageX - this.s.mouse.offsetX, + top: e.pageY - this.s.mouse.offsetY + } ); + + /* Based on the current mouse position, calculate where the insert should go */ + var bSet = false; + var lastToIndex = this.s.mouse.toIndex; + + for ( var i=1, iLen=this.s.aoTargets.length ; i<iLen ; i++ ) + { + if ( e.pageX < this.s.aoTargets[i-1].x + ((this.s.aoTargets[i].x-this.s.aoTargets[i-1].x)/2) ) + { + this.dom.pointer.css( 'left', this.s.aoTargets[i-1].x ); + this.s.mouse.toIndex = this.s.aoTargets[i-1].to; + bSet = true; + break; + } + } + + // The insert element wasn't positioned in the array (less than + // operator), so we put it at the end + if ( !bSet ) + { + this.dom.pointer.css( 'left', this.s.aoTargets[this.s.aoTargets.length-1].x ); + this.s.mouse.toIndex = this.s.aoTargets[this.s.aoTargets.length-1].to; + } + + // Perform reordering if realtime updating is on and the column has moved + if ( this.s.init.bRealtime && lastToIndex !== this.s.mouse.toIndex ) { + this.s.dt.oInstance.fnColReorder( this.s.mouse.fromIndex, this.s.mouse.toIndex ); + this.s.mouse.fromIndex = this.s.mouse.toIndex; + this._fnRegions(); + } + }, + + + /** + * Finish off the mouse drag and insert the column where needed + * @method _fnMouseUp + * @param event e Mouse event + * @returns void + * @private + */ + "_fnMouseUp": function ( e ) + { + var that = this; + + $(document).off( 'mousemove.ColReorder mouseup.ColReorder' ); + + if ( this.dom.drag !== null ) + { + /* Remove the guide elements */ + this.dom.drag.remove(); + this.dom.pointer.remove(); + this.dom.drag = null; + this.dom.pointer = null; + + /* Actually do the reorder */ + this.s.dt.oInstance.fnColReorder( this.s.mouse.fromIndex, this.s.mouse.toIndex ); + this._fnSetColumnIndexes(); + + /* When scrolling we need to recalculate the column sizes to allow for the shift */ + if ( this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== "" ) + { + this.s.dt.oInstance.fnAdjustColumnSizing( false ); + } + + /* Save the state */ + this.s.dt.oInstance.oApi._fnSaveState( this.s.dt ); + + if ( this.s.reorderCallback !== null ) + { + this.s.reorderCallback.call( this ); + } + } + }, + + + /** + * Calculate a cached array with the points of the column inserts, and the + * 'to' points + * @method _fnRegions + * @returns void + * @private + */ + "_fnRegions": function () + { + var aoColumns = this.s.dt.aoColumns; + + this.s.aoTargets.splice( 0, this.s.aoTargets.length ); + + this.s.aoTargets.push( { + "x": $(this.s.dt.nTable).offset().left, + "to": 0 + } ); + + var iToPoint = 0; + for ( var i=0, iLen=aoColumns.length ; i<iLen ; i++ ) + { + /* For the column / header in question, we want it's position to remain the same if the + * position is just to it's immediate left or right, so we only incremement the counter for + * other columns + */ + if ( i != this.s.mouse.fromIndex ) + { + iToPoint++; + } + + if ( aoColumns[i].bVisible ) + { + this.s.aoTargets.push( { + "x": $(aoColumns[i].nTh).offset().left + $(aoColumns[i].nTh).outerWidth(), + "to": iToPoint + } ); + } + } + + /* Disallow columns for being reordered by drag and drop, counting right to left */ + if ( this.s.fixedRight !== 0 ) + { + this.s.aoTargets.splice( this.s.aoTargets.length - this.s.fixedRight ); + } + + /* Disallow columns for being reordered by drag and drop, counting left to right */ + if ( this.s.fixed !== 0 ) + { + this.s.aoTargets.splice( 0, this.s.fixed ); + } + }, + + + /** + * Copy the TH element that is being drags so the user has the idea that they are actually + * moving it around the page. + * @method _fnCreateDragNode + * @returns void + * @private + */ + "_fnCreateDragNode": function () + { + var scrolling = this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== ""; + + var origCell = this.s.dt.aoColumns[ this.s.mouse.targetIndex ].nTh; + var origTr = origCell.parentNode; + var origThead = origTr.parentNode; + var origTable = origThead.parentNode; + var cloneCell = $(origCell).clone(); + + // This is a slightly odd combination of jQuery and DOM, but it is the + // fastest and least resource intensive way I could think of cloning + // the table with just a single header cell in it. + this.dom.drag = $(origTable.cloneNode(false)) + .addClass( 'DTCR_clonedTable' ) + .append( + $(origThead.cloneNode(false)).append( + $(origTr.cloneNode(false)).append( + cloneCell[0] + ) + ) + ) + .css( { + position: 'absolute', + top: 0, + left: 0, + width: $(origCell).outerWidth(), + height: $(origCell).outerHeight() + } ) + .appendTo( 'body' ); + + this.dom.pointer = $('<div></div>') + .addClass( 'DTCR_pointer' ) + .css( { + position: 'absolute', + top: scrolling ? + $('div.dataTables_scroll', this.s.dt.nTableWrapper).offset().top : + $(this.s.dt.nTable).offset().top, + height : scrolling ? + $('div.dataTables_scroll', this.s.dt.nTableWrapper).height() : + $(this.s.dt.nTable).height() + } ) + .appendTo( 'body' ); + }, + + /** + * Clean up ColReorder memory references and event handlers + * @method _fnDestroy + * @returns void + * @private + */ + "_fnDestroy": function () + { + var i, iLen; + + for ( i=0, iLen=this.s.dt.aoDrawCallback.length ; i<iLen ; i++ ) + { + if ( this.s.dt.aoDrawCallback[i].sName === 'ColReorder_Pre' ) + { + this.s.dt.aoDrawCallback.splice( i, 1 ); + break; + } + } + + $(this.s.dt.nTHead).find( '*' ).off( '.ColReorder' ); + + $.each( this.s.dt.aoColumns, function (i, column) { + $(column.nTh).removeAttr('data-column-index'); + } ); + + this.s.dt._colReorder = null; + this.s = null; + }, + + + /** + * Add a data attribute to the column headers, so we know the index of + * the row to be reordered. This allows fast detection of the index, and + * for this plug-in to work with FixedHeader which clones the nodes. + * @private + */ + "_fnSetColumnIndexes": function () + { + $.each( this.s.dt.aoColumns, function (i, column) { + $(column.nTh).attr('data-column-index', i); + } ); + } +}; + + + + + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Static parameters + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + + +/** + * ColReorder default settings for initialisation + * @namespace + * @static + */ +ColReorder.defaults = { + /** + * Predefined ordering for the columns that will be applied automatically + * on initialisation. If not specified then the order that the columns are + * found to be in the HTML is the order used. + * @type array + * @default null + * @static + * @example + * // Using the `oColReorder` option in the DataTables options object + * $('#example').dataTable( { + * "sDom": 'Rlfrtip', + * "oColReorder": { + * "aiOrder": [ 4, 3, 2, 1, 0 ] + * } + * } ); + * + * @example + * // Using `new` constructor + * $('#example').dataTable() + * + * new $.fn.dataTable.ColReorder( '#example', { + * "aiOrder": [ 4, 3, 2, 1, 0 ] + * } ); + */ + aiOrder: null, + + /** + * Redraw the table's column ordering as the end user draws the column + * (`true`) or wait until the mouse is released (`false` - default). Note + * that this will perform a redraw on each reordering, which involves an + * Ajax request each time if you are using server-side processing in + * DataTables. + * @type boolean + * @default false + * @static + * @example + * // Using the `oColReorder` option in the DataTables options object + * $('#example').dataTable( { + * "sDom": 'Rlfrtip', + * "oColReorder": { + * "bRealtime": true + * } + * } ); + * + * @example + * // Using `new` constructor + * $('#example').dataTable() + * + * new $.fn.dataTable.ColReorder( '#example', { + * "bRealtime": true + * } ); + */ + bRealtime: false, + + /** + * Indicate how many columns should be fixed in position (counting from the + * left). This will typically be 1 if used, but can be as high as you like. + * @type int + * @default 0 + * @static + * @example + * // Using the `oColReorder` option in the DataTables options object + * $('#example').dataTable( { + * "sDom": 'Rlfrtip', + * "oColReorder": { + * "iFixedColumns": 1 + * } + * } ); + * + * @example + * // Using `new` constructor + * $('#example').dataTable() + * + * new $.fn.dataTable.ColReorder( '#example', { + * "iFixedColumns": 1 + * } ); + */ + iFixedColumns: 0, + + /** + * As `iFixedColumnsRight` but counting from the right. + * @type int + * @default 0 + * @static + * @example + * // Using the `oColReorder` option in the DataTables options object + * $('#example').dataTable( { + * "sDom": 'Rlfrtip', + * "oColReorder": { + * "iFixedColumnsRight": 1 + * } + * } ); + * + * @example + * // Using `new` constructor + * $('#example').dataTable() + * + * new $.fn.dataTable.ColReorder( '#example', { + * "iFixedColumnsRight": 1 + * } ); + */ + iFixedColumnsRight: 0, + + /** + * Callback function that is fired when columns are reordered + * @type function():void + * @default null + * @static + * @example + * // Using the `oColReorder` option in the DataTables options object + * $('#example').dataTable( { + * "sDom": 'Rlfrtip', + * "oColReorder": { + * "fnReorderCallback": function () { + * alert( 'Columns reordered' ); + * } + * } + * } ); + * + * @example + * // Using `new` constructor + * $('#example').dataTable() + * + * new $.fn.dataTable.ColReorder( '#example', { + * "fnReorderCallback": function () { + * alert( 'Columns reordered' ); + * } + * } ); + */ + fnReorderCallback: null +}; + + + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Constants + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + +/** + * ColReorder version + * @constant version + * @type String + * @default As code + */ +ColReorder.version = "1.1.3"; + + + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * DataTables interfaces + * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + +// Expose +$.fn.dataTable.ColReorder = ColReorder; +$.fn.DataTable.ColReorder = ColReorder; + + +// Register a new feature with DataTables +if ( typeof $.fn.dataTable == "function" && + typeof $.fn.dataTableExt.fnVersionCheck == "function" && + $.fn.dataTableExt.fnVersionCheck('1.9.3') ) +{ + $.fn.dataTableExt.aoFeatures.push( { + "fnInit": function( settings ) { + var table = settings.oInstance; + + if ( ! settings._colReorder ) { + var dtInit = settings.oInit; + var opts = dtInit.colReorder || dtInit.oColReorder || {}; + + new ColReorder( settings, opts ); + } + else { + table.oApi._fnLog( settings, 1, "ColReorder attempted to initialise twice. Ignoring second" ); + } + + return null; /* No node for DataTables to insert */ + }, + "cFeature": "R", + "sFeature": "ColReorder" + } ); +} +else { + alert( "Warning: ColReorder requires DataTables 1.9.3 or greater - www.datatables.net/download"); +} + + +// API augmentation +if ( $.fn.dataTable.Api ) { + $.fn.dataTable.Api.register( 'colReorder.reset()', function () { + return this.iterator( 'table', function ( ctx ) { + ctx._colReorder.fnReset(); + } ); + } ); + + $.fn.dataTable.Api.register( 'colReorder.order()', function ( set ) { + if ( set ) { + return this.iterator( 'table', function ( ctx ) { + ctx._colReorder.fnOrder( set ); + } ); + } + + return this.context.length ? + this.context[0]._colReorder.fnOrder() : + null; + } ); +} + +return ColReorder; +}; // /factory + + +// Define as an AMD module if possible +if ( typeof define === 'function' && define.amd ) { + define( ['jquery', 'datatables'], factory ); +} +else if ( typeof exports === 'object' ) { + // Node/CommonJS + factory( require('jquery'), require('datatables') ); +} +else if ( jQuery && !jQuery.fn.dataTable.ColReorder ) { + // Otherwise simply initialise as normal, stopping multiple evaluation + factory( jQuery, jQuery.fn.dataTable ); +} + + +})(window, document);
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.colResize.js b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.colResize.js index 2712750a..6ef9907a 100644 --- a/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.colResize.js +++ b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.colResize.js @@ -1,846 +1,943 @@ -/*! ColResize 0.0.10 - */ - -/** - * @summary ColResize - * @description Provide the ability to resize columns in a DataTable - * @version 0.0.10 - * @file dataTables.colResize.js - * @author Silvacom Ltd. - * - * For details please refer to: http://www.datatables.net - * - * Special thank to everyone who has contributed to this plug in - * - dykstrad - * - tdillan (for 0.0.3 and 0.0.5 bug fixes) - * - kylealonius (for 0.0.8 bug fix) - * - the86freak (for 0.0.9 bug fix) - */ - -(function (window, document, undefined) { - - /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * DataTables plug-in API functions test - * - * This are required by ColResize in order to perform the tasks required, and also keep this - * code portable, to be used for other column resize projects with DataTables, if needed. - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - - var factory = function ($, DataTable) { - "use strict"; - - /** - * Plug-in for DataTables which will resize the columns depending on the handle clicked - * @method $.fn.dataTableExt.oApi.fnColResize - * @param object oSettings DataTables settings object - automatically added by DataTables! - * @param int iCol Take the column to be resized - * @returns void - */ - $.fn.dataTableExt.oApi.fnColResize = function (oSettings, iCol) { - var v110 = $.fn.dataTable.Api ? true : false; - - /* - * Update DataTables' event handlers - */ - - /* Fire an event so other plug-ins can update */ - $(oSettings.oInstance).trigger('column-resize', [ oSettings, { - "iCol": iCol - } ]); - }; - - /** - * ColResize provides column resize control for DataTables - * @class ColResize - * @constructor - * @param {object} dt DataTables settings object - * @param {object} opts ColResize options - */ - var ColResize = function (dt, opts) { - var oDTSettings; - - if ($.fn.dataTable.Api) { - oDTSettings = new $.fn.dataTable.Api(dt).settings()[0]; - } - // 1.9 compatibility - else if (dt.fnSettings) { - // DataTables object, convert to the settings object - oDTSettings = dt.fnSettings(); - } - else if (typeof dt === 'string') { - // jQuery selector - if ($.fn.dataTable.fnIsDataTable($(dt)[0])) { - oDTSettings = $(dt).eq(0).dataTable().fnSettings(); - } +var dt; +(function (dt) { + var ColResize = (function () { + function ColResize($, api, settings) { + this.$ = $; + this.tableSize = -1; + this.initialized = false; + this.dt = {}; + this.dom = { + fixedLayout: false, + fixedHeader: null, + winResizeTimer: null, + mouse: { + startX: -1, + startWidth: null + }, + table: { + prevWidth: null + }, + origState: true, + resize: false, + scrollHead: null, + scrollHeadTable: null, + scrollFoot: null, + scrollFootTable: null, + scrollFootInner: null, + scrollBody: null, + scrollBodyTable: null, + scrollX: false, + scrollY: false + }; + this.settings = this.$.extend(true, {}, dt.ColResize.defaultSettings, settings); + this.dt.settings = api.settings()[0]; + this.dt.api = api; + this.dt.settings.colResize = this; + this.registerCallbacks(); + } + ColResize.prototype.initialize = function () { + var _this = this; + this.$.each(this.dt.settings.aoColumns, function (i, col) { + return _this.setupColumn(col); + }); + + //Initialize fixedHeader if specified + if (this.settings.fixedHeader) + this.setupFixedHeader(); + + //Save scroll head and body if found + this.dom.scrollHead = this.$('div.' + this.dt.settings.oClasses.sScrollHead, this.dt.settings.nTableWrapper); + this.dom.scrollHeadInner = this.$('div.' + this.dt.settings.oClasses.sScrollHeadInner, this.dom.scrollHead); + this.dom.scrollHeadTable = this.$('div.' + this.dt.settings.oClasses.sScrollHeadInner + ' > table', this.dom.scrollHead); + + this.dom.scrollFoot = this.$('div.' + this.dt.settings.oClasses.sScrollFoot, this.dt.settings.nTableWrapper); + this.dom.scrollFootInner = this.$('div.' + this.dt.settings.oClasses.sScrollFootInner, this.dom.scrollFoot); + this.dom.scrollFootTable = this.$('div.' + this.dt.settings.oClasses.sScrollFootInner + ' > table', this.dom.scrollFoot); + + this.dom.scrollBody = this.$('div.' + this.dt.settings.oClasses.sScrollBody, this.dt.settings.nTableWrapper); + this.dom.scrollBodyTable = this.$('> table', this.dom.scrollBody); + this.dt.api.on('draw.dt', this.onDraw.bind(this)); + if (this.dom.scrollFootTable) { + this.dt.api.on('colPinFcDraw.dt', function (e, colPin, data) { + if (data.leftClone.header) + _this.$('tfoot', data.leftClone.header).remove(); + if (data.leftClone.footer) + _this.$('thead', data.leftClone.footer).remove(); + if (data.rightClone.header) + _this.$('tfoot', data.rightClone.header).remove(); + if (data.rightClone.footer) + _this.$('thead', data.rightClone.footer).remove(); + }); } - else if (dt.nodeName && dt.nodeName.toLowerCase() === 'table') { - // Table node - if ($.fn.dataTable.fnIsDataTable(dt.nodeName)) { - oDTSettings = $(dt.nodeName).dataTable().fnSettings(); - } + + this.dom.scrollX = this.dt.settings.oInit.sScrollX === undefined ? false : true; + this.dom.scrollY = this.dt.settings.oInit.sScrollY === undefined ? false : true; + + //SaveTableWidth + this.dt.settings.sTableWidthOrig = this.$(this.dt.settings.nTable).width(); + this.updateTableSize(); + + this.dt.settings.oFeatures.bAutoWidthOrig = this.dt.settings.oFeatures.bAutoWidth; + this.dt.settings.oFeatures.bAutoWidth = false; + + if (this.dt.settings.oInit.bStateSave && this.dt.settings.oLoadedState) { + this.loadState(this.dt.settings.oLoadedState); } - else if (dt instanceof jQuery) { - // jQuery object - if ($.fn.dataTable.fnIsDataTable(dt[0])) { - oDTSettings = dt.eq(0).dataTable().fnSettings(); - } + + this.onDraw(); + this.dom.table.preWidth = parseFloat(this.dom.scrollBodyTable.css('width')); + + if (!this.dom.scrollX && this.dom.scrollY && this.settings.fixedLayout && this.dt.settings._reszEvt) { + //We have to manually resize columns on window resize + var eventName = 'resize.DT-' + this.dt.settings.sInstance; + this.$(window).off(eventName); + this.$(window).on(eventName, function () { + _this.proportionallyColumnSizing(); + //api._fnAdjustColumnSizing(this.dt.settings); + }); } - else { - // DataTables settings object - oDTSettings = dt; - } - - // Convert from camelCase to Hungarian, just as DataTables does - if ($.fn.dataTable.camelToHungarian) { - $.fn.dataTable.camelToHungarian(ColResize.defaults, opts || {}); - } - - - /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * Public class variables - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - - /** - * @namespace Settings object which contains customizable information for ColResize instance - */ - this.s = { - /** - * DataTables settings object - * @property dt - * @type Object - * @default null - */ - "dt": null, - - /** - * Initialisation object used for this instance - * @property init - * @type object - * @default {} - */ - "init": $.extend(true, {}, ColResize.defaults, opts), - - /** - * @namespace Information used for the mouse drag - */ - "mouse": { - "startX": -1, - "startY": -1, - "targetIndex": -1, - "targetColumn": -1, - "neighbourIndex": -1, - "neighbourColumn": -1 - }, - /** - * Status variable keeping track of mouse down status - * @property isMousedown - * @type boolean - * @default false - */ - "isMousedown": false - }; + if (this.dom.scrollX || this.dom.scrollY) { + this.dt.api.on('column-sizing.dt', this.fixFootAndHeadTables.bind(this)); + this.dt.api.on('column-visibility.dt', this.fixFootAndHeadTables.bind(this)); + } + this.initialized = true; + this.dt.settings.oApi._fnCallbackFire(this.dt.settings, 'colResizeInitCompleted', 'colResizeInitCompleted', [this]); + }; - /** - * @namespace Common and useful DOM elements for the class instance - */ - this.dom = { - /** - * Resizing element (the one the mouse is resizing) - * @property resize - * @type element - * @default null - */ - "resizeCol": null, - - /** - * Resizing element neighbour (the column next to the one the mouse is resizing) - * This is for fixed table resizing. - * @property resize - * @type element - * @default null - */ - "resizeColNeighbour": null, - - /** - * Array of events to be restored, used for overriding existing events from other plugins for a time. - * @property restoreEvents - * @type array - * @default [] - */ - "restoreEvents": [] + ColResize.prototype.setupColumn = function (col) { + var _this = this; + var $th = this.$(col.nTh); + if (col.resizable === false) + return; + + // listen to mousemove event for resize + $th.on('mousemove.ColResize', function (e) { + if (_this.dom.resize || col.resizable === false) + return; + + /* Store information about the mouse position */ + var $thTarget = e.target.nodeName.toUpperCase() == 'TH' ? _this.$(e.target) : _this.$(e.target).closest('TH'); + var offset = $thTarget.offset(); + var nLength = $thTarget.innerWidth(); + + /* are we on the col border (if so, resize col) */ + if (Math.abs(e.pageX - Math.round(offset.left + nLength)) <= 5) { + $thTarget.css({ 'cursor': 'col-resize' }); + } else + $thTarget.css({ 'cursor': 'pointer' }); + }); + + //Save the original width + col._ColResize_sWidthOrig = col.sWidthOrig; + col.initWidth = $th.width(); + col.minWidthOrig = col.minWidth; + + $th.on('dblclick.ColResize', function (e) { + _this.onDblClick(e, $th, col); + }); + + $th.off('mousedown.ColReorder'); + + // listen to mousedown event + $th.on('mousedown.ColResize', function (e) { + return _this.onMouseDown(e, col); + }); + }; + + ColResize.prototype.setupFixedHeader = function () { + var fhSettings = this.settings.fixedHeader === true ? undefined : this.settings.fixedHeader; + + //If left or right option was set to true disable resizing for the first or last column + if (this.$.isPlainObject(fhSettings)) { + var columns = this.dt.settings.aoColumns; + if (fhSettings.left === true) + columns[0].resizable = false; + if (fhSettings.right === true) + columns[columns.length - 1].resizable = false; + } + + this.dom.fixedHeader = new this.$.fn.dataTable.FixedHeader(this.dt.api, fhSettings); + var origUpdateClones = this.dom.fixedHeader._fnUpdateClones; + var that = this; + + //FixeHeader doesn't have any callback after updating the clones so we have to wrap the orig function + this.dom.fixedHeader._fnUpdateClones = function () { + origUpdateClones.apply(this, arguments); + that.memorizeFixedHeaderNodes(); }; + //As we missed the first call of _fnUpdateClones we have to call memorizeFixedHeaderNodes function manually + this.memorizeFixedHeaderNodes(); + }; - /* Constructor logic */ - this.s.dt = oDTSettings.oInstance.fnSettings(); - this.s.dt._colResize = this; - this._fnConstruct(); - - /* Add destroy callback */ - oDTSettings.oApi._fnCallbackReg(oDTSettings, 'aoDestroyCallback', $.proxy(this._fnDestroy, this), 'ColResize'); - - return this; - }; - - - ColResize.prototype = { - /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * Public methods - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - - /** - * Reset the column widths to the original widths that was detected on - * start up. - * @return {this} Returns `this` for chaining. - * - * @example - * // DataTables initialisation with ColResize - * var table = $('#example').dataTable( { - * "sDom": 'Zlfrtip' - * } ); - * - * // Add click event to a button to reset the ordering - * $('#resetOrdering').click( function (e) { - * e.preventDefault(); - * $.fn.dataTable.ColResize( table ).fnReset(); - * } ); - */ - "fnReset": function () { - var a = []; - for (var i = 0, iLen = this.s.dt.aoColumns.length; i < iLen; i++) { - this.s.dt.aoColumns[i].width = this.s.dt.aoColumns[i]._ColResize_iOrigWidth; + ColResize.prototype.memorizeFixedHeaderNodes = function () { + var _this = this; + var fhSettings = this.dom.fixedHeader.fnGetSettings(); + var fhCache = fhSettings.aoCache; + var i, col; + for (i = 0; i < fhCache.length; i++) { + var type = fhCache[i].sType; + var propName; + var selector; + switch (type) { + case 'fixedHeader': + propName = 'fhTh'; + selector = 'thead>tr>th'; + this.dt.settings.fhTHead = fhCache[i].nNode; + break; + case 'fixedFooter': + propName = 'fhTf'; + selector = 'thead>tr>th'; + + //prepend a cloned thead to the floating footer table so that resizing will work correctly + var tfoot = this.$(fhCache[i].nNode); + var thead = this.$(this.dt.settings.nTHead).clone().css({ height: 0, visibility: 'hidden' }); + this.$('tr', thead).css('height', 0); + this.$('tr>th', thead).css({ + 'height': 0, + 'padding-bottom': 0, + 'padding-top': 0, + 'border-bottom-width': 0, + 'border-top-width': 0, + 'line-height': 0 + }); + tfoot.prepend(thead); + this.$('tfoot>tr>th', tfoot).css('width', ''); + this.dt.settings.fhTFoot = fhCache[i].nNode; + break; + default: + continue; } - this.s.dt.adjust().draw(); + this.$(selector, fhCache[i].nNode).each(function (j, th) { + col = _this.getVisibleColumn(j); + col[propName] = th; + }); + } + }; - return this; - }, + //zero based index + ColResize.prototype.getVisibleColumn = function (idx) { + var columns = this.dt.settings.aoColumns; + var currVisColIdx = -1; + for (var i = 0; i < columns.length; i++) { + if (!columns[i].bVisible) + continue; + currVisColIdx++; + if (currVisColIdx == idx) + return columns[i]; + } + return null; + }; + ColResize.prototype.updateTableSize = function () { + if (this.dom.scrollX && this.dom.scrollHeadTable.length) + this.tableSize = this.dom.scrollHeadTable.width(); + else + this.tableSize = -1; + }; - /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * Private methods (they are of course public in JS, but recommended as private) - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ + ColResize.prototype.proportionallyColumnSizing = function () { + var _this = this; + var prevWidths = [], newWidths = [], prevWidth, newWidth, newTableWidth, prevTableWidth, moveLength, multiplier, cWidth, i, j, delay = 500, prevTotalColWidths = 0, currTotalColWidths, columnRestWidths = [], columns = this.dt.settings.aoColumns, bodyTableColumns = this.$('thead th', this.dom.scrollBodyTable), headTableColumns = this.$('thead th', this.dom.scrollHeadTable), footTableColumns = this.dom.scrollFootTable.length ? this.$('thead th', this.dom.scrollFootTable) : [], visColumns = []; - /** - * Constructor logic - * @method _fnConstruct - * @returns void - * @private - */ - "_fnConstruct": function () { - var that = this; - var iLen = that.s.dt.aoColumns.length; - var i; + for (i = 0; i < columns.length; i++) { + if (!columns[i].bVisible) + continue; + visColumns.push(columns[i]); + columnRestWidths.push(0); //set default value + } - that._fnSetupMouseListeners(); + for (i = 0; i < bodyTableColumns.length; i++) { + cWidth = parseFloat(bodyTableColumns[i].style.width); + prevTotalColWidths += cWidth; + prevWidths.push(cWidth); + } - /* Add event handlers for the resize handles */ - for (i = 0; i < iLen; i++) { - /* Mark the original column width for later reference */ - this.s.dt.aoColumns[i]._ColResize_iOrigWidth = this.s.dt.aoColumns[i].width; + for (i = 0; i < bodyTableColumns.length; i++) { + bodyTableColumns[i].style.width = ''; + } + + //Get the new table width calculated by the browser + newTableWidth = parseFloat(this.dom.scrollBodyTable.css('width')); + + //Get the old table width + prevTableWidth = this.dom.table.preWidth; + moveLength = newTableWidth - prevTableWidth; + if (moveLength == 0) { + for (i = 0; i < bodyTableColumns.length; i++) { + bodyTableColumns[i].style.width = prevWidths[i] + 'px'; } + return; + } - this._fnSetColumnIndexes(); - - /* State saving */ - this.s.dt.oApi._fnCallbackReg( this.s.dt, 'aoStateSaveParams', function (oS, oData) { - that._fnStateSave.call(that, oData); - }, "ColResize_State" ); - - // State loading - this._fnStateLoad(); - }, - - /** - * @method _fnStateSave - * @param object oState DataTables state - * @private - */ - "_fnStateSave": function (oState) { - this.s.dt.aoColumns.forEach(function(col, index) { - oState.columns[index].width = col.sWidthOrig; - }); - }, - - /** - * If state has been loaded, apply the saved widths to the columns - * @method _fnStateLoad - * @private - */ - "_fnStateLoad": function() { - var that = this, - loadedState = this.s.dt.oLoadedState; - if (loadedState && loadedState.columns) { - var colStates = loadedState.columns, - currCols = this.s.dt.aoColumns; - // Only apply the saved widths if the number of columns is the same. - // Otherwise, we don't know if we're applying the width to the correct column. - if (colStates.length > 0 && colStates.length === currCols.length) { - colStates.forEach(function(state, index) { - var col = that.s.dt.aoColumns[index]; - if (state.width) { - col.sWidthOrig = col.sWidth = state.width; - } - }); + //var tot = 0; + currTotalColWidths = prevTotalColWidths; + for (i = 0; i < visColumns.length; i++) { + //For each column calculate the new width + prevWidth = prevWidths[i]; + multiplier = (+(prevWidth / prevTotalColWidths).toFixed(2)); + + //tot += multiplier; + newWidth = prevWidth + (moveLength * multiplier) + columnRestWidths[i]; + currTotalColWidths -= prevWidth; + + //Check whether the column can be resized to the new calculated value + //if not, set it to the min or max width depends on the moveLength value + if (!this.canResizeColumn(visColumns[i], newWidth)) { + cWidth = moveLength > 0 ? this.getColumnMaxWidth(visColumns[i]) : this.getColumnMinWidth(visColumns[i]); + var rest = newWidth - cWidth; + newWidth = cWidth; + + for (j = (i + 1); j < visColumns.length; j++) { + columnRestWidths[j] += rest * (+(visColumns[j] / currTotalColWidths).toFixed(2)); } } - }, - - /** - * Remove events of type from obj add it to restoreEvents array to be restored at a later time - * @param until string flag when to restore the event - * @param obj Object to remove events from - * @param type type of event to remove - * @param namespace namespace of the event being removed - */ - "_fnDelayEvents": function (until, obj, type, namespace) { - var that = this; - //Get the events for the object - var events = $._data($(obj).get(0), 'events'); - $.each(events, function (i, o) { - //If the event type matches - if (i == type) { - //Loop through the possible many events with that type - $.each(o, function (k, v) { - //Somehow it is possible for the event to be undefined make sure it is defined first - if (v) { - if (namespace) { - //Add the event to the array of events to be restored later - that.dom.restoreEvents.push({"until": until, "obj": obj, "type": v.type, "namespace": v.namespace, "handler": v.handler}); - //If the namespace matches - if (v.namespace == namespace) { - //Turn off/unbind the event - $(obj).off(type + "." + namespace); - } - } else { - //Add the event to the array of events to be restored later - that.dom.restoreEvents.push({"until": until, "obj": obj, "type": v.type, "namespace": null, "handler": v.handler}); - //Turn off/unbind the event - $(obj).off(type); - } - } - }); - } - }); - }, - - /** - * Loop through restoreEvents array and restore the events on the elements provided - */ - "_fnRestoreEvents": function (until) { - var that = this; - //Loop through the events to be restored - var i; - for (i = that.dom.restoreEvents.length; i--;) { - if (that.dom.restoreEvents[i].until == undefined || that.dom.restoreEvents[i].until == null || that.dom.restoreEvents[i].until == until) { - if (that.dom.restoreEvents[i].namespace) { - //Turn on the event for the object provided - $(that.dom.restoreEvents[i].obj).off(that.dom.restoreEvents[i].type + "." + that.dom.restoreEvents[i].namespace).on(that.dom.restoreEvents[i].type + "." + that.dom.restoreEvents[i].namespace, that.dom.restoreEvents[i].handler); - that.dom.restoreEvents.splice(i, 1); - } else { - //Turn on the event for the object provided - $(that.dom.restoreEvents[i].obj).off(that.dom.restoreEvents[i].type).on(that.dom.restoreEvents[i].type, that.dom.restoreEvents[i].handler); - that.dom.restoreEvents.splice(i, 1); - } - } + newWidths.push(newWidth); + } + + //Apply the calculated column widths to the headers cells + var tablesWidth = this.dom.scrollBodyTable.outerWidth() + 'px'; + for (i = 0; i < headTableColumns.length; i++) { + headTableColumns[i].style.width = newWidths[i] + 'px'; + } + this.dom.scrollHeadTable.css('width', tablesWidth); + this.dom.scrollHeadInner.css('width', tablesWidth); + + for (i = 0; i < bodyTableColumns.length; i++) { + bodyTableColumns[i].style.width = newWidths[i] + 'px'; + } + + if (this.dom.scrollFootTable.length) { + for (i = 0; i < footTableColumns.length; i++) { + footTableColumns[i].style.width = newWidths[i] + 'px'; } - }, + this.dom.scrollFootTable[0].style.width = tablesWidth; + this.dom.scrollFootInner[0].style.width = tablesWidth; + } - /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * Mouse drop and drag - */ + //console.log('moveLength: ' + moveLength + ' multiplier: ' + tot); + //console.log(newWidths); + this.dom.table.preWidth = newTableWidth; + + //Call afterResizing function after the window stops resizing + if (this.dom.winResizeTimer) + clearTimeout(this.dom.winResizeTimer); + this.dom.winResizeTimer = setTimeout(function () { + _this.afterResizing(); + _this.dom.winResizeTimer = null; + }, delay); + }; - "_fnSetupMouseListeners":function() { - var that = this; - $(that.s.dt.nTableWrapper).off("mouseenter.ColResize").on("mouseenter.ColResize","th",function(e) { - e.preventDefault(); - that._fnMouseEnter.call(that, e, this); - }); - $(that.s.dt.nTableWrapper).off("mouseleave.ColResize").on("mouseleave.ColResize","th",function(e) { - e.preventDefault(); - that._fnMouseLeave.call(that, e, this); - }); - }, - - /** - * Add mouse listeners to the resize handle on TH element - * @method _fnMouseListener - * @param i Column index - * @param nTh TH resize handle element clicked on - * @returns void - * @private - */ - "_fnMouseListener": function (i, nTh) { - var that = this; - $(nTh).off('mouseenter.ColResize').on('mouseenter.ColResize', function (e) { - e.preventDefault(); - that._fnMouseEnter.call(that, e, nTh); - }); - $(nTh).off('mouseleave.ColResize').on('mouseleave.ColResize', function (e) { - e.preventDefault(); - that._fnMouseLeave.call(that, e, nTh); - }); - }, - - /** - * - * @param e Mouse event - * @param nTh TH element that the mouse is over - */ - "_fnMouseEnter": function (e, nTh) { - var that = this; - if(!that.s.isMousedown) { - //Once the mouse has entered the cell add mouse move event to see if the mouse is over resize handle - $(nTh).off('mousemove.ColResizeHandle').on('mousemove.ColResizeHandle', function (e) { - e.preventDefault(); - that._fnResizeHandleCheck.call(that, e, nTh); - }); + ColResize.prototype.getColumnIndex = function (col) { + //Get the current column position + var colIdx = -1; + for (var i = 0; i < this.dt.settings.aoColumns.length; i++) { + if (this.dt.settings.aoColumns[i] === col) { + colIdx = i; + break; } - }, - - /** - * Clear mouse events when the mouse has left the th - * @param e Mouse event - * @param nTh TH element that the mouse has just left - */ - "_fnMouseLeave": function (e, nTh) { - //Once the mouse has left the TH make suure to remove the mouse move listener - $(nTh).off('mousemove.ColResizeHandle'); - }, - - /** - * Mouse down on a TH element in the table header - * @method _fnMouseDown - * @param event e Mouse event - * @param element nTh TH element to be resized - * @returns void - * @private - */ - "_fnMouseDown": function (e, nTh) { - var that = this; - - that.s.isMousedown = true; + } + return colIdx; + }; - /* Store information about the mouse position */ - var target = $(e.target).closest('th, td'); - var offset = target.offset(); - - /* Store information about the mouse position for resize calculations in mouse move function */ - this.s.mouse.startX = e.pageX; - this.s.mouse.startY = e.pageY; - - //Store the indexes of the columns the mouse is down on - var idx = that.dom.resizeCol[0].cellIndex; - - // the last column has no 'right-side' neighbour - // with fixed this can make the table smaller - if (that.dom.resizeColNeighbour[0] === undefined){ - var idxNeighbour = 0; + ColResize.prototype.getColumnEvent = function (th, type, ns) { + var event; + var thEvents = this.$._data(th, "events"); + this.$.each(thEvents[type] || [], function (idx, handler) { + if (handler.namespace === ns) + event = handler; + }); + return event; + }; + + ColResize.prototype.loadState = function (data) { + var _this = this; + var i, col; + + var onInit = function () { + if (_this.settings.fixedLayout) { + _this.setTablesLayout('fixed'); } else { - var idxNeighbour = that.dom.resizeColNeighbour[0].cellIndex; + _this.setTablesLayout('auto'); } - - + if (!data.colResize) { + if (_this.dt.settings.oFeatures.bAutoWidthOrig) + _this.dt.settings.oFeatures.bAutoWidth = true; + else if (_this.dt.settings.sTableWidthOrig) + _this.$(_this.dt.settings.nTable).width(_this.dt.settings.sTableWidthOrig); + + for (i = 0; i < _this.dt.settings.aoColumns.length; i++) { + col = _this.dt.settings.aoColumns[i]; + if (col._ColResize_sWidthOrig) { + col.sWidthOrig = col._ColResize_sWidthOrig; + } + } + _this.dom.origState = true; + } else { + var columns = data.colResize.columns || []; + var wMap = {}; - if (idx === undefined) { - return; - } + if (_this.dt.settings.oFeatures.bAutoWidth) { + _this.dt.settings.oFeatures.bAutoWidth = false; + } - this.s.mouse.targetIndex = idx; - this.s.mouse.targetColumn = this.s.dt.aoColumns[ idx ]; - - this.s.mouse.neighbourIndex = idxNeighbour; - this.s.mouse.neighbourColumn = this.s.dt.aoColumns[ idxNeighbour ]; - - /* Add event handlers to the document */ - $(document) - .off('mousemove.ColResize').on('mousemove.ColResize', function (e) { - that._fnMouseMove.call(that, e); - }) - .off('mouseup.ColResize').on('mouseup.ColResize', function (e) { - that._fnMouseUp.call(that, e); - }); - }, - - /** - * Deal with a mouse move event while dragging to resize a column - * @method _fnMouseMove - * @param e Mouse event - * @returns void - * @private - */ - "_fnMouseMove": function (e) { - var that = this; - - var offset = $(that.s.mouse.targetColumn.nTh).offset(); - var relativeX = (e.pageX - offset.left); - var distFromLeft = relativeX; - var distFromRight = $(that.s.mouse.targetColumn.nTh).outerWidth() - relativeX - 1; - - //Change in mouse x position - var dx = e.pageX - that.s.mouse.startX; - //Get the minimum width of the column (default minimum 10px) - var minColumnWidth = Math.max(parseInt($(that.s.mouse.targetColumn.nTh).css('min-width')), 10); - //Store the previous width of the column - var prevWidth = $(that.s.mouse.targetColumn.nTh).width(); - //As long as the cursor is past the handle, resize the columns - if ((dx > 0 && distFromRight <= 0) || (dx < 0 && distFromRight >= 0)) { - if (!that.s.init.tableWidthFixed) { - //As long as the width is larger than the minimum - var newColWidth = Math.max(minColumnWidth, prevWidth + dx); - //Get the width difference (take into account the columns minimum width) - var widthDiff = newColWidth - prevWidth; - var colResizeIdx = parseInt(that.dom.resizeCol.attr("data-column-index")); - //Set datatable column widths - that.s.mouse.targetColumn.sWidthOrig = that.s.mouse.targetColumn.sWidth = that.s.mouse.targetColumn.width = newColWidth + "px"; - var domCols = $(that.s.dt.nTableWrapper).find("th[data-column-index='"+colResizeIdx+"']"); - //For each table expand the width by the same amount as the column - //This accounts for other datatable plugins like FixedColumns - domCols.parents("table").each(function() { - if(!$(this).parent().hasClass("DTFC_LeftBodyLiner")) { - var newWidth = $(this).width() + widthDiff; - $(this).width(newWidth); - } else { - var newWidth =$(that.s.dt.nTableWrapper).find(".DTFC_LeftHeadWrapper").children("table").width(); - $(this).parents(".DTFC_LeftWrapper").width(newWidth); - $(this).parent().width(newWidth+15); - $(this).width(newWidth); - } - }); - //Apply the new width to the columns after the table has been resized - domCols.width(that.s.mouse.targetColumn.width); - } else { - //A neighbour column must exist in order to resize a column in a table with a fixed width - if (that.s.mouse.neighbourColumn) { - //Get the minimum width of the neighbor column (default minimum 10px) - var minColumnNeighbourWidth = Math.max(parseInt($(that.s.mouse.neighbourColumn.nTh).css('min-width')), 10); - //Store the previous width of the neighbour column - var prevNeighbourWidth = $(that.s.mouse.neighbourColumn.nTh).width(); - //As long as the width is larger than the minimum - var newColWidth = Math.max(minColumnWidth, prevWidth + dx); - var newColNeighbourWidth = Math.max(minColumnNeighbourWidth, prevNeighbourWidth - dx); - //Get the width difference (take into account the columns minimum width) - var widthDiff = newColWidth - prevWidth; - var widthDiffNeighbour = newColNeighbourWidth - prevNeighbourWidth; - //Get the column index for the column being changed - var colResizeIdx = parseInt(that.dom.resizeCol.attr("data-column-index")); - var neighbourColResizeIdx = parseInt(that.dom.resizeColNeighbour.attr("data-column-index")); - //Set datatable column widths - that.s.mouse.neighbourColumn.sWidthOrig = that.s.mouse.neighbourColumn.sWidth = that.s.mouse.neighbourColumn.width = newColNeighbourWidth + "px"; - that.s.mouse.targetColumn.sWidthOrig = that.s.mouse.targetColumn.sWidth = that.s.mouse.targetColumn.width = newColWidth + "px"; - //Get list of columns based on column index in all affected tables tables. This accounts for other plugins like FixedColumns - var domNeighbourCols = $(that.s.dt.nTableWrapper).find("th[data-column-index='" + neighbourColResizeIdx + "']"); - var domCols = $(that.s.dt.nTableWrapper).find("th[data-column-index='" + colResizeIdx + "']"); - //If dx if positive (the width is getting larger) shrink the neighbour columns first - if(dx>0) { - domNeighbourCols.width(that.s.mouse.neighbourColumn.width); - domCols.width(that.s.mouse.targetColumn.width); - } else { - //Apply the new width to the columns then to the neighbour columns - domCols.width(that.s.mouse.targetColumn.width); - domNeighbourCols.width(that.s.mouse.neighbourColumn.width); - } - } + if (_this.dom.scrollX && data.colResize.tableSize > 0) { + _this.dom.scrollHeadTable.width(data.colResize.tableSize); + _this.dom.scrollHeadInner.width(data.colResize.tableSize); + _this.dom.scrollBodyTable.width(data.colResize.tableSize); + _this.dom.scrollFootTable.width(data.colResize.tableSize); } - } - that.s.mouse.startX = e.pageX; - }, - - /** - * Check to see if the mouse is over the resize handle area - * @param e - * @param nTh - */ - "_fnResizeHandleCheck": function (e, nTh) { - var that = this; - - var offset = $(nTh).offset(); - var relativeX = (e.pageX - offset.left); - var relativeY = (e.pageY - offset.top); - var distFromLeft = relativeX; - var distFromRight = $(nTh).outerWidth() - relativeX - 1; - - var handleBuffer = this.s.init.handleWidth / 2; - var leftHandleOn = distFromLeft < handleBuffer; - var rightHandleOn = distFromRight < handleBuffer; - - //If this is the first table cell - if ($(nTh).prev("th").length == 0) { - if(this.s.init.rtl) - rightHandleOn = false; - else - leftHandleOn = false; - } - //If this is the last cell and the table is fixed width don't let them expand the last cell directly - if ($(nTh).next("th").length == 0 && this.s.init.tableWidthFixed) { - if(this.s.init.rtl) - leftHandleOn = false; - else - rightHandleOn = false; - } - var resizeAvailable = leftHandleOn||rightHandleOn; - - //If table is in right to left mode flip which TH is being resized - if (that.s.init.rtl) { - //Handle is to the left - if (leftHandleOn) { - that.dom.resizeCol = $(nTh); - that.dom.resizeColNeighbour = $(nTh).next(); - } else if (rightHandleOn) { - that.dom.resizeCol = $(nTh).prev(); - that.dom.resizeColNeighbour = $(nTh); + for (i = 0; i < columns.length; i++) { + wMap[i] = columns[i]; } - } else { - //Handle is to the right - if (rightHandleOn) { - that.dom.resizeCol = $(nTh); - that.dom.resizeColNeighbour = $(nTh).next(); - } else if (leftHandleOn) { - that.dom.resizeCol = $(nTh).prev(); - that.dom.resizeColNeighbour = $(nTh); + for (i = 0; i < _this.dt.settings.aoColumns.length; i++) { + col = _this.dt.settings.aoColumns[i]; + var idx = col._ColReorder_iOrigCol != null ? col._ColReorder_iOrigCol : i; + col.sWidth = wMap[idx]; + col.sWidthOrig = wMap[idx]; + col.nTh.style.width = columns[i]; + + //Check for FixedHeader + if (col.fhTh) + col.fhTh.style.width = columns[i]; + if (col.fhTf) + col.fhTf.style.width = columns[i]; } + _this.dom.origState = false; } - //If table width is fixed make sure both columns are resizable else just check the one. - if(this.s.init.tableWidthFixed) - resizeAvailable &= this.s.init.exclude.indexOf(parseInt($(that.dom.resizeCol).attr("data-column-index"))) == -1 && this.s.init.exclude.indexOf(parseInt($(that.dom.resizeColNeighbour).attr("data-column-index"))) == -1; - else - resizeAvailable &= this.s.init.exclude.indexOf(parseInt($(that.dom.resizeCol).attr("data-column-index"))) == -1; - - $(nTh).off('mousedown.ColResize'); - if (resizeAvailable) { - $(nTh).css("cursor", "ew-resize"); - - //Delay other mousedown events from the Reorder plugin - that._fnDelayEvents(null, nTh, "mousedown", "ColReorder"); - that._fnDelayEvents("click", nTh, "click", "DT"); - - $(nTh).off('mousedown.ColResize').on('mousedown.ColResize', function (e) { - e.preventDefault(); - that._fnMouseDown.call(that, e, nTh); - }) - .off('click.ColResize').on('click.ColResize', function (e) { - that._fnClick.call(that, e); - }); - } else { - $(nTh).css("cursor", "pointer"); - $(nTh).off('mousedown.ColResize click.ColResize'); - //Restore any events that were removed - that._fnRestoreEvents(); - //This is to restore column sorting on click functionality - if (!that.s.isMousedown) - //Restore click event if mouse is not down - this._fnRestoreEvents("click"); + _this.dt.api.columns.adjust(); + if (_this.dom.scrollX || _this.dom.scrollY) + _this.dt.api.draw(false); + }; + + if (this.initialized) { + onInit(); + return; + } + this.dt.settings.oApi._fnCallbackReg(this.dt.settings, 'colResizeInitCompleted', function () { + onInit(); + }, "ColResize_Init"); + }; + + ColResize.prototype.saveState = function (data) { + if (!this.dt.settings._bInitComplete) { + var oData = this.dt.settings.fnStateLoadCallback.call(this.dt.settings.oInstance, this.dt.settings); + if (oData && oData.colResize) + data.colResize = oData.colResize; + return; + } + this.updateTableSize(); + data.colResize = { + columns: [], + tableSize: this.tableSize + }; + + data.colResize.columns.length = this.dt.settings.aoColumns.length; + for (var i = 0; i < this.dt.settings.aoColumns.length; i++) { + var col = this.dt.settings.aoColumns[i]; + var idx = col._ColReorder_iOrigCol != null ? col._ColReorder_iOrigCol : i; + data.colResize.columns[idx] = col.sWidth; + } + }; + + ColResize.prototype.registerCallbacks = function () { + var _this = this; + /* State saving */ + this.dt.settings.oApi._fnCallbackReg(this.dt.settings, 'aoStateSaveParams', function (oS, oData) { + _this.saveState(oData); + }, "ColResize_StateSave"); + + /* State loading */ + this.dt.settings.oApi._fnCallbackReg(this.dt.settings, 'aoStateLoaded', function (oS, oData) { + _this.loadState(oData); + }, "ColResize_StateLoad"); + + if (this.$.fn.DataTable.models.oSettings.remoteStateInitCompleted !== undefined) { + //Integrate with remote state + this.dt.settings.oApi._fnCallbackReg(this.dt.settings, 'remoteStateLoadedParams', function (s, data) { + _this.loadState(data); + }, "ColResize_StateLoad"); + this.dt.settings.oApi._fnCallbackReg(this.dt.settings, 'remoteStateSaveParams', function (s, data) { + _this.saveState(data); + }, "ColResize_StateSave"); + } + }; + + ColResize.prototype.setTablesLayout = function (value) { + if (this.dom.scrollX || this.dom.scrollY) { + this.dom.scrollHeadTable.css('table-layout', value); + this.dom.scrollBodyTable.css('table-layout', value); + this.dom.scrollFootTable.css('table-layout', value); + } else { + this.$(this.dt.settings.nTable).css('table-layout', value); + } + this.dom.fixedLayout = value == 'fixed'; + }; + + //only when scrollX or scrollY are enabled + ColResize.prototype.fixFootAndHeadTables = function (e) { + var _this = this; + if (e != null && e.target !== this.dt.settings.nTable) + return; + + if (this.dom.scrollFootTable.length) { + this.$('thead', this.dom.scrollFootTable).remove(); + this.dom.scrollFootTable.prepend(this.$('thead', this.dom.scrollBodyTable).clone()); + } + this.$('tfoot', this.dom.scrollHeadTable).remove(); + this.dom.scrollHeadTable.append(this.$('tfoot', this.dom.scrollBodyTable).clone()); + var removeFooterWidth = function (table) { + _this.$('tfoot>tr>th', table).each(function (i, th) { + _this.$(th).css('width', ''); + }); + }; + + //Remove all tfoot headers widths + removeFooterWidth(this.dom.scrollFootTable); + removeFooterWidth(this.dom.scrollBodyTable); + removeFooterWidth(this.dom.scrollHeadTable); + }; + + ColResize.prototype.onDraw = function (e) { + if (e != null && e.target !== this.dt.settings.nTable) + return; + if (this.dom.scrollX || this.dom.scrollY) { + this.fixFootAndHeadTables(); + + //Fix the header table padding + if (this.dt.settings._bInitComplete) { + var borderWidth = this.dom.scrollHeadTable.outerWidth() - this.dom.scrollHeadTable.innerWidth(); + var paddingType = this.dt.settings.oBrowser.bScrollbarLeft ? 'padding-left' : 'padding-right'; + var paddingVal = parseFloat(this.dom.scrollHeadInner.css(paddingType)); + this.dom.scrollHeadInner.css(paddingType, (paddingVal + borderWidth) + 'px'); } - }, - - "_fnClick": function (e) { - var that = this; - that.s.isMousedown = false; - e.stopImmediatePropagation(); - }, - - /** - * Finish off the mouse drag - * @method _fnMouseUp - * @param e Mouse event - * @returns void - * @private - */ - "_fnMouseUp": function (e) { - var that = this; - that.s.isMousedown = false; - - //Fix width of column to be the size the dom is limited to (for when user sets min-width on a column) - that.s.mouse.targetColumn.width = that.dom.resizeCol.width(); - - $(document).off('mousemove.ColResize mouseup.ColResize'); - this.s.dt.oInstance.fnAdjustColumnSizing(); - //Table width fix, prevents extra gaps between tables - var LeftWrapper = $(that.s.dt.nTableWrapper).find(".DTFC_LeftWrapper"); - var DTFC_LeftWidth = LeftWrapper.width(); - LeftWrapper.children(".DTFC_LeftHeadWrapper").children("table").width(DTFC_LeftWidth); - - if (that.s.init.resizeCallback) { - that.s.init.resizeCallback.call(that, that.s.mouse.targetColumn); + } + + var autoWidthTypes = []; + if (this.settings.dblClick == 'autoMinFit' || !this.settings.fixedLayout) + autoWidthTypes.push('autoMinWidth'); + if (this.settings.dblClick == 'autoFit') + autoWidthTypes.push('autoWidth'); + + //Call this only once so that the table will be cloned only one time + if (autoWidthTypes.length) + this.updateColumnsAutoWidth(autoWidthTypes); + + if (!this.settings.fixedLayout) { + var columns = this.dt.settings.aoColumns; + var i; + for (i = 0; i < columns.length; i++) { + if (!columns[i].bVisible) + continue; + columns[i].minWidth = Math.max((columns[i].minWidthOrig || 0), columns[i].autoMinWidth); + + //We have to resize if the current column width if is less that the column minWidth + if (this.$(columns[i].nTh).width() < columns[i].minWidth) + this.resize(columns[i], columns[i].minWidth); + } + } else { + if (!this.dom.fixedLayout) { + this.setTablesLayout('fixed'); + this.afterResizing(); } - }, - - /** - * Clean up ColResize memory references and event handlers - * @method _fnDestroy - * @returns void - * @private - */ - "_fnDestroy": function () { - var i, iLen; - - for (i = 0, iLen = this.s.dt.aoDrawCallback.length; i < iLen; i++) { - if (this.s.dt.aoDrawCallback[i].sName === 'ColResize_Pre') { - this.s.dt.aoDrawCallback.splice(i, 1); + } + }; + + ColResize.prototype.getTableAutoColWidths = function (table, types) { + var widths = {}, i, colIdx; + var $table = this.$(table); + for (i = 0; i < types.length; i++) { + widths[types[i]] = []; + } + if (!types.length || !$table.length) + return widths; + + var clnTable = $table.clone().removeAttr('id').css('table-layout', 'auto'); + + // Remove any assigned widths from the footer (from scrolling) + clnTable.find('thead th, tfoot th, tfoot td').css('width', ''); + var container = this.$('<div />').css({ + 'position': 'absolute', + 'width': '9999px', + 'height': '9999px' + }); + container.append(clnTable); + this.$(this.dt.settings.nTableWrapper).append(container); + + var headerCols = this.$('thead>tr>th', clnTable); + + for (i = 0; i < types.length; i++) { + var type = types[i]; + var fn = ''; + switch (type) { + case 'autoMinWidth': + clnTable.css('width', '1px'); + fn = 'width'; break; + case 'autoWidth': + clnTable.css('width', 'auto'); + fn = 'outerWidth'; + break; + default: + throw 'Invalid widthType ' + type; + } + for (colIdx = 0; colIdx < headerCols.length; colIdx++) { + widths[type].push(this.$(headerCols[colIdx])[fn]()); + } + } + + container.remove(); + return widths; + }; + + ColResize.prototype.updateColumnsAutoWidth = function (types) { + var columns = this.dt.settings.aoColumns; + var i, j, colLen, type, visColIdx = 0; + var widths = {}; + if (this.dom.scrollX || this.dom.scrollY) { + var headWidths = this.getTableAutoColWidths(this.dom.scrollHeadTable, types); + var bodyWidths = this.getTableAutoColWidths(this.dom.scrollBodyTable, types); + var footWidths = this.getTableAutoColWidths(this.dom.scrollFootTable, types); + + for (i = 0; i < types.length; i++) { + type = types[i]; + widths[type] = []; + footWidths[type].length = headWidths[type].length; + colLen = headWidths[type].length; + for (j = 0; j < colLen; j++) { + widths[type].push(Math.max(headWidths[type][j], bodyWidths[type][j], (footWidths[type][j] || 0))); } } + } else { + widths = this.getTableAutoColWidths(this.dt.settings.nTable, types); + } + + for (i = 0; i < columns.length; i++) { + if (!columns[i].bVisible) + continue; + for (j = 0; j < types.length; j++) { + type = types[j]; + columns[i][type] = widths[type][visColIdx]; + } + visColIdx++; + } + }; - $(this.s.dt.nTHead).find('*').off('.ColResize'); + ColResize.prototype.overrideClickHander = function (col, $th) { + var dtClickEvent = this.getColumnEvent($th.get(0), 'click', 'DT'); - $.each(this.s.dt.aoColumns, function (i, column) { - $(column.nTh).removeAttr('data-column-index'); + //Remove the DataTables event so that ordering will not occur + if (dtClickEvent) { + $th.off('click.DT'); + this.$(document).one('click.ColResize', function (e) { + $th.on('click.DT', dtClickEvent.handler); }); + } + }; - this.s.dt._colResize = null; - this.s = null; - }, + ColResize.prototype.onDblClick = function (e, $th, col) { + if (e.target !== $th.get(0)) + return; + if ($th.css('cursor') != 'col-resize') + return; + + var width; + switch (this.settings.dblClick) { + case 'autoMinFit': + width = col.autoMinWidth; + break; + case 'autoFit': + width = col.autoWidth; + break; + default: + width = col.initWidth; + } + this.resize(col, width); + }; + ColResize.prototype.onMouseDown = function (e, col) { + var _this = this; + if (e.target !== col.nTh && e.target !== col.fhTh) + return true; - /** - * Add a data attribute to the column headers, so we know the index of - * the row to be reordered. This allows fast detection of the index, and - * for this plug-in to work with FixedHeader which clones the nodes. - * @private - */ - "_fnSetColumnIndexes": function () { - $.each(this.s.dt.aoColumns, function (i, column) { - $(column.nTh).attr('data-column-index', i); - }); + var $th = e.target === col.nTh ? this.$(col.nTh) : this.$(col.fhTh); + + if ($th.css('cursor') != 'col-resize' || col.resizable === false) { + var colReorder = this.dt.settings._colReorder; + if (colReorder) { + colReorder._fnMouseDown.call(colReorder, e, e.target); //Here we fix the e.preventDefault() in ColReorder so that we can have working inputs in header + } + return true; + } + this.dom.mouse.startX = e.pageX; + this.dom.mouse.prevX = e.pageX; + this.dom.mouse.startWidth = $th.width(); + this.dom.resize = true; + + this.beforeResizing(col); + + /* Add event handlers to the document */ + this.$(document).on('mousemove.ColResize', function (event) { + _this.onMouseMove(event, col); + }); + this.overrideClickHander(col, $th); + this.$(document).one('mouseup.ColResize', function (event) { + _this.onMouseUp(event, col); + }); + + return false; + }; + + ColResize.prototype.resize = function (col, width) { + var colWidth = this.$(col.nTh).width(); + var moveLength = width - this.$(col.nTh).width(); + this.beforeResizing(col); + var resized = this.resizeColumn(col, colWidth, moveLength, moveLength); + this.afterResizing(); + return resized; + }; + + ColResize.prototype.beforeResizing = function (col) { + //if (this.settings.fixedLayout && !this.dom.fixedLayout) + // this.setTablesLayout('fixed'); + }; + + ColResize.prototype.afterResizing = function () { + var i; + var columns = this.dt.settings.aoColumns; + for (i = 0; i < columns.length; i++) { + if (!columns[i].bVisible) + continue; + columns[i].sWidth = this.$(columns[i].nTh).css('width'); } + + //Update the internal storage of the table's width (in case we changed it because the user resized some column and scrollX was enabled + this.updateTableSize(); + + //Save the state + this.dt.settings.oInstance.oApi._fnSaveState(this.dt.settings); + this.dom.origState = false; }; + ColResize.prototype.onMouseUp = function (e, col) { + this.$(document).off('mousemove.ColResize'); + if (!this.dom.resize) + return; + this.dom.resize = false; + this.afterResizing(); + }; - /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * Static parameters - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - - - /** - * ColResize default settings for initialisation - * @namespace - * @static - */ - ColResize.defaults = { - /** - * Callback function that is fired when columns are resized - * @type function():void - * @default null - * @static - */ - "resizeCallback": null, - - /** - * Exclude array for columns that are not resizable - * @property exclude - * @type array of indexes that are excluded from resizing - * @default [] - */ - "exclude": [], - - /** - * Check to see if user is using a fixed table width or dynamic - * if true: - * -Columns will resize themselves and their neighbour - * -If neighbour is excluded resize will not occur - * if false: - * -Columns will resize themselves and increase or decrease the width of the table accordingly - */ - "tableWidthFixed": true, - - /** - * Width of the resize handle in pixels - * @property handleWidth - * @type int (pixels) - * @default 10 - */ - "handleWidth": 10, - - /** - * Right to left support, when true flips which column they are resizing on mouse down - * @property rtl - * @type bool - * @default false - */ - "rtl": false - }; - - - /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * Constants - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - - /** - * ColResize version - * @constant version - * @type String - * @default As code - */ - ColResize.version = "0.0.10"; - - - /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - * DataTables interfaces - * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ - - // Expose - $.fn.dataTable.ColResize = ColResize; - $.fn.DataTable.ColResize = ColResize; - - - // Register a new feature with DataTables - if (typeof $.fn.dataTable == "function" && - typeof $.fn.dataTableExt.fnVersionCheck == "function" && - $.fn.dataTableExt.fnVersionCheck('1.9.3')) { - $.fn.dataTableExt.aoFeatures.push({ - "fnInit": function (settings) { - var table = settings.oInstance; - - if (!settings._colResize) { - var dtInit = settings.oInit; - var opts = dtInit.colResize || dtInit.oColResize || {}; - - new ColResize(settings, opts); - } - else { - table.oApi._fnLog(settings, 1, "ColResize attempted to initialise twice. Ignoring second"); + ColResize.prototype.canResizeColumn = function (col, newWidth) { + return (col.resizable === undefined || col.resizable) && this.settings.minWidth <= newWidth && (!col.minWidth || col.minWidth <= newWidth) && (!this.settings.maxWidth || this.settings.maxWidth >= newWidth) && (!col.maxWidth || col.maxWidth >= newWidth); + }; + + ColResize.prototype.getColumnMaxWidth = function (col) { + return col.maxWidth ? col.maxWidth : this.settings.maxWidth; + }; + + ColResize.prototype.getColumnMinWidth = function (col) { + return col.minWidth ? col.minWidth : this.settings.minWidth; + }; + + ColResize.prototype.getPrevResizableColumnIdx = function (col, moveLength) { + var columns = this.dt.settings.aoColumns; + var colIdx = ColResizeHelper.indexOf(columns, col); + for (var i = colIdx; i >= 0; i--) { + if (!columns[i].bVisible) + continue; + var newWidth = this.$(columns[i].nTh).width() + moveLength; + if (this.canResizeColumn(columns[i], newWidth)) + return i; + } + return -1; + }; + + ColResize.prototype.getNextResizableColumnIdx = function (col, moveLength) { + var columns = this.dt.settings.aoColumns; + var colIdx = ColResizeHelper.indexOf(columns, col); + for (var i = (colIdx + 1); i < columns.length; i++) { + if (!columns[i].bVisible) + continue; + var newWidth = this.$(columns[i].nTh).width() - moveLength; + if (this.canResizeColumn(columns[i], newWidth)) + return i; + } + return -1; + }; + + ColResize.prototype.resizeColumn = function (col, startWidth, moveLength, lastMoveLength) { + if (moveLength == 0 || lastMoveLength == 0 || col.resizable === false) + return false; + var i; + var columns = this.dt.settings.aoColumns; + var headCol = this.$(col.nTh); + var headColNext = headCol.next(); + var colIdx = this.getColumnIndex(col); + var thWidth = startWidth + moveLength; + var thNextWidth; + var nextColIdx; + + if (!this.dom.scrollX) { + if (lastMoveLength < 0) { + thWidth = headColNext.width() - lastMoveLength; + nextColIdx = this.getPrevResizableColumnIdx(col, lastMoveLength); + if (nextColIdx < 0) + return false; + headCol = headColNext; + colIdx = colIdx + 1; + headColNext = this.$(columns[nextColIdx].nTh); + thNextWidth = headColNext.width() + lastMoveLength; + } else { + thWidth = headCol.width() + lastMoveLength; + nextColIdx = this.getNextResizableColumnIdx(col, lastMoveLength); + + //If there is no columns that can be shrinked dont resize anymore + if (nextColIdx < 0) + return false; + headColNext = this.$(columns[nextColIdx].nTh); + thNextWidth = headColNext.width() - lastMoveLength; + + if ((this.settings.maxWidth && this.settings.maxWidth < thWidth) || col.maxWidth && col.maxWidth < thWidth) + return false; + } + if (!this.canResizeColumn(columns[nextColIdx], thNextWidth) || !this.canResizeColumn(columns[colIdx], thWidth)) + return false; + headColNext.width(thNextWidth); + + //If fixed header is present we have to resize the cloned column too + if (this.dom.fixedHeader) { + this.$(columns[nextColIdx].fhTh).width(thNextWidth); + this.$(columns[colIdx].fhTh).width(thWidth); + + //If fixedfooter was enabled resize that too + if (columns[nextColIdx].fhTf) { + this.$(columns[nextColIdx].fhTf).width(thNextWidth); + this.$(columns[colIdx].fhTf).width(thWidth); } + } + } else { + if (!this.canResizeColumn(col, thWidth)) + return false; + var tSize = this.tableSize + moveLength + 'px'; + this.dom.scrollHeadInner.css('width', tSize); + this.dom.scrollHeadTable.css('width', tSize); + this.dom.scrollBodyTable.css('width', tSize); + this.dom.scrollFootTable.css('width', tSize); + } + headCol.width(thWidth); + + //scrollX or scrollY enabled + if (this.dom.scrollBody.length) { + var colDomIdx = 0; + for (i = 0; i < this.dt.settings.aoColumns.length && i != colIdx; i++) { + if (this.dt.settings.aoColumns[i].bVisible) + colDomIdx++; + } - return null; - /* No node for DataTables to insert */ - }, - "cFeature": "Z", - "sFeature": "ColResize" - }); - } else { - alert("Warning: ColResize requires DataTables 1.9.3 or greater - www.datatables.net/download"); - } + //Get the table + var bodyCol = this.$('thead>tr>th:nth(' + colDomIdx + ')', this.dom.scrollBodyTable); + var footCol = this.$('thead>tr>th:nth(' + colDomIdx + ')', this.dom.scrollFootTable); + //This will happen only when scrollY is used without scrollX + if (!this.dom.scrollX) { + var nextColDomIdx = 0; + for (i = 0; i < this.dt.settings.aoColumns.length && i != nextColIdx; i++) { + if (this.dt.settings.aoColumns[i].bVisible) + nextColDomIdx++; + } + var bodyColNext = this.$('thead>tr>th:nth(' + nextColDomIdx + ')', this.dom.scrollBodyTable); + var footColNext = this.$('thead>tr>th:nth(' + nextColDomIdx + ')', this.dom.scrollFootTable); -// API augmentation - if ($.fn.dataTable.Api) { - $.fn.dataTable.Api.register('colResize.reset()', function () { - return this.iterator('table', function (ctx) { - ctx._colResize.fnReset(); - }); - }); - } + bodyColNext.width(thNextWidth); + if (thWidth > 0) + bodyCol.width(thWidth); - return ColResize; - }; // /factory + footColNext.width(thNextWidth); + if (thWidth > 0) + footCol.width(thWidth); + } + //Resize the table and the column + if (this.dom.scrollX && thWidth > 0) { + bodyCol.width(thWidth); + footCol.width(thWidth); + } + } + return true; + }; -// Define as an AMD module if possible -if ( typeof define === 'function' && define.amd ) { - define( ['jquery', 'datatables'], factory ); -} -else if ( typeof exports === 'object' ) { - // Node/CommonJS - factory( require('jquery'), require('datatables') ); -} -else if (jQuery && !jQuery.fn.dataTable.ColResize) { - // Otherwise simply initialise as normal, stopping multiple evaluation - factory(jQuery, jQuery.fn.dataTable); -} + ColResize.prototype.onMouseMove = function (e, col) { + var moveLength = e.pageX - this.dom.mouse.startX; + var lastMoveLength = e.pageX - this.dom.mouse.prevX; + this.resizeColumn(col, this.dom.mouse.startWidth, moveLength, lastMoveLength); + this.dom.mouse.prevX = e.pageX; + }; + ColResize.prototype.destroy = function () { + }; + ColResize.defaultSettings = { + minWidth: 1, + maxWidth: null, + fixedLayout: true, + fixedHeader: null, + dblClick: 'initWidth' + }; + return ColResize; + })(); + dt.ColResize = ColResize; -})(window, document);
\ No newline at end of file + var ColResizeHelper = (function () { + function ColResizeHelper() { + } + ColResizeHelper.indexOf = function (arr, item, equalFun) { + if (typeof equalFun === "undefined") { equalFun = null; } + for (var i = 0; i < arr.length; i++) { + if (equalFun) { + if (equalFun(arr[i], item)) + return i; + } else if (arr[i] === item) + return i; + } + return -1; + }; + return ColResizeHelper; + })(); + dt.ColResizeHelper = ColResizeHelper; +})(dt || (dt = {})); + +(function ($, window, document, undefined) { + //Register events + $.fn.DataTable.models.oSettings.colResizeInitCompleted = []; + + //Register api function + $.fn.DataTable.Api.register('colResize.init()', function (settings) { + var colResize = new dt.ColResize($, this, settings); + if (this.settings()[0]._bInitComplete) + colResize.initialize(); + else + this.one('init.dt', function () { + colResize.initialize(); + }); + return null; + }); + + $.fn.DataTable.Api.register('column().resize()', function (width) { + var oSettings = this.settings()[0]; + var colResize = oSettings.colResize; + return colResize.resize(oSettings.aoColumns[this[0][0]], width); + }); + + //Add as feature + $.fn.dataTable.ext.feature.push({ + "fnInit": function (oSettings) { + return oSettings.oInstance.api().colResize.init(oSettings.oInit.colResize); + }, + "cFeature": "J", + "sFeature": "ColResize" + }); +}(jQuery, window, document, undefined));
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.css b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.css new file mode 100644 index 00000000..4001ab12 --- /dev/null +++ b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.css @@ -0,0 +1,4 @@ +div.FixedHeader_Cloned th, +div.FixedHeader_Cloned td { + background-color: white !important; +} diff --git a/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.js b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.js new file mode 100644 index 00000000..c1f962c4 --- /dev/null +++ b/wqflask/wqflask/static/new/packages/DataTables/extensions/dataTables.fixedHeader.js @@ -0,0 +1,1027 @@ +/*! FixedHeader 2.1.2 + * ©2010-2014 SpryMedia Ltd - datatables.net/license + */ + +/** + * @summary FixedHeader + * @description Fix a table's header or footer, so it is always visible while + * Scrolling + * @version 2.1.2 + * @file dataTables.fixedHeader.js + * @author SpryMedia Ltd (www.sprymedia.co.uk) + * @contact www.sprymedia.co.uk/contact + * @copyright Copyright 2009-2014 SpryMedia Ltd. + * + * This source file is free software, available under the following license: + * MIT license - http://datatables.net/license/mit + * + * This source file is distributed in the hope that it will be useful, but + * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY + * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details. + * + * For details please refer to: http://www.datatables.net + */ + +/* Global scope for FixedColumns for backwards compatibility - will be removed + * in future. Not documented in 1.1.x. + */ + +/* Global scope for FixedColumns */ +var FixedHeader; + +(function(window, document, undefined) { + + +var factory = function( $, DataTable ) { +"use strict"; + +/* + * Function: FixedHeader + * Purpose: Provide 'fixed' header, footer and columns for a DataTable + * Returns: object:FixedHeader - must be called with 'new' + * Inputs: mixed:mTable - target table + * @param {object} dt DataTables instance or HTML table node. With DataTables + * 1.10 this can also be a jQuery collection (with just a single table in its + * result set), a jQuery selector, DataTables API instance or settings + * object. + * @param {object} [oInit] initialisation settings, with the following + * properties (each optional) + * * bool:top - fix the header (default true) + * * bool:bottom - fix the footer (default false) + * * int:left - fix the left column(s) (default 0) + * * int:right - fix the right column(s) (default 0) + * * int:zTop - fixed header zIndex + * * int:zBottom - fixed footer zIndex + * * int:zLeft - fixed left zIndex + * * int:zRight - fixed right zIndex + */ +FixedHeader = function ( mTable, oInit ) { + /* Sanity check - you just know it will happen */ + if ( ! this instanceof FixedHeader ) + { + alert( "FixedHeader warning: FixedHeader must be initialised with the 'new' keyword." ); + return; + } + + var that = this; + var oSettings = { + "aoCache": [], + "oSides": { + "top": true, + "bottom": false, + "left": 0, + "right": 0 + }, + "oZIndexes": { + "top": 104, + "bottom": 103, + "left": 102, + "right": 101 + }, + "oCloneOnDraw": { + "top": false, + "bottom": false, + "left": true, + "right": true + }, + "oMes": { + "iTableWidth": 0, + "iTableHeight": 0, + "iTableLeft": 0, + "iTableRight": 0, /* note this is left+width, not actually "right" */ + "iTableTop": 0, + "iTableBottom": 0 /* note this is top+height, not actually "bottom" */ + }, + "oOffset": { + "top": 0 + }, + "nTable": null, + "bFooter": false, + "bInitComplete": false + }; + + /* + * Function: fnGetSettings + * Purpose: Get the settings for this object + * Returns: object: - settings object + * Inputs: - + */ + this.fnGetSettings = function () { + return oSettings; + }; + + /* + * Function: fnUpdate + * Purpose: Update the positioning and copies of the fixed elements + * Returns: - + * Inputs: - + */ + this.fnUpdate = function () { + this._fnUpdateClones(); + this._fnUpdatePositions(); + }; + + /* + * Function: fnPosition + * Purpose: Update the positioning of the fixed elements + * Returns: - + * Inputs: - + */ + this.fnPosition = function () { + this._fnUpdatePositions(); + }; + + + var dt = $.fn.dataTable.Api ? + new $.fn.dataTable.Api( mTable ).settings()[0] : + mTable.fnSettings(); + + dt._oPluginFixedHeader = this; + + /* Let's do it */ + this.fnInit( dt, oInit ); + +}; + + +/* + * Variable: FixedHeader + * Purpose: Prototype for FixedHeader + * Scope: global + */ +FixedHeader.prototype = { + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Initialisation + */ + + /* + * Function: fnInit + * Purpose: The "constructor" + * Returns: - + * Inputs: {as FixedHeader function} + */ + fnInit: function ( oDtSettings, oInit ) + { + var s = this.fnGetSettings(); + var that = this; + + /* Record the user definable settings */ + this.fnInitSettings( s, oInit ); + + if ( oDtSettings.oScroll.sX !== "" || oDtSettings.oScroll.sY !== "" ) + { + alert( "FixedHeader 2 is not supported with DataTables' scrolling mode at this time" ); + return; + } + + s.nTable = oDtSettings.nTable; + oDtSettings.aoDrawCallback.unshift( { + "fn": function () { + FixedHeader.fnMeasure(); + that._fnUpdateClones.call(that); + that._fnUpdatePositions.call(that); + }, + "sName": "FixedHeader" + } ); + + s.bFooter = ($('>tfoot', s.nTable).length > 0) ? true : false; + + /* Add the 'sides' that are fixed */ + if ( s.oSides.top ) + { + s.aoCache.push( that._fnCloneTable( "fixedHeader", "FixedHeader_Header", that._fnCloneThead ) ); + } + if ( s.oSides.bottom ) + { + s.aoCache.push( that._fnCloneTable( "fixedFooter", "FixedHeader_Footer", that._fnCloneTfoot ) ); + } + if ( s.oSides.left ) + { + s.aoCache.push( that._fnCloneTable( "fixedLeft", "FixedHeader_Left", that._fnCloneTLeft, s.oSides.left ) ); + } + if ( s.oSides.right ) + { + s.aoCache.push( that._fnCloneTable( "fixedRight", "FixedHeader_Right", that._fnCloneTRight, s.oSides.right ) ); + } + + /* Event listeners for window movement */ + FixedHeader.afnScroll.push( function () { + that._fnUpdatePositions.call(that); + } ); + + $(window).resize( function () { + FixedHeader.fnMeasure(); + that._fnUpdateClones.call(that); + that._fnUpdatePositions.call(that); + } ); + + $(s.nTable) + .on('column-reorder.dt', function () { + FixedHeader.fnMeasure(); + that._fnUpdateClones( true ); + that._fnUpdatePositions(); + } ) + .on('column-visibility.dt', function () { + FixedHeader.fnMeasure(); + that._fnUpdateClones( true ); + that._fnUpdatePositions(); + } ); + + /* Get things right to start with */ + FixedHeader.fnMeasure(); + that._fnUpdateClones(); + that._fnUpdatePositions(); + + s.bInitComplete = true; + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Support functions + */ + + /* + * Function: fnInitSettings + * Purpose: Take the user's settings and copy them to our local store + * Returns: - + * Inputs: object:s - the local settings object + * object:oInit - the user's settings object + */ + fnInitSettings: function ( s, oInit ) + { + if ( oInit !== undefined ) + { + if ( oInit.top !== undefined ) { + s.oSides.top = oInit.top; + } + if ( oInit.bottom !== undefined ) { + s.oSides.bottom = oInit.bottom; + } + if ( typeof oInit.left == 'boolean' ) { + s.oSides.left = oInit.left ? 1 : 0; + } + else if ( oInit.left !== undefined ) { + s.oSides.left = oInit.left; + } + if ( typeof oInit.right == 'boolean' ) { + s.oSides.right = oInit.right ? 1 : 0; + } + else if ( oInit.right !== undefined ) { + s.oSides.right = oInit.right; + } + + if ( oInit.zTop !== undefined ) { + s.oZIndexes.top = oInit.zTop; + } + if ( oInit.zBottom !== undefined ) { + s.oZIndexes.bottom = oInit.zBottom; + } + if ( oInit.zLeft !== undefined ) { + s.oZIndexes.left = oInit.zLeft; + } + if ( oInit.zRight !== undefined ) { + s.oZIndexes.right = oInit.zRight; + } + + if ( oInit.offsetTop !== undefined ) { + s.oOffset.top = oInit.offsetTop; + } + if ( oInit.alwaysCloneTop !== undefined ) { + s.oCloneOnDraw.top = oInit.alwaysCloneTop; + } + if ( oInit.alwaysCloneBottom !== undefined ) { + s.oCloneOnDraw.bottom = oInit.alwaysCloneBottom; + } + if ( oInit.alwaysCloneLeft !== undefined ) { + s.oCloneOnDraw.left = oInit.alwaysCloneLeft; + } + if ( oInit.alwaysCloneRight !== undefined ) { + s.oCloneOnDraw.right = oInit.alwaysCloneRight; + } + } + }, + + /* + * Function: _fnCloneTable + * Purpose: Clone the table node and do basic initialisation + * Returns: - + * Inputs: - + */ + _fnCloneTable: function ( sType, sClass, fnClone, iCells ) + { + var s = this.fnGetSettings(); + var nCTable; + + /* We know that the table _MUST_ has a DIV wrapped around it, because this is simply how + * DataTables works. Therefore, we can set this to be relatively position (if it is not + * alreadu absolute, and use this as the base point for the cloned header + */ + if ( $(s.nTable.parentNode).css('position') != "absolute" ) + { + s.nTable.parentNode.style.position = "relative"; + } + + /* Just a shallow clone will do - we only want the table node */ + nCTable = s.nTable.cloneNode( false ); + nCTable.removeAttribute( 'id' ); + + var nDiv = document.createElement( 'div' ); + nDiv.style.position = "absolute"; + nDiv.style.top = "0px"; + nDiv.style.left = "0px"; + nDiv.className += " FixedHeader_Cloned "+sType+" "+sClass; + + /* Set the zIndexes */ + if ( sType == "fixedHeader" ) + { + nDiv.style.zIndex = s.oZIndexes.top; + } + if ( sType == "fixedFooter" ) + { + nDiv.style.zIndex = s.oZIndexes.bottom; + } + if ( sType == "fixedLeft" ) + { + nDiv.style.zIndex = s.oZIndexes.left; + } + else if ( sType == "fixedRight" ) + { + nDiv.style.zIndex = s.oZIndexes.right; + } + + /* remove margins since we are going to position it absolutely */ + nCTable.style.margin = "0"; + + /* Insert the newly cloned table into the DOM, on top of the "real" header */ + nDiv.appendChild( nCTable ); + document.body.appendChild( nDiv ); + + return { + "nNode": nCTable, + "nWrapper": nDiv, + "sType": sType, + "sPosition": "", + "sTop": "", + "sLeft": "", + "fnClone": fnClone, + "iCells": iCells + }; + }, + + /* + * Function: _fnMeasure + * Purpose: Get the current positioning of the table in the DOM + * Returns: - + * Inputs: - + */ + _fnMeasure: function () + { + var + s = this.fnGetSettings(), + m = s.oMes, + jqTable = $(s.nTable), + oOffset = jqTable.offset(), + iParentScrollTop = this._fnSumScroll( s.nTable.parentNode, 'scrollTop' ), + iParentScrollLeft = this._fnSumScroll( s.nTable.parentNode, 'scrollLeft' ); + + m.iTableWidth = jqTable.outerWidth(); + m.iTableHeight = jqTable.outerHeight(); + m.iTableLeft = oOffset.left + s.nTable.parentNode.scrollLeft; + m.iTableTop = oOffset.top + iParentScrollTop; + m.iTableRight = m.iTableLeft + m.iTableWidth; + m.iTableRight = FixedHeader.oDoc.iWidth - m.iTableLeft - m.iTableWidth; + m.iTableBottom = FixedHeader.oDoc.iHeight - m.iTableTop - m.iTableHeight; + }, + + /* + * Function: _fnSumScroll + * Purpose: Sum node parameters all the way to the top + * Returns: int: sum + * Inputs: node:n - node to consider + * string:side - scrollTop or scrollLeft + */ + _fnSumScroll: function ( n, side ) + { + var i = n[side]; + while ( n = n.parentNode ) + { + if ( n.nodeName == 'HTML' || n.nodeName == 'BODY' ) + { + break; + } + i = n[side]; + } + return i; + }, + + /* + * Function: _fnUpdatePositions + * Purpose: Loop over the fixed elements for this table and update their positions + * Returns: - + * Inputs: - + */ + _fnUpdatePositions: function () + { + var s = this.fnGetSettings(); + this._fnMeasure(); + + for ( var i=0, iLen=s.aoCache.length ; i<iLen ; i++ ) + { + if ( s.aoCache[i].sType == "fixedHeader" ) + { + this._fnScrollFixedHeader( s.aoCache[i] ); + } + else if ( s.aoCache[i].sType == "fixedFooter" ) + { + this._fnScrollFixedFooter( s.aoCache[i] ); + } + else if ( s.aoCache[i].sType == "fixedLeft" ) + { + this._fnScrollHorizontalLeft( s.aoCache[i] ); + } + else + { + this._fnScrollHorizontalRight( s.aoCache[i] ); + } + } + }, + + /* + * Function: _fnUpdateClones + * Purpose: Loop over the fixed elements for this table and call their cloning functions + * Returns: - + * Inputs: - + */ + _fnUpdateClones: function ( full ) + { + var s = this.fnGetSettings(); + + if ( full ) { + // This is a little bit of a hack to force a full clone draw. When + // `full` is set to true, we want to reclone the source elements, + // regardless of the clone-on-draw settings + s.bInitComplete = false; + } + + for ( var i=0, iLen=s.aoCache.length ; i<iLen ; i++ ) + { + s.aoCache[i].fnClone.call( this, s.aoCache[i] ); + } + + if ( full ) { + s.bInitComplete = true; + } + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Scrolling functions + */ + + /* + * Function: _fnScrollHorizontalLeft + * Purpose: Update the positioning of the scrolling elements + * Returns: - + * Inputs: object:oCache - the cached values for this fixed element + */ + _fnScrollHorizontalRight: function ( oCache ) + { + var + s = this.fnGetSettings(), + oMes = s.oMes, + oWin = FixedHeader.oWin, + oDoc = FixedHeader.oDoc, + nTable = oCache.nWrapper, + iFixedWidth = $(nTable).outerWidth(); + + if ( oWin.iScrollRight < oMes.iTableRight ) + { + /* Fully right aligned */ + this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft+oMes.iTableWidth-iFixedWidth)+"px", 'left', nTable.style ); + } + else if ( oMes.iTableLeft < oDoc.iWidth-oWin.iScrollRight-iFixedWidth ) + { + /* Middle */ + this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop-oWin.iScrollTop)+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', (oWin.iWidth-iFixedWidth)+"px", 'left', nTable.style ); + } + else + { + /* Fully left aligned */ + this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + }, + + /* + * Function: _fnScrollHorizontalLeft + * Purpose: Update the positioning of the scrolling elements + * Returns: - + * Inputs: object:oCache - the cached values for this fixed element + */ + _fnScrollHorizontalLeft: function ( oCache ) + { + var + s = this.fnGetSettings(), + oMes = s.oMes, + oWin = FixedHeader.oWin, + oDoc = FixedHeader.oDoc, + nTable = oCache.nWrapper, + iCellWidth = $(nTable).outerWidth(); + + if ( oWin.iScrollLeft < oMes.iTableLeft ) + { + /* Fully left align */ + this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + else if ( oWin.iScrollLeft < oMes.iTableLeft+oMes.iTableWidth-iCellWidth ) + { + this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop-oWin.iScrollTop)+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', "0px", 'left', nTable.style ); + } + else + { + /* Fully right align */ + this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft+oMes.iTableWidth-iCellWidth)+"px", 'left', nTable.style ); + } + }, + + /* + * Function: _fnScrollFixedFooter + * Purpose: Update the positioning of the scrolling elements + * Returns: - + * Inputs: object:oCache - the cached values for this fixed element + */ + _fnScrollFixedFooter: function ( oCache ) + { + var + s = this.fnGetSettings(), + oMes = s.oMes, + oWin = FixedHeader.oWin, + oDoc = FixedHeader.oDoc, + nTable = oCache.nWrapper, + iTheadHeight = $("thead", s.nTable).outerHeight(), + iCellHeight = $(nTable).outerHeight(); + + if ( oWin.iScrollBottom < oMes.iTableBottom ) + { + /* Below */ + this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+oMes.iTableHeight-iCellHeight)+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + else if ( oWin.iScrollBottom < oMes.iTableBottom+oMes.iTableHeight-iCellHeight-iTheadHeight ) + { + this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', (oWin.iHeight-iCellHeight)+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style ); + } + else + { + /* Above */ + this._fnUpdateCache( oCache, 'sPosition', 'absolute', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iCellHeight)+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + }, + + /* + * Function: _fnScrollFixedHeader + * Purpose: Update the positioning of the scrolling elements + * Returns: - + * Inputs: object:oCache - the cached values for this fixed element + */ + _fnScrollFixedHeader: function ( oCache ) + { + var + s = this.fnGetSettings(), + oMes = s.oMes, + oWin = FixedHeader.oWin, + oDoc = FixedHeader.oDoc, + nTable = oCache.nWrapper, + iTbodyHeight = 0, + anTbodies = s.nTable.getElementsByTagName('tbody'); + + for (var i = 0; i < anTbodies.length; ++i) { + iTbodyHeight += anTbodies[i].offsetHeight; + } + + if ( oMes.iTableTop > oWin.iScrollTop + s.oOffset.top ) + { + /* Above the table */ + this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', oMes.iTableTop+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + else if ( oWin.iScrollTop + s.oOffset.top > oMes.iTableTop+iTbodyHeight ) + { + /* At the bottom of the table */ + this._fnUpdateCache( oCache, 'sPosition', "absolute", 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', (oMes.iTableTop+iTbodyHeight)+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', oMes.iTableLeft+"px", 'left', nTable.style ); + } + else + { + /* In the middle of the table */ + this._fnUpdateCache( oCache, 'sPosition', 'fixed', 'position', nTable.style ); + this._fnUpdateCache( oCache, 'sTop', s.oOffset.top+"px", 'top', nTable.style ); + this._fnUpdateCache( oCache, 'sLeft', (oMes.iTableLeft-oWin.iScrollLeft)+"px", 'left', nTable.style ); + } + }, + + /* + * Function: _fnUpdateCache + * Purpose: Check the cache and update cache and value if needed + * Returns: - + * Inputs: object:oCache - local cache object + * string:sCache - cache property + * string:sSet - value to set + * string:sProperty - object property to set + * object:oObj - object to update + */ + _fnUpdateCache: function ( oCache, sCache, sSet, sProperty, oObj ) + { + if ( oCache[sCache] != sSet ) + { + oObj[sProperty] = sSet; + oCache[sCache] = sSet; + } + }, + + + + /** + * Copy the classes of all child nodes from one element to another. This implies + * that the two have identical structure - no error checking is performed to that + * fact. + * @param {element} source Node to copy classes from + * @param {element} dest Node to copy classes too + */ + _fnClassUpdate: function ( source, dest ) + { + var that = this; + + if ( source.nodeName.toUpperCase() === "TR" || source.nodeName.toUpperCase() === "TH" || + source.nodeName.toUpperCase() === "TD" || source.nodeName.toUpperCase() === "SPAN" ) + { + dest.className = source.className; + } + + $(source).children().each( function (i) { + that._fnClassUpdate( $(source).children()[i], $(dest).children()[i] ); + } ); + }, + + + /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Cloning functions + */ + + /* + * Function: _fnCloneThead + * Purpose: Clone the thead element + * Returns: - + * Inputs: object:oCache - the cached values for this fixed element + */ + _fnCloneThead: function ( oCache ) + { + var s = this.fnGetSettings(); + var nTable = oCache.nNode; + + if ( s.bInitComplete && !s.oCloneOnDraw.top ) + { + this._fnClassUpdate( $('thead', s.nTable)[0], $('thead', nTable)[0] ); + return; + } + + /* Set the wrapper width to match that of the cloned table */ + var iDtWidth = $(s.nTable).outerWidth(); + oCache.nWrapper.style.width = iDtWidth+"px"; + nTable.style.width = iDtWidth+"px"; + + /* Remove any children the cloned table has */ + while ( nTable.childNodes.length > 0 ) + { + $('thead th', nTable).unbind( 'click' ); + nTable.removeChild( nTable.childNodes[0] ); + } + + /* Clone the DataTables header */ + var nThead = $('thead', s.nTable).clone(true)[0]; + nTable.appendChild( nThead ); + + /* Copy the widths across - apparently a clone isn't good enough for this */ + var a = []; + var b = []; + + $("thead>tr th", s.nTable).each( function (i) { + a.push( $(this).width() ); + } ); + + $("thead>tr td", s.nTable).each( function (i) { + b.push( $(this).width() ); + } ); + + $("thead>tr th", s.nTable).each( function (i) { + $("thead>tr th:eq("+i+")", nTable).width( a[i] ); + $(this).width( a[i] ); + } ); + + $("thead>tr td", s.nTable).each( function (i) { + $("thead>tr td:eq("+i+")", nTable).width( b[i] ); + $(this).width( b[i] ); + } ); + + // Stop DataTables 1.9 from putting a focus ring on the headers when + // clicked to sort + $('th.sorting, th.sorting_desc, th.sorting_asc', nTable).bind( 'click', function () { + this.blur(); + } ); + }, + + /* + * Function: _fnCloneTfoot + * Purpose: Clone the tfoot element + * Returns: - + * Inputs: object:oCache - the cached values for this fixed element + */ + _fnCloneTfoot: function ( oCache ) + { + var s = this.fnGetSettings(); + var nTable = oCache.nNode; + + /* Set the wrapper width to match that of the cloned table */ + oCache.nWrapper.style.width = $(s.nTable).outerWidth()+"px"; + + /* Remove any children the cloned table has */ + while ( nTable.childNodes.length > 0 ) + { + nTable.removeChild( nTable.childNodes[0] ); + } + + /* Clone the DataTables footer */ + var nTfoot = $('tfoot', s.nTable).clone(true)[0]; + nTable.appendChild( nTfoot ); + + /* Copy the widths across - apparently a clone isn't good enough for this */ + $("tfoot:eq(0)>tr th", s.nTable).each( function (i) { + $("tfoot:eq(0)>tr th:eq("+i+")", nTable).width( $(this).width() ); + } ); + + $("tfoot:eq(0)>tr td", s.nTable).each( function (i) { + $("tfoot:eq(0)>tr td:eq("+i+")", nTable).width( $(this).width() ); + } ); + }, + + /* + * Function: _fnCloneTLeft + * Purpose: Clone the left column(s) + * Returns: - + * Inputs: object:oCache - the cached values for this fixed element + */ + _fnCloneTLeft: function ( oCache ) + { + var s = this.fnGetSettings(); + var nTable = oCache.nNode; + var nBody = $('tbody', s.nTable)[0]; + + /* Remove any children the cloned table has */ + while ( nTable.childNodes.length > 0 ) + { + nTable.removeChild( nTable.childNodes[0] ); + } + + /* Is this the most efficient way to do this - it looks horrible... */ + nTable.appendChild( $("thead", s.nTable).clone(true)[0] ); + nTable.appendChild( $("tbody", s.nTable).clone(true)[0] ); + if ( s.bFooter ) + { + nTable.appendChild( $("tfoot", s.nTable).clone(true)[0] ); + } + + /* Remove unneeded cells */ + var sSelector = 'gt(' + (oCache.iCells - 1) + ')'; + $('thead tr', nTable).each( function (k) { + $('th:' + sSelector, this).remove(); + } ); + + $('tfoot tr', nTable).each( function (k) { + $('th:' + sSelector, this).remove(); + } ); + + $('tbody tr', nTable).each( function (k) { + $('td:' + sSelector, this).remove(); + } ); + + this.fnEqualiseHeights( 'thead', nBody.parentNode, nTable ); + this.fnEqualiseHeights( 'tbody', nBody.parentNode, nTable ); + this.fnEqualiseHeights( 'tfoot', nBody.parentNode, nTable ); + + var iWidth = 0; + for (var i = 0; i < oCache.iCells; i++) { + iWidth += $('thead tr th:eq(' + i + ')', s.nTable).outerWidth(); + } + nTable.style.width = iWidth+"px"; + oCache.nWrapper.style.width = iWidth+"px"; + }, + + /* + * Function: _fnCloneTRight + * Purpose: Clone the right most column(s) + * Returns: - + * Inputs: object:oCache - the cached values for this fixed element + */ + _fnCloneTRight: function ( oCache ) + { + var s = this.fnGetSettings(); + var nBody = $('tbody', s.nTable)[0]; + var nTable = oCache.nNode; + var iCols = $('tbody tr:eq(0) td', s.nTable).length; + + /* Remove any children the cloned table has */ + while ( nTable.childNodes.length > 0 ) + { + nTable.removeChild( nTable.childNodes[0] ); + } + + /* Is this the most efficient way to do this - it looks horrible... */ + nTable.appendChild( $("thead", s.nTable).clone(true)[0] ); + nTable.appendChild( $("tbody", s.nTable).clone(true)[0] ); + if ( s.bFooter ) + { + nTable.appendChild( $("tfoot", s.nTable).clone(true)[0] ); + } + $('thead tr th:lt('+(iCols-oCache.iCells)+')', nTable).remove(); + $('tfoot tr th:lt('+(iCols-oCache.iCells)+')', nTable).remove(); + + /* Remove unneeded cells */ + $('tbody tr', nTable).each( function (k) { + $('td:lt('+(iCols-oCache.iCells)+')', this).remove(); + } ); + + this.fnEqualiseHeights( 'thead', nBody.parentNode, nTable ); + this.fnEqualiseHeights( 'tbody', nBody.parentNode, nTable ); + this.fnEqualiseHeights( 'tfoot', nBody.parentNode, nTable ); + + var iWidth = 0; + for (var i = 0; i < oCache.iCells; i++) { + iWidth += $('thead tr th:eq('+(iCols-1-i)+')', s.nTable).outerWidth(); + } + nTable.style.width = iWidth+"px"; + oCache.nWrapper.style.width = iWidth+"px"; + }, + + + /** + * Equalise the heights of the rows in a given table node in a cross browser way. Note that this + * is more or less lifted as is from FixedColumns + * @method fnEqualiseHeights + * @returns void + * @param {string} parent Node type - thead, tbody or tfoot + * @param {element} original Original node to take the heights from + * @param {element} clone Copy the heights to + * @private + */ + "fnEqualiseHeights": function ( parent, original, clone ) + { + var that = this; + var originals = $(parent +' tr', original); + var height; + + $(parent+' tr', clone).each( function (k) { + height = originals.eq( k ).css('height'); + + // This is nasty :-(. IE has a sub-pixel error even when setting + // the height below (the Firefox fix) which causes the fixed column + // to go out of alignment. Need to add a pixel before the assignment + // Can this be feature detected? Not sure how... + if ( navigator.appName == 'Microsoft Internet Explorer' ) { + height = parseInt( height, 10 ) + 1; + } + + $(this).css( 'height', height ); + + // For Firefox to work, we need to also set the height of the + // original row, to the value that we read from it! Otherwise there + // is a sub-pixel rounding error + originals.eq( k ).css( 'height', height ); + } ); + } +}; + + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Static properties and methods + * We use these for speed! This information is common to all instances of FixedHeader, so no + * point if having them calculated and stored for each different instance. + */ + +/* + * Variable: oWin + * Purpose: Store information about the window positioning + * Scope: FixedHeader + */ +FixedHeader.oWin = { + "iScrollTop": 0, + "iScrollRight": 0, + "iScrollBottom": 0, + "iScrollLeft": 0, + "iHeight": 0, + "iWidth": 0 +}; + +/* + * Variable: oDoc + * Purpose: Store information about the document size + * Scope: FixedHeader + */ +FixedHeader.oDoc = { + "iHeight": 0, + "iWidth": 0 +}; + +/* + * Variable: afnScroll + * Purpose: Array of functions that are to be used for the scrolling components + * Scope: FixedHeader + */ +FixedHeader.afnScroll = []; + +/* + * Function: fnMeasure + * Purpose: Update the measurements for the window and document + * Returns: - + * Inputs: - + */ +FixedHeader.fnMeasure = function () +{ + var + jqWin = $(window), + jqDoc = $(document), + oWin = FixedHeader.oWin, + oDoc = FixedHeader.oDoc; + + oDoc.iHeight = jqDoc.height(); + oDoc.iWidth = jqDoc.width(); + + oWin.iHeight = jqWin.height(); + oWin.iWidth = jqWin.width(); + oWin.iScrollTop = jqWin.scrollTop(); + oWin.iScrollLeft = jqWin.scrollLeft(); + oWin.iScrollRight = oDoc.iWidth - oWin.iScrollLeft - oWin.iWidth; + oWin.iScrollBottom = oDoc.iHeight - oWin.iScrollTop - oWin.iHeight; +}; + + +FixedHeader.version = "2.1.2"; + + +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * + * Global processing + */ + +/* + * Just one 'scroll' event handler in FixedHeader, which calls the required components. This is + * done as an optimisation, to reduce calculation and proagation time + */ +$(window).scroll( function () { + FixedHeader.fnMeasure(); + + for ( var i=0, iLen=FixedHeader.afnScroll.length ; i<iLen ; i++ ) { + FixedHeader.afnScroll[i](); + } +} ); + + +$.fn.dataTable.FixedHeader = FixedHeader; +$.fn.DataTable.FixedHeader = FixedHeader; + + +return FixedHeader; +}; // /factory + + +// Define as an AMD module if possible +if ( typeof define === 'function' && define.amd ) { + define( ['jquery', 'datatables'], factory ); +} +else if ( typeof exports === 'object' ) { + // Node/CommonJS + factory( require('jquery'), require('datatables') ); +} +else if ( jQuery && !jQuery.fn.dataTable.FixedHeader ) { + // Otherwise simply initialise as normal, stopping multiple evaluation + factory( jQuery, jQuery.fn.dataTable ); +} + + +})(window, document); diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html index b60b4ea9..d53f930d 100755 --- a/wqflask/wqflask/templates/correlation_page.html +++ b/wqflask/wqflask/templates/correlation_page.html @@ -144,6 +144,7 @@ <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script> <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script> @@ -228,15 +229,14 @@ { "type": "natural" }, { "type": "natural" } ], - "sDom": "Ztir", + "sDom": "RJtir", "iDisplayLength": -1, "autoWidth": true, "bLengthChange": true, "bDeferRender": true, "bSortClasses": false, - "scrollY": "600px", - "scrollX": true, - "scrollCollapse": true, + "scrollY": "700px", + "scrollCollapse": false, "colResize": { "tableWidthFixed": false }, @@ -257,15 +257,14 @@ { "type": "natural" }, { "type": "natural" } ], - "sDom": "Ztir", + "sDom": "RJtir", "iDisplayLength": -1, "autoWidth": true, "bLengthChange": true, "bDeferRender": true, "bSortClasses": false, - "scrollY": "600px", - "scrollX": true, - "scrollCollapse": true, + "scrollY": "700px", + "scrollCollapse": false, "colResize": { "tableWidthFixed": false }, @@ -281,15 +280,14 @@ { "type": "natural" }, { "type": "natural" } ], - "sDom": "Ztir", + "sDom": "RJtir", "iDisplayLength": -1, "autoWidth": true, "bLengthChange": true, "bDeferRender": true, "bSortClasses": false, - "scrollY": "600px", - "scrollX": true, - "scrollCollapse": true, + "scrollY": "700px", + "scrollCollapse": false, "colResize": { "tableWidthFixed": false }, @@ -298,11 +296,6 @@ {% endif %} console.timeEnd("Creating table"); - var table = $('#corr_results').DataTable(); - //new $.fn.dataTable.FixedHeader( table ); - new $.fn.dataTable.FixedColumns( table ); - - }); </script> {% endblock %} diff --git a/wqflask/wqflask/templates/search_result_page.html b/wqflask/wqflask/templates/search_result_page.html index 1ae2a25a..7c8bdb1b 100755 --- a/wqflask/wqflask/templates/search_result_page.html +++ b/wqflask/wqflask/templates/search_result_page.html @@ -4,7 +4,7 @@ <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" /> <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" /> <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" /> - <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedheader/2.1.2/css/dataTables.fixedHeader.css" > + <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/dataTables.fixedHeader.css" > <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css"> {% endblock %} {% block content %} @@ -47,7 +47,7 @@ <button class="btn btn-primary"><span class="glyphicon glyphicon-download"></span> Download Table</button> <br /> <br /> - <table class="table table-hover table-striped" id='trait_table' {% if dataset.type == 'Geno' %} width="400px" style="float: left;"{% endif %}> + <table class="table table-hover table-striped" id='trait_table' {% if dataset.type == 'Geno' %}width="400px"{% endif %} style="float: left;"> <thead> <tr> {% for header in header_fields %} @@ -119,11 +119,11 @@ <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.fixedHeader.js"></script> + <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script> - <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedheader/2.1.2/js/dataTables.fixedHeader.min.js"></script> - <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script> - <script type="text/javascript" charset="utf-8"> function getValue(x) { @@ -173,28 +173,33 @@ console.time("Creating table"); {% if dataset.type == 'ProbeSet' %} - $('#trait_table').dataTable( { + $('#trait_table').DataTable( { "columns": [ { "type": "natural" }, { "type": "natural" }, { "type": "natural" }, - { "type": "natural", "width": "35%"}, - { "type": "natural", "width": "15%"}, { "type": "natural" }, - { "type": "natural", "width": "8%"}, - { "type": "natural", "width": "15%"}, - { "type": "natural", "width": "7%"} + { "type": "natural" }, + { "type": "natural" }, + { "type": "natural" }, + { "type": "natural" }, + { "type": "natural" } ], - "sDom": "Ztir", + "sDom": "RJtir", "iDisplayLength": -1, "autoWidth": true, "bLengthChange": true, "bDeferRender": true, "bSortClasses": false, + "scrollY": "700px", + "scrollCollapse": false, + "colResize": { + "tableWidthFixed": false, + }, "paging": false } ); {% elif dataset.type == 'Publish' %} - $('#trait_table').dataTable( { + $('#trait_table').DataTable( { "columns": [ { "type": "natural" }, { "type": "natural" }, @@ -205,36 +210,46 @@ { "type": "natural", "width": "15%"}, { "type": "natural" } ], - "sDom": "Ztir", + "sDom": "RJtir", "iDisplayLength": -1, "autoWidth": true, "bLengthChange": true, "bDeferRender": true, "bSortClasses": false, + "scrollY": "700px", + "scrollCollapse": false, + "colResize": { + "tableWidthFixed": false, + }, "paging": false } ); {% elif dataset.type == 'Geno' %} - $('#trait_table').dataTable( { + $('#trait_table').DataTable( { "columns": [ { "type": "natural" }, { "type": "natural" }, { "type": "natural", "width": "40%"} ], - "sDom": "Ztir", + "sDom": "RJtir", "iDisplayLength": -1, "autoWidth": true, "bLengthChange": true, "bDeferRender": true, "bSortClasses": false, + "scrollY": "700px", + "scrollCollapse": false, + "colResize": { + "tableWidthFixed": false, + }, "paging": false } ); {% endif %} console.timeEnd("Creating table"); - - var table = $('#trait_table').DataTable(); - new $.fn.dataTable.FixedHeader( table ); - new $.fn.dataTable.FixedColumns( table ); + //var table = $('#trait_table').DataTable(); + //new $.fn.dataTable.FixedHeader( table ); + //new $.fn.dataTable.FixedColumns( table ); + }); </script> {% endblock %} diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html index cdde5d9d..b4d6b85b 100755 --- a/wqflask/wqflask/templates/show_trait.html +++ b/wqflask/wqflask/templates/show_trait.html @@ -13,6 +13,8 @@ <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" /> <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" /> <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/extensions/dataTables.fixedHeader.css" > + <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/fixedcolumns/3.0.4/css/dataTables.fixedColumns.css"> {% endblock %} {% block content %} <!-- Start of body --> @@ -146,6 +148,10 @@ <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.scientific.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.naturalSort.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colResize.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.colReorder.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/extensions/dataTables.fixedHeader.js"></script> + <script language="javascript" type="text/javascript" src="//cdn.datatables.net/fixedcolumns/3.0.4/js/dataTables.fixedColumns.min.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script> <script type="text/javascript" charset="utf-8"> @@ -195,68 +201,79 @@ }); console.time("Creating table"); - - {% if sample_groups[0].se_exists() %} - $('#samples_primary, #samples_other').find("tr.outlier").css('background-color', 'yellow') - $('#samples_primary, #samples_other').dataTable( { - //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>", - "aoColumns": [ - { "sType": "natural" }, - null, - { "sType": "cust-txt" }, - { "bSortable": false }, - { "sType": "cust-txt" } + + $('#samples_primary, #samples_other').find("tr.outlier").css('background-color', 'yellow') + {% if sample_groups[0].se_exists() %} + $('#samples_primary, #samples_other').DataTable( { + "columns": [ + { "type": "natural" }, + { "type": "natural" }, + { "type": "cust-txt" }, + { "bSortable": false }, + { "type": "cust-txt" } + ], + "sDom": "RJtir", + "oTableTools": { + "aButtons": [ + "copy", + "print", + { + "sExtends": "collection", + "sButtonText": 'Save <span class="caret" />', + "aButtons": [ "csv", "xls", "pdf" ] + } ], - "sDom": "ftr", - "oTableTools": { - "aButtons": [ - "copy", - "print", - { - "sExtends": "collection", - "sButtonText": 'Save <span class="caret" />', - "aButtons": [ "csv", "xls", "pdf" ] - } - ], - "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf" - }, - "bPaginate": false, - "bLengthChange": true, - "bDeferRender": true, - "bSortClasses": false - } ); - console.timeEnd("Creating table"); + "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf" + }, + "iDisplayLength": -1, + "autoWidth": true, + "bLengthChange": true, + "bDeferRender": true, + "bSortClasses": false, + "scrollY": "600px", + "scrollCollapse": false, + "colResize": { + "tableWidthFixed": false + }, + "paging": false + } ); + console.timeEnd("Creating table"); {% else %} - - - console.time("Creating table"); + console.time("Creating table"); - $('#samples_primary, #samples_other').dataTable( { - //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>", - "aoColumns": [ - { "sType": "natural" }, - null, - { "sType": "cust-txt" } + $('#samples_primary, #samples_other').DataTable( { + "columns": [ + { "type": "natural" }, + null, + { "type": "cust-txt" } + ], + "sDom": "RJtir", + "oTableTools": { + "aButtons": [ + "copy", + "print", + { + "sExtends": "collection", + "sButtonText": 'Save <span class="caret" />', + "aButtons": [ "csv", "xls", "pdf" ] + } ], - "sDom": "ftr", - "oTableTools": { - "aButtons": [ - "copy", - "print", - { - "sExtends": "collection", - "sButtonText": 'Save <span class="caret" />', - "aButtons": [ "csv", "xls", "pdf" ] - } - ], - "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf" - }, - "bPaginate": false, - "bLengthChange": true, - "bDeferRender": true, - "bSortClasses": false - } ); + "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf" + }, + "iDisplayLength": -1, + "autoWidth": true, + "bLengthChange": true, + "bDeferRender": true, + "bSortClasses": false, + "scrollY": "600px", + "scrollX": true, + "scrollCollapse": false, + "colResize": { + "tableWidthFixed": false + }, + "paging": false + } ); {% endif %} }); </script> diff --git a/wqflask/wqflask/templates/show_trait_edit_data.html b/wqflask/wqflask/templates/show_trait_edit_data.html index a02dc409..8c919ee0 100755 --- a/wqflask/wqflask/templates/show_trait_edit_data.html +++ b/wqflask/wqflask/templates/show_trait_edit_data.html @@ -73,26 +73,25 @@ <br> - <div id="edit_sample_lists"> + <!--<div id="edit_sample_lists">--> {% for sample_type in sample_groups %} - <div class="sample_group"> + <!--<div class="sample_group">--> <h3>{{ sample_type.header }}</h3> - <table cellpadding="0" cellspacing="0" border="0" class="table table-hover table-striped table-bordered" - id="samples_{{ sample_type.sample_group_type }}"> + <table class="table table-hover table-striped" id="samples_{{ sample_type.sample_group_type }}" style="float: left;"> <thead> <tr> - <td>Index</td> - <td>Sample</td> - <td>Value</td> + <th>Index</td> + <th>Sample</td> + <th>Value</td> {% if sample_type.se_exists() %} - <td> </td> - <td>SE</td> + <th> </td> + <th>SE</td> {% endif %} {% for attribute in sample_type.attributes|sort() %} - <td> + <th> {{ sample_type.attributes[attribute].name }} - </td> + </th> {% endfor %} </tr> </thead> @@ -148,9 +147,9 @@ {% endfor %} </tbody> </table> - </div> + <!--</div>--> {% endfor %} - </div> + <!--</div>--> <input type="hidden" name="Default_Name"> |