datatables如何获取当前page的数据的条数以及datables的一些有用的事件

如何获取当前page的数据条数这个问题的确用了我很大时间，其实很简单就是在页数改变的那个下拉菜单在原来的事件的基础上再加一些时间，这个方法和那个droptable的方法一样

$('#example tbody').on('click', 'tr', function () {

         var name = $( 'td' , this ).eq(0).text();

         alert( '你点击了 ' +name+ '这行' );

     } );

给每行添加点击事件

给下拉的那个绑定change事件

$('#example_length select').on('change', function () {

       page_length=$('#example_length select').val();


     } );

datatabels 自定义的一些事件

$(document).ready( function () {

     var eventFired = function (type) {

         var n = $( '#demo_info' )[0];

         n.innerHTML += '<div>' + type + ' 事件- ' + new Date().getTime() + '</div>' ;

         n.scrollTop = n.scrollHeight;

     }

     $( '#example' ).on( 'order.dt' ,

     function () {

         eventFired( '排序' );

     }).on( 'search.dt' ,

     function () {

         eventFired( '搜索' );

     }).on( 'page.dt' ,

     function () {

         eventFired( '翻页' );

     }).dataTable();

});

源码实现：http://dt.thxopen.com/example/advanced_init/dt_events.html

列渲染这个事件也很好用，给你想改变样式的那一列改变样式，加一些动作都可以，

通过 columns.render方法把年龄的值拼接到姓名列

$(document).ready( function () {

     $( '#example' ).dataTable({

         "columnDefs" : [{

             "render" : function (data, type, row) {

                 return data + ' (' + row[3] + ')' ;

             },

             "targets" : 0

         },

         {

             "visible" : false ,

             "targets" : [3]

         }]

     });


});


在多个页面使用Datatables，你可能将dom设置为公共的值，让所有的表格都有相同的布局，这个时候你可以使用 $.fn.dataTable.defaults 当设置此对象后，所有Datatables在初始化的时候都会使用这个参数设置



$.extend( $.fn.dataTable.defaults, {
    "searching": false,
    "ordering": false
} );
 
 
$(document).ready(function() {
    $('#example').dataTable();
} );

创建行回掉

$(document).ready(function() {
    $('#example').dataTable( {
        "createdRow": function ( row, data, index ) {
            if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
                $('td', row).eq(5).css('font-weight',"bold").css("color","red");
            }
        }
    } );
} );

注意columns.createdCell选项也可以实现同样的效果