DataTable.js源代码分析(一)

小咪咪 2021-06-26 16:06 441阅读 0赞

## 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四个文件夹中。