天天看点

datatable的一些常用操作

var table=$('#table');

var oTable = table.DataTable()

1、表格中点击某控件处理方法

table.on('click','.edit',function(e){

    e.preventDefault();

    var  row = $(this).parents('tr')[0];

    var data = oTable.rows(row).data()[0];

});

'.edit'是需要添加click事件的控件的class

2、点击表格行处理方法

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

    if(event.target.tagName=="TD"){

        oTable.$('tr.clickActive').removeClass('clickActive');

        $(this).toggleClass('clickActive');

        var data = oTable.rows(this).data(); 

    }

});

3、动态为表格添加行

var rowNode = oTable.row.add({

    "列名":列值

}).draw().node(); //添加一行记录

$(rowNode).css('color','red');//设置新增的行为红色

4、删除行并原地刷新

table.on('click','.delete',function(e){

    e.preventDefault();

    var row = $(this).parents('tr');

    var data = oTable.rows(row).data()[0];

   //获取行数据并删除服务端数据,然后删除datatable对应行

    oTable.row(row).remove().draw();

.delete 是被点出的控件的class

});