DataTable.js原始碼分析(一)

1.DataTable.js

DataTable.js是DT主檔案。在這個檔案裡會通過require引用同目錄下ext\js\core\api中的js檔案。以下劃線開頭的函式方法基本上

都是全域性變數，這些方法都在api和core兩個資料夾中。

/*!
 * @summary     DataTables
 * @description Paginate, search and sort HTML tables
 * @version     1.10.0-dev
 * @file        jquery.dataTables.js
 * @author      Allan Jardine (www.sprymedia.co.uk)
 * @contact     www.sprymedia.co.uk/contact
 *
 * @copyright Copyright 2008-2013 Allan Jardine.
 *//該原始檔是免費軟體。在以下許可證中可用：GPL V2、BSD、MIT
 * This source file is free software, available under the following licenses:
 *   GPL v2 license        - http://datatables.net/license_gpl2
 *   BSD (3 point) license - http://datatables.net/license_bsd
 *   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
 */


/*jslint evil: true, undef: true, browser: true */  jslint是一個javascript程式碼驗證工具。
/*globals  //全域性變數$,require,jQuery,define,_fnExternApiFunc,_fnInitialise,_fnInitComplete,_fnLanguageCompat,_fnAddColumn,_fnColumnOptions,_fnAddData,_fnCreateTr,_fnGatherData,_fnBuildHead,_fnDrawHead,_fnDraw,_fnReDraw,_fnAjaxUpdate,_fnAjaxParameters,_fnAjaxUpdateDraw,_fnAddOptionsHtml,_fnFeatureHtmlTable,_fnScrollDraw,_fnAdjustColumnSizing,_fnFeatureHtmlFilter,_fnFilterComplete,_fnFilterCustom,_fnFilterColumn,_fnFilter,_fnBuildSearchArray,_fnBuildSearchRow,_fnFilterCreateSearch,_fnDataToSearch,_fnSort,_fnSortAttachListener,_fnSortingClasses,_fnFeatureHtmlPaginate,_fnPageChange,_fnFeatureHtmlInfo,_fnUpdateInfo,_fnFeatureHtmlLength,_fnFeatureHtmlProcessing,_fnProcessingDisplay,_fnVisibleToColumnIndex,_fnColumnIndexToVisible,_fnNodeToDataIndex,_fnVisbleColumns,_fnConvertToWidth,_fnCalculateColumnWidths,_fnScrollingWidthAdjust,_fnGetWidestNode,_fnGetMaxLenString,_fnStringToCss,_fnDetectType,_fnSettingsFromNode,_fnGetDataMaster,_fnGetTrNodes,_fnGetTdNodes,_fnEscapeRegex,_fnDeleteIndex,_fnColumnOrdering,_fnLog,_fnClearTable,_fnSaveState,_fnLoadState,_fnDetectHeader,_fnGetUniqueThs,_fnScrollBarWidth,_fnApplyToChildren,_fnMap,_fnGetRowData,_fnGetCellData,_fnSetCellData,_fnGetObjectDataFn,_fnSetObjectDataFn,_fnApplyColumnDefs,_fnBindAction,_fnCallbackReg,_fnCallbackFire,_fnNodeToColumnIndex,_fnInfoMacros,_fnBrowserDetect,_fnGetColumns,_fnHungarianMap,_fnCamelToHungarian,_fnBuildAjax,_fnAjaxDataSrc*/

