JQuery DataTable1.10 插件开发

1.API插件
可以自己写一个方法供全局API对象使用。这样可以加入到API对象的链式操作中。

DT的API对象是类似数组的

引用

array like

，同JQ一样，所以也可以调用一些数组的属性和方法比如.length

自定义的插件方法的执行域就是就是一个API实例，也就是说你在方法体内写this.rows()就等于rows.
一个页面中可能有多个DT，每一个DT就是一个API的实例对象。在自定义方法中，可以通过this.context可以获得一个API实例的数组。

使用$.fn.dataTable.Api.register()注册一个自定义方法
需要两个参数

1.方法名：一个链式的表达式。体现了自定义方法的作用域。

2.方法实现，一个function()定义具体逻辑。

例子
1.写一个全局的sum函数。可以根据data求和

$.fn.dataTable.Api.register( 'sum()', function () {
    var sum = 0;
 
    for ( var i=0, ien=this.length ; i<ien ; i++ ) {
        sum += this[i];
    }
 
    return sum;
} );

调用：

table.column( 2 ).data().sum();
`table.cells( '.selected', 3 ).data().sum();

2.给row加上class.这次考虑上了多个DT实例的情况：

$.fn.dataTable.Api.register( 'rows().addClass()', function ( klass ) {
    var context = this.context;
 
    for ( var i=0, ien=this.length ; i<ien ; i++ ) {
        var innerApi = new $.fn.dataTable.Api( context[i] );
 
        for ( var j=0, jen=this[i].length ; j<jen ; j++ ) {
            var node = innerApi.row( this[i][j] ).node();
            $(node).addClass( klass );
        }
    }
 
    return this;
} );

方法将返回一个二维数组。第一维所含table的index，第二纬是每一个table中的元素数组

DataTables还提供了一个iterator来简化这双层for循环。他会执行for循环，并把循环信息提供给一个闭包函数。

简化的代码:

$.fn.dataTable.Api.register( 'rows().addClass()', function ( klass ) {
    return this.iterator( 'row', function ( context, index ) {
        var node = new $.fn.dataTable.Api( context ).row( index ).node();
        $(node).addClass( klass );
    } );
} );

在1.10.3中，这个操作更一步简化，iterator的回调函数的执行域为API对象实例。
可以直接在回调函数是用this（即把context里的table 自动变为this了）

$.fn.dataTable.Api.register( 'rows().addClass()', function ( klass ) {
    return this.iterator( 'row', function ( context, index ) {
        var node = this.row( index ).node();
        $(node).addClass( klass );
    } );
} );

2.功能特性插件（Feature plug-in）
添加功能性的插件。比方说在DT中多加一些html元素，并给他实现一些功能。

有三种初始化的方法：

1.new $.fn.dataTable or $.fn.DataTable
2.通过dom中的一个字母指定
3.DataTables的初始化事件

第一种：new:
方法定义：

$.fn.dataTable.Filtering = function ( table, options ) {
  // ... plug-in logic
};
 
$.fn.DataTable.Filtering = $.fn.dataTable.Filtering;

注意方法名应该跟在$.fn.dataTable 或 $.fn.DataTable后面这样开发者可以访问到
约定：
1.方法名首字母大写
2.第一个参数为DT实例对象或 table选择器或者JQ对象或者DT setting option对象。
因为new $.fn.dataTable.Api( table );这个方法会根据以上的选项创建一个DT API对象
3.第二个参数一般为一个Object对应的是你的插件所提供的配置选项 -->option。一般我们会指定一个默认值。如果他设置了覆盖。用JQ的extends作实现即可。

调用：

var table = $('#myTable').DataTable();
var filter = new $.fn.dataTable.Filtering( table );

第二种：dom中的字母指定
定义DT时可以通过dom属性指定他相关组件的位置。
内建的组件有：

l - length changing input control
f - filtering input
t - The table!
i - Table information summary
p - pagination control
r - processing display element

支持的特定写法：

< and > - div element
<"class" and > - div with a class
<"#id" and > - div with an ID

例子：

/* Results in:
    <div class="wrapper">
      {filter}
      {length}
      {information}
      {pagination}
      {table}
    </div>
*/
$('#example').dataTable( {
  "dom": '<"wrapper"flipt>'
} );


/* Results in:
    <div>
      {length}
      {filter}
      <div>
        {table}
      </div>
      {information}
      {pagination}
    </div>
*/
$('#example').dataTable( {
  "dom": '<lf<t>ip>'
} );


/* Results in:
    <div class="top">
      {information}
    </div>
    {processing}
    {table}
    <div class="bottom">
      {filter}
      {length}
      {pagination}
    </div>
    <div class="clear"></div>
*/
$('#example').dataTable( {
  "dom": '<"top"i>rt<"bottom"flp><"clear">'
} );

所以我们也可以通过这种方式自定义个字母表示自己的插件
一般约定内建的用小写字母，我们加的用大写
这种方式对于那些要额外添加一些dom元素的插件比较好用，他可以给最终的用户提供一个选择的机会。（选择是不是用，展现的位置等等）

用这种方式要通过 $.fn.dataTable.ext.feature来注册我们写的插件对象（他就是一个数组形式，通过push等这些方法操作）
注册的对象包含两部分{fnInit--执行方法,cFeature--字母}
1.fnInit:初始化的时候，如果在dom属性找到我们的插件对应的字母，就执行这个方法初始化插件
入参：

引用

DataTables settings object

返回值。可选，类型是Node，即一个dom元素包含了我们定义的功能。如果插件不新增html dom元素，这个返回值可以使undefined
cFeature 分配一个字母，用于DT的dom属性指定。一般大写~

例子：

注册的部分：

$.fn.dataTable.ext.feature.push( {
    fnInit: function ( settings ) {
        var filter = new $.fn.dataTable.Filtering( settings );//就是上面那个函数，这里也可以自己新定义一个。
        return filter.node(); // input element
    },
    cFeature: 'F'
} );

调用：

$('#myTable').DataTable( {
    dom: 'lFrtip'
} );

第三种:监听初始化事件的时候，加入定义好的方法
直接上代码：

$(document).on( 'init.dt.dtr', function (e, settings, json) {
    new $.fn.dataTable.Filtering( settings );
} );
//init是DT中的事件。dt是后缀。代表datatable中的的事件。

JQuery DataTable1.10 插件开发

猜你喜欢