Jquery.dataTable表格控件源代码重点难点分析

pzhu1

于 2024-03-18 21:12:53 发布

阅读量713

点赞数 17

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/u013384469/article/details/136821947

版权

jquery datatable源代码结构：

入口函数（构造函数）：
var DataTable = function ( options ){
   // this = $()对象
   this.api = function ( traditional ) // 给$()对象增加属性，api返回插件实例
       {
           return traditional ?
               new _Api(
                   _fnSettingsFromNode( this[ _ext.iApiIndex ] ) // 从DataTable.settings取tbody数据
               ) :
               new _Api( this );
       };

   this.each(function() { // 一般来说页面就一个table容器，就一个实例，但源代码是按多实例写的，所以用了each。
       var oInit = // 传入的tbody数据保存在oInit
       var oSettings = // oInit保存到oSettings
       var allSettings = DataTable.settings;
       allSettings.push( oSettings ); // oSettings保存到allSettings->DataTable.settings，是$()对象内置函数dataTable的一个属性，从$()也能看到
   })

   return this; // 返回jquery对象$()增加了方法等属性
}

// jQuery access
$.fn.dataTable = DataTable; // 外部用$().dataTable()方式调用，传入的tbody数据保存在DataTable的属性中(settings)

调插件时传入的tbody数据，插件是如何保存的？如何看到这个数据？：
var oTable = $(table-id).dataTable(options); // 用oTable接收返回的实例
console.log(oTable)

$(table-id).dataTable(options); // 可以不接收返回的实例，插件入口初始化函数会把实例保存到$(table-id).dataTable。
console.log($(table-id).dataTable.settings)
console.log($(table-id))

// 以上均能看到tbody数据，插件代码把数据保存到jquery对象中，具体来说是保存到$().dataTable对象中。

代码整体结构：
(function(factory){
factory();
}(function(){
var dataTable = function(options){

}
dataTable.settings = {};
$.fn.dataTable = dataTable;
}) // 匿名函数里面直接引用全局变量$，无需(function($){}($))传参
);

$(table-id).dataTable(options);

它是定义一个dataTable函数（类）存储在jquery对象里面，以便通过jquery对象调用，在dataTable对象里面定义了一个settings对象属性，
做为存储数据的大本营。

简化写法其实就是如下：

config();

$(table-id).dataTable(options);

function config(){
var dataTable = function(options){
// this就是$()
}
dataTable.settings = {};
$.fn.dataTable = dataTable;
};

当用$(table-id).dataTable(options)多次反复调用插件时，插件要判断是否传参，是否第一次运行，是否要执行初始化table代码，
是否返回实例，其代码是：

如果上述检查不通过，就返回不处理了，如果上述检查通过了，才继续往下执行初始化table的代码。

做一个测试，重复调两次插件：
$(table-id).dataTable(options);
$(table-id).dataTable(options);

第一次执行时DataTable.settings为空。
第一次执行时保存实例：oSettings.oInstance = (_that.length===1) ? _that : $this.dataTable();
第一次执行调_fnInitialise()根据传入的数据或者用传入的ajax获取的数据构造table插入页面。

第二次执行时bRetrieve/bDestroy = false，输出错误结束代码执行，如果传参为空，emptyInit=true，返回settings里面的oInstance($()对象)。
第二次传不同的参数也一样报错。

datatable布局：
var sDom = "t<'row-fluid' <'iconfont icon-shaixuan sxBox'>"+searchbox+"<'exchange-rate'><p><i><'datatable-fy iconfont icon-tingchechang' l>>"

