您的位置:首页 > Web前端 > JQuery

Jquery.dataTable 分页表格

2016-11-01 15:19 316 查看

最简单的调用方式

$(document).ready(function() {
$("#example").dataTable()
})


也可以自己定义各属性

$(document).ready(function() {
$("#example").dataTable({
"bPaginate": true, //开关,是否显示分页器
"bInfo": true, //开关,是否显示表格的一些信息
"bFilter": true, //开关,是否启用客户端过滤器
"sDom": "<>lfrtip<>",
"bAutoWith": false,
"bDeferRender": false,
"bJQueryUI": false, //开关,是否启用JQueryUI风格
"bLengthChange": true, //开关,是否显示每页大小的下拉框
"bProcessing": true,
"bScrollInfinite": false,
"sScrollY": "800px", //是否开启垂直滚动,以及指定滚动区域大小,可设值:'disabled','2000px'
"bSort": true, //开关,是否启用各列具有按列排序的功能
"bSortClasses": true,
"bStateSave": false, //开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列
"sScrollX": "50%", //是否开启水平滚动,以及指定滚动区域大小,可设值:'disabled','2000%'
"aaSorting": [[0, "asc"]],
"aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列
"sDom": '<"H"if>t<"F"if>',
"bAutoWidth": false, //自适应宽度
"aaSorting": [[1, "asc"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到相关数据!",
"sEmptyTable": "表中无数据存在!",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
} //多语言配置

})
});


获取点击表格数据

//当点击表格内某一条记录的时候
$("#talbleid tbody").click(function(event) {
var aData = oTable.fnGetData(event.target.parentNode);
alert(aData);
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  dataTable 分页