JQuery DataTable1.10 插件开发

1.API插件

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

DT的API对象是类似数组的，同JQ一样，所以也可以调用一些数组的属性和方法 比如.length

自定义的插件方法的执行域就是就是一个API实例，也就是说你在方法体内写this.rows()就等于rows.

一个页面中可能有多个DT，每一个DT就是一个API的实例对象。在自定义方法中，可以通过this.context可以获得一个API实例的数组。

使用$.fn.dataTable.Api.register()注册一个自定义方法

需要两个参数

• 1.方法名：一个链式的表达式。体现了自定义方法的作用域。比方说我们定于了一个方法叫sum().

如果写rows().sum().那么sum之作用域rows()返回的结果集

如果写sum().他就是一个顶层的方法。任何API实例都可以调用。

2.方法实现，一个function()定义具体逻辑。方法的执行域就是API对象实例

他可以返回值任何值（如果没有返回值，那么会放回链式对象本身）

接受任何的参数

例子

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.功能特性插件（Featureplug-in）

添加功能性的插件。比方说在DT中多加一些html元素，并给他实现一些功能。

有三种初始化的方法：

• 1.new$.fn.dataTableor$.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对象或者DTsettingoption对象。

因为new$.fn.dataTable.Api(table);这个方法会根据以上的选项创建一个DTAPI对象

3.第二个参数一般为一个Object对应的是你的插件所提供的配置选项-->option。一般我们会指定一个默认值。如果他设置了覆盖。用JQ的extends作实现即可。

调用：

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

第二种：dom中的字母指定

定义DT时可以通过dom属性指定他相关组件的位置。

内建的组件有：

• l-lengthchanginginputcontrol
• f-filteringinput
• t-Thetable!
• i-Tableinformationsummary
• p-paginationcontrol
• r-processingdisplayelement

支持的特定写法：

• <and>-divelement
• <"class"and>-divwithaclass
• <"#id"and>-divwithanID

例子：

/* 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属性找到我们的插件对应的字母，就执行这个方法初始化插件

入参：

返回值。可选，类型是Node，即一个dom元素包含了我们定义的功能。如果插件不新增htmldom元素，这个返回值可以使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中的的事件。