分页组件dataTable的用法
作者：互联网
先导入三个必须的文件
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="jquery.dataTables.min.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="jquery-3.2.1.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="jquery.dataTables.min.js"></script>一些基础设置
“bPaginate”: true, //翻页功能
“bLengthChange”: true, //改变每页显示数据数量
“bFilter”: true, //过滤功能
“bSort”: false, //排序功能
“bInfo”: true,//页脚信息
“bAutoWidth”: true//自动宽度
"bProcessing": true, //显示正在加载中
"searching": true, // 显示搜索框
"aLengthMenu": [5, 25, 50], //自定义列表
"sAjaxSource" :"/qytx-hotline/good/list_all.action", //url地址
//绑定字段
"columns": [
{ "defaultContent": "" }, //注意：当查出来的数据有的为null时，dataTable每次加载会弹窗警告，非常烦人，这个设置为空字符串，就不会警告了
{ "data": "id" },
{ "data": "name" },
{ "data": "goodNo" },
{ "data": "goodGroupId" },
{ "data": "type" },
{ "data": "specifications" },
{ "data": "unit" },
{ "data": "price" }
]
用后端来请求数据必须加下面代码：
"serverSide": true
然后看下面链接写的很详细
http://www.cnblogs.com/wang985850293/p/5610408.html
http://www.cnblogs.com/jobs2/p/3431567.html
脚本之家
http://www.jb51.net/article/100799.htm //很详细
牛人博客很详细
http://blog.csdn.net/mickey_miki/article/details/8240477分页信息显示中文
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}自定义分页数量
"aLengthMenu": [5, 25, 50]启动、禁止翻页功能
"bPaginate" : false, // 翻页功能状态保存
"bStateSave" : true, // 状态保存改变每页显示数据数量
"bLengthChange" : false, // 改变每页显示数据数量显示页脚信息
"bInfo" : true,// 页脚信息每页显示多少行
"iDisplayLength" : 15, // 每页显示多少行设置请求方式
"sServerMethod" : "POST",ajax请求
"sAjaxSource" : basePath + "crm/list_list.action",当表格在处理的时候,花费的时间有点长（比如排序操作）是否显示“处理中…
"bProcessing":true* 实现自定义排序功能*
"bSort" : false, // 排序功能
"aaSorting": [
[ 0, "asc" ] //意思是第0列按照升序排列，前提是排序功能必须打开
[ 1 , "desc"] //第1列按照降序排列， 可以设置多个列
],使表格数据居中对齐
//给表格加个样式即可
<style>
.display{
text-align: center
}
</style>隐藏指定的列
//意思是隐藏第0列和第一列
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 0,1 ] }
]自定义标签 《超重要》
"columnDefs":[//列定义
{
"targets": [8],
"data": "deal",
"render": function (data, type, full) {
var HTML="<input type='checkbox' value='" + full.id + "' name='id'>";
return HTML
}
}]附一张刚刚测试成功的demo
js代码：
$(document).ready( function () {
$('#myTable').DataTable({
'bServerSide' : true,
"bProcessing": true,
"searching": true,
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
},
"aLengthMenu": [5, 25, 50],
"bSort" : false, // 排序功能
"bFilter" : false, // 过滤功能
"bAutoWidth" : false,// 自动宽度
"sPaginationType": "full_numbers",
"sServerMethod" : "POST",
"sAjaxSource" :"/qytx-hotline/good/list_all.action",
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "goodNo" },
{ "data": "goodGroupId" },
{ "data": "type" },
{ "data": "specifications" },
{ "data": "unit" },
{ "data": "price" },
{ "data": "deal" }
],
"columnDefs":[//列定义
{
"targets": [8],
"data": "id",
"render": function (data, type, full) {
return "<a href='/qytx-hotline/good/update.action?id=" + full.id + "'>修改</a> <a href='/qytx-hotline/good/delete.action?id="+full.id +"'>删除</a>";
}
}]
});
} ); "sAjaxSource" : basePath + "crm/list_list.action",
"sServerMethod" : "POST",
"sPaginationType" : "full_numbers",
"bPaginate" : true, // 翻页功能
"bStateSave" : true, // 状态保存
"bLengthChange" : false, // 改变每页显示数据数量
"bFilter" : false, // 过滤功能
"bSort" : false, // 排序功能
"bInfo" : true,// 页脚信息
"bAutoWidth" : false,// 自动宽度
"bDestroy" : true,//用于当要在同一个元素上履行新的dataTable绑订时，将之前的那个数据对象清除掉，换以新的对象设置
"iDisplayLength" : 15, // 每页显示多少行标签：false,排序功能,数据,data,用法,组件,每页,true,dataTable 来源： https://blog.51cto.com/u_12784254/2875320