(/** @lends <global> */function( window, document, undefined ) {    //程式碼執行入口


(function( factory ) {
"use strict";    //引用嚴格模式


// Define as an AMD module if possible
if ( typeof define === 'function' && define.amd )
{
define( ['jquery'], factory );
}
/* Define using browser globals otherwise
* Prevent multiple instantiations if the script is loaded twice
*/
else if ( jQuery && !jQuery.fn.dataTable )
{
factory( jQuery );
}
}
(/** @lends <global> */function( $ ) {
"use strict";

/**
* DataTables is a plug-in for the jQuery Javascript library. It is a highly
* flexible tool, based upon the foundations of progressive enhancement,
* which will add advanced interaction controls to any HTML table. For a
* full list of features please refer to
* [DataTables.net](href="http://datatables.net).
*
* Note that the `DataTable` object is not a global variable but is aliased
* to `jQuery.fn.DataTable` and `jQuery.fn.dataTable` through which it may
* be  accessed.

//DT 物件不是一個全域性變數，而是以jQuery.fn.DataTable 和  jQuery.fn.dataTable 作為別名來引用。

*
*  @class
*  @param {object} [init={}] Configuration object for DataTables. Options
*    are defined by {@link DataTable.defaults}
*  @requires jQuery 1.3+
*
*  @example
*    // Basic initialisation
*    $(document).ready( function {
*      $('#example').dataTable();
*    } );
*
*  @example
*    // Initialisation with configuration options - in this case, disable
*    // pagination and sorting.
*    $(document).ready( function {
*      $('#example').dataTable( {      //初始化時的基本屬性配置
*        "paginate": false,
*        "sort": false
*      } );
*    } );
*/
var DataTable;

//引用核心資料夾裡的檔案。core資料夾裡主要定義了DT的非同步、分列、構造器、過濾、初始化、分頁、資料處理、滾動條、排序等方法。
require('core.compat.js');
require('core.columns.js');
require('core.data.js');
require('core.draw.js');
require('core.ajax.js');
require('core.filter.js');
require('core.info.js');
require('core.init.js');
require('core.length.js');
require('core.page.js');
require('core.processing.js');
require('core.scrolling.js');
require('core.sizing.js');
require('core.sort.js');
require('core.state.js');
require('core.support.js');

DataTable = function( oInit )
{
require('api.methods.js');
require('api.internal.js');

var _that = this;
this.each(function() {
require('core.constructor.js');
} );
_that = null;
return this;
};


require('api.core.js');
require('api.table.js');
require('api.draw.js');
require('api.page.js');
require('api.ajax.js');
require('api.order.js');
require('api._selectors.js');
require('api.rows.js');
require('api.columns.js');
require('api.static.js');


/**
* Version string for plug-ins to check compatibility. Allowed format is
* `a.b.c-d` where: a:int, b:int, c:int, d:string(dev|beta|alpha). `d` is used
* only for non-release builds. See http://semver.org/ for more information.
*  @member
*  @type string
*  @default Version number
*/
DataTable.version = "1.10.0-dev";

//私有資料儲存，包含表中給定頁中被建立的物件設定。
/**
* Private data store, containing all of the settings objects that are
* created for the tables on a given page.


*//注意：DT 被設定物件 主要通過名稱 jQuery.fn.dataTableExt或者jQuery.fn.dataTable.settings來引用和操作。
* Note that the `DataTable.settings` object is aliased to
* `jQuery.fn.dataTableExt` through which it may be accessed and
* manipulated, or `jQuery.fn.dataTable.settings`.
*  @member
*  @type array
*  @default []
*  @private
*/
DataTable.settings = [];


/**
* Object models container, for the various models that DataTables has
* available to it. These models define the objects that are used to hold
* the active state and configuration of the table.
*  @namespace
*/
DataTable.models = {};
require('model.ext.js');
require('model.search.js');
require('model.row.js');
require('model.column.js');
require('model.defaults.js');
require('model.defaults.columns.js');
require('model.settings.js');


/**
* Extension object for DataTables that is used to provide all extension
* options.
*
* Note that the `DataTable.ext` object is available through
* `jQuery.fn.dataTable.ext` where it may be accessed and manipulated. It is
* also aliased to `jQuery.fn.dataTableExt` for historic reasons.
*  @namespace
*  @extends DataTable.models.ext
*/
DataTable.ext = $.extend( true, {}, DataTable.models.ext );
require('ext.classes.js');
require('ext.paging.js');
require('ext.sorting.js');
require('ext.types.js');


// jQuery aliases
$.fn.dataTable = DataTable;
$.fn.DataTable = function ( opts ) {
return $(this).dataTable( opts ).api();
};
$.fn.dataTableSettings = DataTable.settings;
$.fn.dataTableExt = DataTable.ext;


//以下是DataTable事件資訊文件。

// Information about events fired by DataTables - for documentation.
/**
* Draw event, fired whenever the table is redrawn on the page, at the same
* point as fnDrawCallback. This may be useful for binding events or
* performing calculations when the table is altered at all.
*  @name DataTable#draw
*  @event
*  @param {event} e jQuery event object
*  @param {object} o DataTables settings object {@link DataTable.models.oSettings}
*/

//過濾事件
/**
* Filter event, fired when the filtering applied to the table (using the
* build in global global filter, or column filters) is altered.
*  @name DataTable#filter
*  @event
*  @param {event} e jQuery event object
*  @param {object} o DataTables settings object {@link DataTable.models.oSettings}
*/


//頁面更改事件
/**
* Page change event, fired when the paging of the table is altered.
*  @name DataTable#page
*  @event
*  @param {event} e jQuery event object
*  @param {object} o DataTables settings object {@link DataTable.models.oSettings}
*/

//排序事件
/**
* Sort event, fired when the sorting applied to the table is altered.
*  @name DataTable#sort
*  @event
*  @param {event} e jQuery event object
*  @param {object} o DataTables settings object {@link DataTable.models.oSettings}
*/

//DT初始化完成事件
/**
* DataTables initialisation complete event, fired when the table is fully
* drawn, including Ajax data loaded, if Ajax data is required.
*  @name DataTable#init
*  @event
*  @param {event} e jQuery event object
*  @param {object} oSettings DataTables settings object
*  @param {object} json The JSON object request from the server - only
*    present if client-side Ajax sourced data is used</li></ol>
*/


///////狀態儲存事件
/**
* State save event, fired when the table has changed state a new state save
* is required. This method allows modification of the state saving object
* prior to actually doing the save, including addition or other state
* properties (for plug-ins) or modification of a DataTables core property.
*  @name DataTable#stateSaveParams
*  @event
*  @param {event} e jQuery event object
*  @param {object} oSettings DataTables settings object
*  @param {object} json The state information to be saved
*/

//狀態載入事件
/**
* State load event, fired when the table is loading state from the stored
* data, but prior to the settings object being modified by the saved state
* - allowing modification of the saved state is required or loading of
* state for a plug-in.
*  @name DataTable#stateLoadParams
*  @event
*  @param {event} e jQuery event object
*  @param {object} oSettings DataTables settings object
*  @param {object} json The saved state information
*/


//狀態已載入事件。
/**
* State loaded event, fired when state has been loaded from stored data and
* the settings object has been modified by the loaded data.
*  @name DataTable#stateLoaded
*  @event
*  @param {event} e jQuery event object
*  @param {object} oSettings DataTables settings object
*  @param {object} json The saved state information
*/

//事件處理
/**
* Processing event, fired when DataTables is doing some kind of processing
* (be it, sort, filter or anything else). Can be used to indicate to the
* end user that there is something happening, or that something has
* finished.
*  @name DataTable#processing
*  @event
*  @param {event} e jQuery event object
*  @param {object} oSettings DataTables settings object
*  @param {boolean} bShow Flag for if DataTables is doing processing or not
*/

//非同步請求事件
/**
* Ajax (XHR) event, fired whenever an Ajax request is completed from a
* request to made to the server for new data. This event is called before
* DataTables processed the returned data, so it can also be used to pre-
* process the data returned from the server, if needed.
*
* Note that this trigger is called in `fnServerData`, if you override
* `fnServerData` and which to use this event, you need to trigger it in you
* success function.
*  @name DataTable#xhr
*  @event
*  @param {event} e jQuery event object
*  @param {object} o DataTables settings object {@link DataTable.models.oSettings}
*  @param {object} json JSON returned from the server
*
*  @example
*     // Use a custom property returned from the server in another DOM element
*     $('#table').dataTable().on('xhr', function (settings, json) {
*       $('#status').html( json.status );
*     } );
*
*  @example
*     // Pre-process the data returned from the server
*     $('#table').dataTable().on('xhr', function (settings, json) {
*       for ( var i=0, ien=json.aaData.length ; i<ien ; i++ ) {
*         json.aaData[i].sum = json.aaData[i].one + json.aaData[i].two;
*       }
*       // Note no return - manipulate the data directly in the JSON object.
*     } );
*/

//銷燬事件
/**
* Destroy event, fired when the DataTable is destroyed by calling fnDestroy
* or passing the bDestroy:true parameter in the initialisation object. This
* can be used to remove bound events, added DOM nodes, etc.
*  @name DataTable#destroy
*  @event
*  @param {event} e jQuery event object
*  @param {object} o DataTables settings object {@link DataTable.models.oSettings}
*/

/**
* Page length change event, fired when number of records to show on each
* page (the length) is changed.
*  @name DataTable#length
*  @event
*  @param {event} e jQuery event object
*  @param {object} o DataTables settings object {@link DataTable.models.oSettings}
*  @param {integer} len New length
*/
}));

}(window, document));
//DT的主要方法和函式都在api\core\ext\以及model四個資料夾中。