webapp/resources/datatables-1.9.4/extras/ColReorder/media/js/ColReorder.js

   1 /*
   2  * File:        ColReorder.js
   3  * Version:     1.0.8
   4  * CVS:         $Id$
   5  * Description: Allow columns to be reordered in a DataTable
   6  * Author:      Allan Jardine (www.sprymedia.co.uk)
   7  * Created:     Wed Sep 15 18:23:29 BST 2010
   8  * Modified:    $Date$ by $Author$
   9  * Language:    Javascript
  10  * License:     GPL v2 or BSD 3 point style
  11  * Project:     DataTables
  12  * Contact:     www.sprymedia.co.uk/contact
  13  *
  14  * Copyright 2010-2011 Allan Jardine, all rights reserved.
  15  *
  16  * This source file is free software, under either the GPL v2 license or a
  17  * BSD style license, available at:
  18  *   http://datatables.net/license_gpl2
  19  *   http://datatables.net/license_bsd
  20  *
  21  */
  22
  23
  24 (function($, window, document) {
  25
  26
  27 /**
  28  * Switch the key value pairing of an index array to be value key (i.e. the old value is now the
  29  * key). For example consider [ 2, 0, 1 ] this would be returned as [ 1, 2, 0 ].
  30  *  @method  fnInvertKeyValues
  31  *  @param   array aIn Array to switch around
  32  *  @returns array
  33  */
  34 function fnInvertKeyValues( aIn )
  35 {
  36         var aRet=[];
  37         for ( var i=0, iLen=aIn.length ; i<iLen ; i++ )
  38         {
  39                 aRet[ aIn[i] ] = i;
  40         }
  41         return aRet;
  42 }
  43
  44
  45 /**
  46  * Modify an array by switching the position of two elements
  47  *  @method  fnArraySwitch
  48  *  @param   array aArray Array to consider, will be modified by reference (i.e. no return)
  49  *  @param   int iFrom From point
  50  *  @param   int iTo Insert point
  51  *  @returns void
  52  */
  53 function fnArraySwitch( aArray, iFrom, iTo )
  54 {
  55         var mStore = aArray.splice( iFrom, 1 )[0];
  56         aArray.splice( iTo, 0, mStore );
  57 }
  58
  59
  60 /**
  61  * Switch the positions of nodes in a parent node (note this is specifically designed for
  62  * table rows). Note this function considers all element nodes under the parent!
  63  *  @method  fnDomSwitch
  64  *  @param   string sTag Tag to consider
  65  *  @param   int iFrom Element to move
  66  *  @param   int Point to element the element to (before this point), can be null for append
  67  *  @returns void
  68  */
  69 function fnDomSwitch( nParent, iFrom, iTo )
  70 {
  71         var anTags = [];
  72         for ( var i=0, iLen=nParent.childNodes.length ; i<iLen ; i++ )
  73         {
  74                 if ( nParent.childNodes[i].nodeType == 1 )
  75                 {
  76                         anTags.push( nParent.childNodes[i] );
  77                 }
  78         }
  79         var nStore = anTags[ iFrom ];
  80
  81         if ( iTo !== null )
  82         {
  83                 nParent.insertBefore( nStore, anTags[iTo] );
  84         }
  85         else
  86         {
  87                 nParent.appendChild( nStore );
  88         }
  89 }
  90
  91
  92
  93 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
  94  * DataTables plug-in API functions
  95  *
  96  * This are required by ColReorder in order to perform the tasks required, and also keep this
  97  * code portable, to be used for other column reordering projects with DataTables, if needed.
  98  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
  99
 100
 101 /**
 102  * Plug-in for DataTables which will reorder the internal column structure by taking the column
 103  * from one position (iFrom) and insert it into a given point (iTo).
 104  *  @method  $.fn.dataTableExt.oApi.fnColReorder
 105  *  @param   object oSettings DataTables settings object - automatically added by DataTables!
 106  *  @param   int iFrom Take the column to be repositioned from this point
 107  *  @param   int iTo and insert it into this point
 108  *  @returns void
 109  */
 110 $.fn.dataTableExt.oApi.fnColReorder = function ( oSettings, iFrom, iTo )
 111 {
 112         var i, iLen, j, jLen, iCols=oSettings.aoColumns.length, nTrs, oCol;
 113
 114         /* Sanity check in the input */
 115         if ( iFrom == iTo )
 116         {
 117                 /* Pointless reorder */
 118                 return;
 119         }
 120
 121         if ( iFrom < 0 || iFrom >= iCols )
 122         {
 123                 this.oApi._fnLog( oSettings, 1, "ColReorder 'from' index is out of bounds: "+iFrom );
 124                 return;
 125         }
 126
 127         if ( iTo < 0 || iTo >= iCols )
 128         {
 129                 this.oApi._fnLog( oSettings, 1, "ColReorder 'to' index is out of bounds: "+iTo );
 130                 return;
 131         }
 132
 133         /*
 134          * Calculate the new column array index, so we have a mapping between the old and new
 135          */
 136         var aiMapping = [];
 137         for ( i=0, iLen=iCols ; i<iLen ; i++ )
 138         {
 139                 aiMapping[i] = i;
 140         }
 141         fnArraySwitch( aiMapping, iFrom, iTo );
 142         var aiInvertMapping = fnInvertKeyValues( aiMapping );
 143
 144
 145         /*
 146          * Convert all internal indexing to the new column order indexes
 147          */
 148         /* Sorting */
 149         for ( i=0, iLen=oSettings.aaSorting.length ; i<iLen ; i++ )
 150         {
 151                 oSettings.aaSorting[i][0] = aiInvertMapping[ oSettings.aaSorting[i][0] ];
 152         }
 153
 154         /* Fixed sorting */
 155         if ( oSettings.aaSortingFixed !== null )
 156         {
 157                 for ( i=0, iLen=oSettings.aaSortingFixed.length ; i<iLen ; i++ )
 158                 {
 159                         oSettings.aaSortingFixed[i][0] = aiInvertMapping[ oSettings.aaSortingFixed[i][0] ];
 160                 }
 161         }
 162
 163         /* Data column sorting (the column which the sort for a given column should take place on) */
 164         for ( i=0, iLen=iCols ; i<iLen ; i++ )
 165         {
 166                 oCol = oSettings.aoColumns[i];
 167                 for ( j=0, jLen=oCol.aDataSort.length ; j<jLen ; j++ )
 168                 {
 169                         oCol.aDataSort[j] = aiInvertMapping[ oCol.aDataSort[j] ];
 170                 }
 171         }
 172
 173         /* Update the Get and Set functions for each column */
 174         for ( i=0, iLen=iCols ; i<iLen ; i++ )
 175         {
 176                 oCol = oSettings.aoColumns[i];
 177                 if ( typeof oCol.mData == 'number' ) {
 178                         oCol.mData = aiInvertMapping[ oCol.mData ];
 179                         oCol.fnGetData = oSettings.oApi._fnGetObjectDataFn( oCol.mData );
 180                         oCol.fnSetData = oSettings.oApi._fnSetObjectDataFn( oCol.mData );
 181                 }
 182         }
 183
 184
 185         /*
 186          * Move the DOM elements
 187          */
 188         if ( oSettings.aoColumns[iFrom].bVisible )
 189         {
 190                 /* Calculate the current visible index and the point to insert the node before. The insert
 191                  * before needs to take into account that there might not be an element to insert before,
 192                  * in which case it will be null, and an appendChild should be used
 193                  */
 194                 var iVisibleIndex = this.oApi._fnColumnIndexToVisible( oSettings, iFrom );
 195                 var iInsertBeforeIndex = null;
 196
 197                 i = iTo < iFrom ? iTo : iTo + 1;
 198                 while ( iInsertBeforeIndex === null && i < iCols )
 199                 {
 200                         iInsertBeforeIndex = this.oApi._fnColumnIndexToVisible( oSettings, i );
 201                         i++;
 202                 }
 203
 204                 /* Header */
 205                 nTrs = oSettings.nTHead.getElementsByTagName('tr');
 206                 for ( i=0, iLen=nTrs.length ; i<iLen ; i++ )
 207                 {
 208                         fnDomSwitch( nTrs[i], iVisibleIndex, iInsertBeforeIndex );
 209                 }
 210
 211                 /* Footer */
 212                 if ( oSettings.nTFoot !== null )
 213                 {
 214                         nTrs = oSettings.nTFoot.getElementsByTagName('tr');
 215                         for ( i=0, iLen=nTrs.length ; i<iLen ; i++ )
 216                         {
 217                                 fnDomSwitch( nTrs[i], iVisibleIndex, iInsertBeforeIndex );
 218                         }
 219                 }
 220
 221                 /* Body */
 222                 for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ )
 223                 {
 224                         if ( oSettings.aoData[i].nTr !== null )
 225                         {
 226                                 fnDomSwitch( oSettings.aoData[i].nTr, iVisibleIndex, iInsertBeforeIndex );
 227                         }
 228                 }
 229         }
 230
 231
 232         /*
 233          * Move the internal array elements
 234          */
 235         /* Columns */
 236         fnArraySwitch( oSettings.aoColumns, iFrom, iTo );
 237
 238         /* Search columns */
 239         fnArraySwitch( oSettings.aoPreSearchCols, iFrom, iTo );
 240
 241         /* Array array - internal data anodes cache */
 242         for ( i=0, iLen=oSettings.aoData.length ; i<iLen ; i++ )
 243         {
 244                 if ( $.isArray( oSettings.aoData[i]._aData ) ) {
 245                   fnArraySwitch( oSettings.aoData[i]._aData, iFrom, iTo );
 246                 }
 247                 fnArraySwitch( oSettings.aoData[i]._anHidden, iFrom, iTo );
 248         }
 249
 250         /* Reposition the header elements in the header layout array */
 251         for ( i=0, iLen=oSettings.aoHeader.length ; i<iLen ; i++ )
 252         {
 253                 fnArraySwitch( oSettings.aoHeader[i], iFrom, iTo );
 254         }
 255
 256         if ( oSettings.aoFooter !== null )
 257         {
 258                 for ( i=0, iLen=oSettings.aoFooter.length ; i<iLen ; i++ )
 259                 {
 260                         fnArraySwitch( oSettings.aoFooter[i], iFrom, iTo );
 261                 }
 262         }
 263
 264
 265         /*
 266          * Update DataTables' event handlers
 267          */
 268
 269         /* Sort listener */
 270         for ( i=0, iLen=iCols ; i<iLen ; i++ )
 271         {
 272                 $(oSettings.aoColumns[i].nTh).unbind('click');
 273                 this.oApi._fnSortAttachListener( oSettings, oSettings.aoColumns[i].nTh, i );
 274         }
 275
 276
 277         /* Fire an event so other plug-ins can update */
 278         $(oSettings.oInstance).trigger( 'column-reorder', [ oSettings, {
 279                 "iFrom": iFrom,
 280                 "iTo": iTo,
 281                 "aiInvertMapping": aiInvertMapping
 282         } ] );
 283
 284         if ( typeof oSettings.oInstance._oPluginFixedHeader != 'undefined' )
 285         {
 286                 oSettings.oInstance._oPluginFixedHeader.fnUpdate();
 287         }
 288 };
 289
 290
 291
 292
 293 /**
 294  * ColReorder provides column visiblity control for DataTables
 295  * @class ColReorder
 296  * @constructor
 297  * @param {object} DataTables settings object
 298  * @param {object} ColReorder options
 299  */
 300 ColReorder = function( oDTSettings, oOpts )
 301 {
 302         /* Santiy check that we are a new instance */
 303         if ( !this.CLASS || this.CLASS != "ColReorder" )
 304         {
 305                 alert( "Warning: ColReorder must be initialised with the keyword 'new'" );
 306         }
 307
 308         if ( typeof oOpts == 'undefined' )
 309         {
 310                 oOpts = {};
 311         }
 312
 313
 314         /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 315          * Public class variables
 316          * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 317
 318         /**
 319          * @namespace Settings object which contains customisable information for ColReorder instance
 320          */
 321         this.s = {
 322                 /**
 323                  * DataTables settings object
 324                  *  @property dt
 325                  *  @type     Object
 326                  *  @default  null
 327                  */
 328                 "dt": null,
 329
 330                 /**
 331                  * Initialisation object used for this instance
 332                  *  @property init
 333                  *  @type     object
 334                  *  @default  {}
 335                  */
 336                 "init": oOpts,
 337
 338                 /**
 339                  * Number of columns to fix (not allow to be reordered)
 340                  *  @property fixed
 341                  *  @type     int
 342                  *  @default  0
 343                  */
 344                 "fixed": 0,
 345
 346                 /**
 347                  * Callback function for once the reorder has been done
 348                  *  @property dropcallback
 349                  *  @type     function
 350                  *  @default  null
 351                  */
 352                 "dropCallback": null,
 353
 354                 /**
 355                  * @namespace Information used for the mouse drag
 356                  */
 357                 "mouse": {
 358                         "startX": -1,
 359                         "startY": -1,
 360                         "offsetX": -1,
 361                         "offsetY": -1,
 362                         "target": -1,
 363                         "targetIndex": -1,
 364                         "fromIndex": -1
 365                 },
 366
 367                 /**
 368                  * Information which is used for positioning the insert cusor and knowing where to do the
 369                  * insert. Array of objects with the properties:
 370                  *   x: x-axis position
 371                  *   to: insert point
 372                  *  @property aoTargets
 373                  *  @type     array
 374                  *  @default  []
 375                  */
 376                 "aoTargets": []
 377         };
 378
 379
 380         /**
 381          * @namespace Common and useful DOM elements for the class instance
 382          */
 383         this.dom = {
 384                 /**
 385                  * Dragging element (the one the mouse is moving)
 386                  *  @property drag
 387                  *  @type     element
 388                  *  @default  null
 389                  */
 390                 "drag": null,
 391
 392                 /**
 393                  * The insert cursor
 394                  *  @property pointer
 395                  *  @type     element
 396                  *  @default  null
 397                  */
 398                 "pointer": null
 399         };
 400
 401
 402         /* Constructor logic */
 403         this.s.dt = oDTSettings.oInstance.fnSettings();
 404         this._fnConstruct();
 405
 406         /* Add destroy callback */
 407         oDTSettings.oApi._fnCallbackReg(oDTSettings, 'aoDestroyCallback', jQuery.proxy(this._fnDestroy, this), 'ColReorder');
 408
 409         /* Store the instance for later use */
 410         ColReorder.aoInstances.push( this );
 411         return this;
 412 };
 413
 414
 415
 416 ColReorder.prototype = {
 417         /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 418          * Public methods
 419          * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 420
 421         "fnReset": function ()
 422         {
 423                 var a = [];
 424                 for ( var i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
 425                 {
 426                         a.push( this.s.dt.aoColumns[i]._ColReorder_iOrigCol );
 427                 }
 428
 429                 this._fnOrderColumns( a );
 430         },
 431
 432
 433         /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 434          * Private methods (they are of course public in JS, but recommended as private)
 435          * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 436
 437         /**
 438          * Constructor logic
 439          *  @method  _fnConstruct
 440          *  @returns void
 441          *  @private
 442          */
 443         "_fnConstruct": function ()
 444         {
 445                 var that = this;
 446                 var i, iLen;
 447
 448                 /* Columns discounted from reordering - counting left to right */
 449                 if ( typeof this.s.init.iFixedColumns != 'undefined' )
 450                 {
 451                         this.s.fixed = this.s.init.iFixedColumns;
 452                 }
 453
 454                 /* Drop callback initialisation option */
 455                 if ( typeof this.s.init.fnReorderCallback != 'undefined' )
 456                 {
 457                         this.s.dropCallback = this.s.init.fnReorderCallback;
 458                 }
 459
 460                 /* Add event handlers for the drag and drop, and also mark the original column order */
 461                 for ( i=0, iLen=this.s.dt.aoColumns.length ; i<iLen ; i++ )
 462                 {
 463                         if ( i > this.s.fixed-1 )
 464                         {
 465                                 this._fnMouseListener( i, this.s.dt.aoColumns[i].nTh );
 466                         }
 467
 468                         /* Mark the original column order for later reference */
 469                         this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
 470                 }
 471
 472                 /* State saving */
 473                 this.s.dt.oApi._fnCallbackReg( this.s.dt, 'aoStateSaveParams', function (oS, oData) {
 474                         that._fnStateSave.call( that, oData );
 475                 }, "ColReorder_State" );
 476
 477                 /* An initial column order has been specified */
 478                 var aiOrder = null;
 479                 if ( typeof this.s.init.aiOrder != 'undefined' )
 480                 {
 481                         aiOrder = this.s.init.aiOrder.slice();
 482                 }
 483
 484                 /* State loading, overrides the column order given */
 485                 if ( this.s.dt.oLoadedState && typeof this.s.dt.oLoadedState.ColReorder != 'undefined' &&
 486                   this.s.dt.oLoadedState.ColReorder.length == this.s.dt.aoColumns.length )
 487                 {
 488                         aiOrder = this.s.dt.oLoadedState.ColReorder;
 489                 }
 490
 491                 /* If we have an order to apply - do so */
 492                 if ( aiOrder )
 493                 {
 494                         /* We might be called during or after the DataTables initialisation. If before, then we need
 495                          * to wait until the draw is done, if after, then do what we need to do right away
 496                          */
 497                         if ( !that.s.dt._bInitComplete )
 498                         {
 499                                 var bDone = false;
 500                                 this.s.dt.aoDrawCallback.push( {
 501                                         "fn": function () {
 502                                                 if ( !that.s.dt._bInitComplete && !bDone )
 503                                                 {
 504                                                         bDone = true;
 505                                                         var resort = fnInvertKeyValues( aiOrder );
 506                                                         that._fnOrderColumns.call( that, resort );
 507                                                 }
 508                                         },
 509                                         "sName": "ColReorder_Pre"
 510                                 } );
 511                         }
 512                         else
 513                         {
 514                                 var resort = fnInvertKeyValues( aiOrder );
 515                                 that._fnOrderColumns.call( that, resort );
 516                         }
 517                 }
 518         },
 519
 520
 521         /**
 522          * Set the column order from an array
 523          *  @method  _fnOrderColumns
 524          *  @param   array a An array of integers which dictate the column order that should be applied
 525          *  @returns void
 526          *  @private
 527          */
 528         "_fnOrderColumns": function ( a )
 529         {
 530                 if ( a.length != this.s.dt.aoColumns.length )
 531                 {
 532                         this.s.dt.oInstance.oApi._fnLog( this.s.dt, 1, "ColReorder - array reorder does not "+
 533                                 "match known number of columns. Skipping." );
 534                         return;
 535                 }
 536
 537                 for ( var i=0, iLen=a.length ; i<iLen ; i++ )
 538                 {
 539                         var currIndex = $.inArray( i, a );
 540                         if ( i != currIndex )
 541                         {
 542                                 /* Reorder our switching array */
 543                                 fnArraySwitch( a, currIndex, i );
 544
 545                                 /* Do the column reorder in the table */
 546                                 this.s.dt.oInstance.fnColReorder( currIndex, i );
 547                         }
 548                 }
 549
 550                 /* When scrolling we need to recalculate the column sizes to allow for the shift */
 551                 if ( this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== "" )
 552                 {
 553                         this.s.dt.oInstance.fnAdjustColumnSizing();
 554                 }
 555
 556                 /* Save the state */
 557                 this.s.dt.oInstance.oApi._fnSaveState( this.s.dt );
 558         },
 559
 560
 561         /**
 562          * Because we change the indexes of columns in the table, relative to their starting point
 563          * we need to reorder the state columns to what they are at the starting point so we can
 564          * then rearrange them again on state load!
 565          *  @method  _fnStateSave
 566          *  @param   object oState DataTables state
 567          *  @returns string JSON encoded cookie string for DataTables
 568          *  @private
 569          */
 570         "_fnStateSave": function ( oState )
 571         {
 572                 var i, iLen, aCopy, iOrigColumn;
 573                 var oSettings = this.s.dt;
 574
 575                 /* Sorting */
 576                 for ( i=0 ; i<oState.aaSorting.length ; i++ )
 577                 {
 578                         oState.aaSorting[i][0] = oSettings.aoColumns[ oState.aaSorting[i][0] ]._ColReorder_iOrigCol;
 579                 }
 580
 581                 aSearchCopy = $.extend( true, [], oState.aoSearchCols );
 582                 oState.ColReorder = [];
 583
 584                 for ( i=0, iLen=oSettings.aoColumns.length ; i<iLen ; i++ )
 585                 {
 586                         iOrigColumn = oSettings.aoColumns[i]._ColReorder_iOrigCol;
 587
 588                         /* Column filter */
 589                         oState.aoSearchCols[ iOrigColumn ] = aSearchCopy[i];
 590
 591                         /* Visibility */
 592                         oState.abVisCols[ iOrigColumn ] = oSettings.aoColumns[i].bVisible;
 593
 594                         /* Column reordering */
 595                         oState.ColReorder.push( iOrigColumn );
 596                 }
 597         },
 598
 599
 600         /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 601          * Mouse drop and drag
 602          */
 603
 604         /**
 605          * Add a mouse down listener to a particluar TH element
 606          *  @method  _fnMouseListener
 607          *  @param   int i Column index
 608          *  @param   element nTh TH element clicked on
 609          *  @returns void
 610          *  @private
 611          */
 612         "_fnMouseListener": function ( i, nTh )
 613         {
 614                 var that = this;
 615                 $(nTh).bind( 'mousedown.ColReorder', function (e) {
 616                         e.preventDefault();
 617                         that._fnMouseDown.call( that, e, nTh );
 618                 } );
 619         },
 620
 621
 622         /**
 623          * Mouse down on a TH element in the table header
 624          *  @method  _fnMouseDown
 625          *  @param   event e Mouse event
 626          *  @param   element nTh TH element to be dragged
 627          *  @returns void
 628          *  @private
 629          */
 630         "_fnMouseDown": function ( e, nTh )
 631         {
 632                 var
 633                         that = this,
 634                         aoColumns = this.s.dt.aoColumns;
 635
 636                 /* Store information about the mouse position */
 637                 var nThTarget = e.target.nodeName == "TH" ? e.target : $(e.target).parents('TH')[0];
 638                 var offset = $(nThTarget).offset();
 639                 this.s.mouse.startX = e.pageX;
 640                 this.s.mouse.startY = e.pageY;
 641                 this.s.mouse.offsetX = e.pageX - offset.left;
 642                 this.s.mouse.offsetY = e.pageY - offset.top;
 643                 this.s.mouse.target = nTh;
 644                 this.s.mouse.targetIndex = $('th', nTh.parentNode).index( nTh );
 645                 this.s.mouse.fromIndex = this.s.dt.oInstance.oApi._fnVisibleToColumnIndex( this.s.dt,
 646                         this.s.mouse.targetIndex );
 647
 648                 /* Calculate a cached array with the points of the column inserts, and the 'to' points */
 649                 this.s.aoTargets.splice( 0, this.s.aoTargets.length );
 650
 651                 this.s.aoTargets.push( {
 652                         "x":  $(this.s.dt.nTable).offset().left,
 653                         "to": 0
 654                 } );
 655
 656                 var iToPoint = 0;
 657                 for ( var i=0, iLen=aoColumns.length ; i<iLen ; i++ )
 658                 {
 659                         /* For the column / header in question, we want it's position to remain the same if the
 660                          * position is just to it's immediate left or right, so we only incremement the counter for
 661                          * other columns
 662                          */
 663                         if ( i != this.s.mouse.fromIndex )
 664                         {
 665                                 iToPoint++;
 666                         }
 667
 668                         if ( aoColumns[i].bVisible )
 669                         {
 670                                 this.s.aoTargets.push( {
 671                                         "x":  $(aoColumns[i].nTh).offset().left + $(aoColumns[i].nTh).outerWidth(),
 672                                         "to": iToPoint
 673                                 } );
 674                         }
 675                 }
 676
 677                 /* Disallow columns for being reordered by drag and drop, counting left to right */
 678                 if ( this.s.fixed !== 0 )
 679                 {
 680                         this.s.aoTargets.splice( 0, this.s.fixed );
 681                 }
 682
 683                 /* Add event handlers to the document */
 684                 $(document).bind( 'mousemove.ColReorder', function (e) {
 685                         that._fnMouseMove.call( that, e );
 686                 } );
 687
 688                 $(document).bind( 'mouseup.ColReorder', function (e) {
 689                         that._fnMouseUp.call( that, e );
 690                 } );
 691         },
 692
 693
 694         /**
 695          * Deal with a mouse move event while dragging a node
 696          *  @method  _fnMouseMove
 697          *  @param   event e Mouse event
 698          *  @returns void
 699          *  @private
 700          */
 701         "_fnMouseMove": function ( e )
 702         {
 703                 var that = this;
 704
 705                 if ( this.dom.drag === null )
 706                 {
 707                         /* Only create the drag element if the mouse has moved a specific distance from the start
 708                          * point - this allows the user to make small mouse movements when sorting and not have a
 709                          * possibly confusing drag element showing up
 710                          */
 711                         if ( Math.pow(
 712                                 Math.pow(e.pageX - this.s.mouse.startX, 2) +
 713                                 Math.pow(e.pageY - this.s.mouse.startY, 2), 0.5 ) < 5 )
 714                         {
 715                                 return;
 716                         }
 717                         this._fnCreateDragNode();
 718                 }
 719
 720                 /* Position the element - we respect where in the element the click occured */
 721                 this.dom.drag.style.left = (e.pageX - this.s.mouse.offsetX) + "px";
 722                 this.dom.drag.style.top = (e.pageY - this.s.mouse.offsetY) + "px";
 723
 724                 /* Based on the current mouse position, calculate where the insert should go */
 725                 var bSet = false;
 726                 for ( var i=1, iLen=this.s.aoTargets.length ; i<iLen ; i++ )
 727                 {
 728                         if ( e.pageX < this.s.aoTargets[i-1].x + ((this.s.aoTargets[i].x-this.s.aoTargets[i-1].x)/2) )
 729                         {
 730                                 this.dom.pointer.style.left = this.s.aoTargets[i-1].x +"px";
 731                                 this.s.mouse.toIndex = this.s.aoTargets[i-1].to;
 732                                 bSet = true;
 733                                 break;
 734                         }
 735                 }
 736
 737                 /* The insert element wasn't positioned in the array (less than operator), so we put it at
 738                  * the end
 739                  */
 740                 if ( !bSet )
 741                 {
 742                         this.dom.pointer.style.left = this.s.aoTargets[this.s.aoTargets.length-1].x +"px";
 743                         this.s.mouse.toIndex = this.s.aoTargets[this.s.aoTargets.length-1].to;
 744                 }
 745         },
 746
 747
 748         /**
 749          * Finish off the mouse drag and insert the column where needed
 750          *  @method  _fnMouseUp
 751          *  @param   event e Mouse event
 752          *  @returns void
 753          *  @private
 754          */
 755         "_fnMouseUp": function ( e )
 756         {
 757                 var that = this;
 758
 759                 $(document).unbind( 'mousemove.ColReorder' );
 760                 $(document).unbind( 'mouseup.ColReorder' );
 761
 762                 if ( this.dom.drag !== null )
 763                 {
 764                         /* Remove the guide elements */
 765                         document.body.removeChild( this.dom.drag );
 766                         document.body.removeChild( this.dom.pointer );
 767                         this.dom.drag = null;
 768                         this.dom.pointer = null;
 769
 770                         /* Actually do the reorder */
 771                         this.s.dt.oInstance.fnColReorder( this.s.mouse.fromIndex, this.s.mouse.toIndex );
 772
 773                         /* When scrolling we need to recalculate the column sizes to allow for the shift */
 774                         if ( this.s.dt.oScroll.sX !== "" || this.s.dt.oScroll.sY !== "" )
 775                         {
 776                                 this.s.dt.oInstance.fnAdjustColumnSizing();
 777                         }
 778
 779                         if ( this.s.dropCallback !== null )
 780                         {
 781                                 this.s.dropCallback.call( this );
 782                         }
 783
 784                         /* Save the state */
 785                         this.s.dt.oInstance.oApi._fnSaveState( this.s.dt );
 786                 }
 787         },
 788
 789
 790         /**
 791          * Copy the TH element that is being drags so the user has the idea that they are actually
 792          * moving it around the page.
 793          *  @method  _fnCreateDragNode
 794          *  @returns void
 795          *  @private
 796          */
 797         "_fnCreateDragNode": function ()
 798         {
 799                 var that = this;
 800
 801                 this.dom.drag = $(this.s.dt.nTHead.parentNode).clone(true)[0];
 802                 this.dom.drag.className += " DTCR_clonedTable";
 803                 while ( this.dom.drag.getElementsByTagName('caption').length > 0 )
 804                 {
 805                         this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('caption')[0] );
 806                 }
 807                 while ( this.dom.drag.getElementsByTagName('tbody').length > 0 )
 808                 {
 809                         this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('tbody')[0] );
 810                 }
 811                 while ( this.dom.drag.getElementsByTagName('tfoot').length > 0 )
 812                 {
 813                         this.dom.drag.removeChild( this.dom.drag.getElementsByTagName('tfoot')[0] );
 814                 }
 815
 816                 $('thead tr:eq(0)', this.dom.drag).each( function () {
 817                         $('th', this).eq(that.s.mouse.targetIndex).siblings().remove();
 818                 } );
 819                 $('tr', this.dom.drag).height( $('tr:eq(0)', that.s.dt.nTHead).height() );
 820
 821                 $('thead tr:gt(0)', this.dom.drag).remove();
 822
 823                 $('thead th:eq(0)', this.dom.drag).each( function (i) {
 824                         this.style.width = $('th:eq('+that.s.mouse.targetIndex+')', that.s.dt.nTHead).width()+"px";
 825                 } );
 826
 827                 this.dom.drag.style.position = "absolute";
 828                 this.dom.drag.style.top = "0px";
 829                 this.dom.drag.style.left = "0px";
 830                 this.dom.drag.style.width = $('th:eq('+that.s.mouse.targetIndex+')', that.s.dt.nTHead).outerWidth()+"px";
 831
 832
 833                 this.dom.pointer = document.createElement( 'div' );
 834                 this.dom.pointer.className = "DTCR_pointer";
 835                 this.dom.pointer.style.position = "absolute";
 836
 837                 if ( this.s.dt.oScroll.sX === "" && this.s.dt.oScroll.sY === "" )
 838                 {
 839                         this.dom.pointer.style.top = $(this.s.dt.nTable).offset().top+"px";
 840                         this.dom.pointer.style.height = $(this.s.dt.nTable).height()+"px";
 841                 }
 842                 else
 843                 {
 844                         this.dom.pointer.style.top = $('div.dataTables_scroll', this.s.dt.nTableWrapper).offset().top+"px";
 845                         this.dom.pointer.style.height = $('div.dataTables_scroll', this.s.dt.nTableWrapper).height()+"px";
 846                 }
 847
 848                 document.body.appendChild( this.dom.pointer );
 849                 document.body.appendChild( this.dom.drag );
 850         },
 851
 852         /**
 853          * Clean up ColReorder memory references and event handlers
 854          *  @method  _fnDestroy
 855          *  @returns void
 856          *  @private
 857          */
 858         "_fnDestroy": function ()
 859         {
 860                 for ( var i=0, iLen=ColReorder.aoInstances.length ; i<iLen ; i++ )
 861                 {
 862                         if ( ColReorder.aoInstances[i] === this )
 863                         {
 864                                 ColReorder.aoInstances.splice( i, 1 );
 865                                 break;
 866                         }
 867                 }
 868
 869                 $(this.s.dt.nTHead).find( '*' ).unbind( '.ColReorder' );
 870
 871                 this.s.dt.oInstance._oPluginColReorder = null;
 872                 this.s = null;
 873         }
 874 };
 875
 876
 877
 878
 879
 880 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 881  * Static parameters
 882  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 883
 884 /**
 885  * Array of all ColReorder instances for later reference
 886  *  @property ColReorder.aoInstances
 887  *  @type     array
 888  *  @default  []
 889  *  @static
 890  */
 891 ColReorder.aoInstances = [];
 892
 893
 894
 895
 896
 897 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 898  * Static functions
 899  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 900
 901 /**
 902  * Reset the column ordering for a DataTables instance
 903  *  @method  ColReorder.fnReset
 904  *  @param   object oTable DataTables instance to consider
 905  *  @returns void
 906  *  @static
 907  */
 908 ColReorder.fnReset = function ( oTable )
 909 {
 910         for ( var i=0, iLen=ColReorder.aoInstances.length ; i<iLen ; i++ )
 911         {
 912                 if ( ColReorder.aoInstances[i].s.dt.oInstance == oTable )
 913                 {
 914                         ColReorder.aoInstances[i].fnReset();
 915                 }
 916         }
 917 };
 918
 919
 920
 921
 922
 923 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 924  * Constants
 925  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 926
 927 /**
 928  * Name of this class
 929  *  @constant CLASS
 930  *  @type     String
 931  *  @default  ColReorder
 932  */
 933 ColReorder.prototype.CLASS = "ColReorder";
 934
 935
 936 /**
 937  * ColReorder version
 938  *  @constant  VERSION
 939  *  @type      String
 940  *  @default   As code
 941  */
 942 ColReorder.VERSION = "1.0.8";
 943 ColReorder.prototype.VERSION = ColReorder.VERSION;
 944
 945
 946
 947
 948
 949 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 950  * Initialisation
 951  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 952
 953 /*
 954  * Register a new feature with DataTables
 955  */
 956 if ( typeof $.fn.dataTable == "function" &&
 957      typeof $.fn.dataTableExt.fnVersionCheck == "function" &&
 958      $.fn.dataTableExt.fnVersionCheck('1.9.3') )
 959 {
 960         $.fn.dataTableExt.aoFeatures.push( {
 961                 "fnInit": function( oDTSettings ) {
 962                         var oTable = oDTSettings.oInstance;
 963                         if ( typeof oTable._oPluginColReorder == 'undefined' ) {
 964                                 var opts = typeof oDTSettings.oInit.oColReorder != 'undefined' ?
 965                                         oDTSettings.oInit.oColReorder : {};
 966                                 oTable._oPluginColReorder = new ColReorder( oDTSettings, opts );
 967                         } else {
 968                                 oTable.oApi._fnLog( oDTSettings, 1, "ColReorder attempted to initialise twice. Ignoring second" );
 969                         }
 970
 971                         return null; /* No node to insert */
 972                 },
 973                 "cFeature": "R",
 974                 "sFeature": "ColReorder"
 975         } );
 976 }
 977 else
 978 {
 979         alert( "Warning: ColReorder requires DataTables 1.9.3 or greater - www.datatables.net/download");
 980 }
 981
 982 })(jQuery, window, document);