JQuery DataTable1.10 插件开发

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

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

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

[color=darkred]使用$.fn.dataTable.Api.register()注册一个自定义方法[/color]
需要两个参数
[list]
[*]1.方法名：一个链式的表达式。体现了自定义方法的作用域。
比方说我们定于了一个方法叫sum().
如果写rows().sum().那么sum之作用域rows()返回的结果集
如果写sum().他就是一个顶层的方法。任何API实例都可以调用。
[*]2.方法实现，一个function()定义具体逻辑。
方法的执行域就是API对象实例
他可以返回值任何值（如果没有返回值，那么会放回链式对象本身）
接受任何的参数
[/list]

例子
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 );
    } );
} );

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

有三种初始化的方法：
[list]
[*]1.new [color=darkred]$.fn.dataTable[/color] or [color=darkred]$.fn.DataTable[/color]
[*]2.通过dom中的一个字母 指定
[*]3.DataTables的初始化事件
[/list]

[color=darkred]第一种：new:[/color]
方法定义：

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

$.fn.DataTable.Filtering = $.fn.dataTable.Filtering;

注意 方法名应该跟在$.fn.dataTable 或 $.fn.DataTable后面 这样开发者可以访问到
[color=darkred]约定：[/color]
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 );

[color=red]第二种：dom中的字母指定[/color]
定义DT时可以通过dom属性指定他相关组件的位置。
内建的组件有：
[list]
[*]l - length changing input control
[*]f - filtering input
[*]t - The table!
[*]i - Table information summary
[*]p - pagination control
[*]r - processing display element
[/list]
支持的特定写法：
[list]
[*]< and > - div element
[*]<"class" and > - div with a class
[*]<"#id" and > - div with an ID
[/list]
例子：

/* 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元素的插件比较好用，他可以给最终的用户提供一个选择的机会。（选择是不是用，展现的位置等等）

用这种方式要通过[color=darkred]$.fn.dataTable.ext.feature[/color]来注册我们写的插件对象（他就是一个数组形式，通过push等这些方法操作）
注册的对象包含两部分{fnInit--执行方法,cFeature--字母}
[color=darkred]1.fnInit[/color]:初始化的时候，如果在dom属性找到我们的插件对应的字母，就执行这个方法初始化插件
入参：[quote]DataTables settings object[/quote]
返回值。可选，类型是Node，即一个dom元素包含了我们定义的功能。如果插件不新增html dom元素，这个返回值可以使undefined
[color=darkred]cFeature[/color] 分配一个字母，用于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'
} );

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

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