插件解析sDom字符串构造html：
   function _fnAddOptionsHtml ( oSettings )
   {

       // All DataTables are wrapped in a div
       var insert = $('<div/>', {
           id: oSettings.sTableId+'_wrapper',
           'class': classes.sWrapper + (oSettings.nTFoot ? '' : ' '+classes.sNoFooter)
       } );

这个插件有个重要功能就是排序，table点击表头可以按列数据重新排序，排序处理函数_fnSort，用arr.sort(fn)对tr数组重新排序，写一个比较函数即可：
displayMaster.sort( function ( a, b ) {

}
displayMaster是一个排序数组：
displayMaster = $(table-id).dataTable.settings[0].aiDisplayMaster);
其初始值是[0,1,2,3,...]，数组index就是页面tr的index，值是tr在原始数据中对应的index，重新排序之后，比如倒序排序之后，此数组变为[...3,2,1,0],
最后一行tr在原始数据中的index=0没变，只是在这个数组的位置变成了最后一个，按这个数组循环构造tr，原来第一个tr就在最后一个。

点击重新排序是对这个数组重新排序，排序是用index找列数据值比较数据值的大小，并不是比较index的大小，然后根据这个数组重新构造table/tr，相当于tbodyList的顺序变了，但数据没变，只是重构页面tr。

// 点击表头th事件绑定：
function _fnInitialise ( settings ){
_fnBuildHead( settings );

function _fnBuildHead( oSettings ){
_fnSortAttachListener( oSettings, column.nTh, i );

function _fnSortAttachListener ( settings, attachTo, colIdx, callback ){
_fnBindAction( attachTo, {}, function (e) {
_fnSortListener( settings, colIdx, e.shiftKey, callback );

function _fnBindAction( n, oData, fn ){
       $(n)
           .on( 'click.DT', oData, function (e) {
                   n.blur(); // Remove focus outline for mouse users
                   fn(e); // fn是传入的匿名函数，会调_fnSortListener
               } )

function _fnSortListener ( settings, colIdx, append, callback ){
   // Run the sort by calling a full redraw
_fnReDraw( settings );


function _fnReDraw( settings, holdPosition ){
   _fnSort( settings );

function _fnSort ( oSettings ){
displayMaster.sort( function ( a, b ) {

}
}

它底层就是用$().on()绑定事件，只是层层封装复杂，插件绑定事件的代码很难找到，因为它封装得复杂。
前端是数据呈现，界面和交互，事件绑定是最重要的代码，一般不会轻易让你找出来。

事件可以写namespace，在解除绑定时可以用namespace解除具有相同namespace的事件，效率高，但
绑定事件时namespace无效，比如click.xxx，没有click.xxx事件，除非插件自己触发产生click.xxx逻辑事件。

$(document).on("click.xxx", function(){ // 点击有效
console.log('click')
})
$(document).off(".xxx"); // 解除绑定有效

有一个函数能检测浏览器：
function _fnBrowserDetect( settings )

它是构造元素插入页面，再读取属性，从而判断浏览器是否支持某种属性。

fixed-columns.js是实现固定列，比如左边第一列，当水平方向滚动table时，第一列固定不动。
它其实是把第一列复制一份，浮动定位在第一列显示，把第一列盖住，造成第一列没有滚动的假象。
固定列有个问题，当第一列是checkbox需要点击选取时，由于table真正的第一列被遮挡，就没法点击了。

差几案代码还涉及到Hungarian变量命名法：
m_lpszStr
iMyData

其实变量命名是任意的，只要符合js的规定即可，压缩代码全是abcd没有换行，是最不规范的代码，除了效率之外，
就是成心让你没法看。

这个插件考虑到ajax分页获取数据问题，应用可以写一个ajax函数传递给插件，由插件代为执行：
options.ajax = function(data, callback, settings){
   准备参数...
   调接口获取数据...
   调插件的callback(传获取的table数据)

插件调应用的ajax函数时会传callback，应用处理完最后调callback继续执行插件的代码，应用ajax函数代码与插件无关，
如何调接口获取数据是应用代码的事情，插件不涉及这个事情，插件只管得到table数据构造table。

插件有关ajax和分页的处理代码如下：
分页块构造代码：
function _fnFeatureHtmlPaginate ( settings ){

代码在DT_bootstrap.js中：
"fnInit": function( oSettings, nPaging, fnDraw ) {

分页按钮构造以及绑定点击事件：
"fnUpdate": function ( oSettings, fnDraw ) {
   for ( j=iStart ; j<=iEnd ; j++ ) {
                   sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
                   $('<li '+sClass+'><a href="#">'+j+'</a></li>')
                       .insertBefore( $('li:last', an[i])[0] )
                       .bind('click', function (e) {
                           e.preventDefault();
                           oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
                           fnDraw( oSettings );
                       } );

function _fnAjaxUpdate( settings ){

   _fnBuildAjax(
               settings,
               _fnAjaxParameters( settings ),
               function(json) {
                   _fnAjaxUpdateDraw( settings, json );
               }
           );

function _fnBuildAjax( oSettings, data, fn ){
   var ajax = oSettings.ajax;
       var instance = oSettings.oInstance;
       var callback = function ( json ) {
           _fnCallbackFire( oSettings, null, 'xhr', [oSettings, json, oSettings.jqXHR] );
           fn( json );
       };
   oSettings.jqXHR = ajax.call( instance, data, callback, oSettings );