1Table的初始化以及国际化
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": "
"//为最后一列添加按钮标签}
],
"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": "
",
"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"//设置分页按钮显示的样式，
});
});
2Tr的操作
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中的所有对象，包括页面上将要显示的对象。
3DataTable的使用案例
3.1案例一源码
3.2案例二源码
<%@page language="java"contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@taglib uri="https://www.doczj.com/doc/a54199239.html,/jsp/jstl/core"prefix="c"%>
<%@taglib prefix="fmt"uri="https://www.doczj.com/doc/a54199239.html,/jsp/jstl/fmt"%>
| 客户 | 证件类型 | 交易类型 | 录单日期 | 录单人员 | 操作 | |
|---|---|---|---|---|---|---|
| 客户 | 证件类型 | 交易类型 | 录单日期 | 录单人员 | 操作 |