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中的所有对象，包括页面上将要显示的对象。