JQuery DataTable1.10 插件开发

杉林的HelloWord 2014-10-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.方法名:一个链式的表达式。体现了自定义方法的作用域。比方说我们定于了一个方法叫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属性找到我们的插件对应的字母,就执行这个方法初始化插件

入参:
引用
DataTables settings object

返回值。可选,类型是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中的的事件。

相关推荐

Mrchai / 0评论 2009-07-24