DataTable源代码分析（一）
1.DataTable.js
DataTable.js是DT主文件。在这个文件里会通过require引用同目录下ext\js\core\api中的js文件。以下划线开头的函数方法基本上
都是全局变量，这些方法都在api和core两个文件夹中。
// source_code_analysis
/*!
* @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
*/
(/** @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四个文件夹中。
扫一扫
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
