DataTables从入门到精通

1 Table的初始化以及国际化

1.1 默认初始化

$(function(){
    var table = $('#example').dataTable();
});

1.2 高级自定义初始化

$(function() {
var table = $('#example').DataTable({
    "data" : dataArray,//数据源
    "aoColumnDefs":[//设置列的属性，此处设置第一列不排序
       {
"bSortable": false, 
"aTargets": [0]//指第一列，aTargets与targets均可以指定某一列
},{
               "targets": [7],
               "visible": false,//隐藏列
               "searchable": false//不参与搜索
           },{
        "targets": -1,
        "class": "but_xq",
        "bSortable": false,
        "data": null,
        "defaultContent": "<p><a id=\"del\"  href=\"###\">删除</a></p>"//为最后一列添加按钮标签
        } 
      ],
    "aaSorting": [[1, "desc"]], //给列表排序 ，第一个参数列的索引号(由0开始)。1 表示第二列。第二个参数为 desc或是asc,表示升序或者降序。即：从第二列开始倒序排序
    "oLanguage": {//插件的汉化
        "sLengthMenu": "每页 _MENU_ 条数据",
        "sZeroRecords": "抱歉， 没有找到",
        "sInfo": "_START_ 到 _END_ /共 _TOTAL_ 条数据",
        "sInfoEmpty": "没有数据",
        "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "前一页",
            "sNext": "后一页",
            "sLast": "尾页"
        },
        "sZeroRecords": "没有检索到数据",
        "sProcessing": "<img src='/static/images/loadd.gif' />",
        "sSearch": "搜索"
    },
    "sDom":'<"top"lf<"clear">>rt<"bottom"ip<"clear">>',//自定义布局sdom：l- 每行显示的记录数;f- 搜索框;t- 表格;i- 表格信息;p- 分页条;r- 加载时的进度条
    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "全部"]],//每页显示条数的设置
    "sPaginationType": "full_numbers"//设置分页按钮显示的样式，
});
});

2 Tr的操作

2.1 获取tr对象的集合

获取所有页的所有tr集合：

$('#example').dataTable().fnGetNodes();

获取当前页的所有tr集合：

$('tr');

获取当前页的所有选中的tr集合：
$(‘tr.selected’);
点击最后一列的按钮，获取当前行：

$('#example').DataTable().row($(this).parents('tr'));//对象,可以用于删除该行等操作
$(this).parents('tr')[0];//可以获取改行的所有节点，以及各个节点的数值

2.2 获取tr的数据

2.2.1 根据列中的按钮获取行数据

$('#example tbody').on( 'click', 'a#edit', function () {
    var data =     $('#example').DataTable().row($(this).parents('tr')).data();
    alert("查看修改："+data[1] +","+ data[2] );
} );

2.2.2 批量获取选中行的数据

var data = $('#example').DataTable().rows('.selected').data();

2.3 删除TR

$('#example tbody').on( 'click', 'a#del', function () {
var tr = $('#example').DataTable().row($(this).parents('tr'));
    tr.remove().draw(false);
} );

2.4 为TR绑定事件

比如为最后一列的查看修改按钮绑定单击事件，正确的方式如下：

$('#example tbody').on( 'click', 'a#edit', function () {
    var data = $('#example').DataTable().row($(this).parents('tr')).data();
    alert("查看修改："+data[1] +","+ data[2] );
} );

如果修改成如下的方式，则只能为首页的按钮绑定事件，其他页则没有绑定上单击事件，错误绑定方式代码如下：

$('a#edit').click( function () {
        var data = $('#example').DataTable().row($(this).parents('tr')).data();
    alert("查看修改："+data[1] +","+ data[2] );
} );

因为$('a#edit')选定的是页面上存在的元素，控件默认只显示第一页的数据，因此只绑定在了第一页上。而$(‘#example tbody’)针对的是table中的所有对象，包括页面上将要显示的对象。