Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
1、下载DataTables的最新版本。
把media文件夹放在目录里面
2、引入js和css
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="/static/common/media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="/static/common/media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/static/common/media/js/jquery.dataTables.js"></script>
或者用cdn引入
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
3、添加html代码:
<table id="dataTable" class="table table-bordered table-hover table-striped" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>手机</th>
<th>邮箱</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<tbody></tbody>一定要写
4、初始化Datatables
function queryData(enterpriseId){
var table = $('#dataTable').DataTable({
"bServerSide": true,//是否开始服务器模式
"destroy": true,//销毁所有符合选择的table,并且用新的options重新创建表格
"sAjaxSource": '${ctx}/admin/ajax/enterpriseUser/list',//url
"sPaginationType": "full_numbers", // 分页,一共两种样式
"iDisplayLength": 8, //一页显示8条
"aoColumns": [
{"data": "nickname"},
{"data": "mobile"},
{"data": "email"},
{"data": "password"},
{"data": "operator",
"render": function(data, type, full, meta) {
if(full.isavalible === 0){
return '<a class="opBtn attr'+full.id+'" href="javascript:updateIsavalible('+full.id+',1)">冻结</a>'
+'<a class="opBtn" href="${ctx}/admin/enterprise/toUpdateEnterpriseUser?id='+full.id+'">修改</a>';
} else {
return '<a class="opBtn attr'+full.id+'" href="javascript:updateIsavalible('+full.id+',0)">解冻</a>'
+'<a class="opBtn" href="${ctx}/admin/enterprise/toUpdateEnterpriseUser?id='+full.id+'">修改</a>';
}
}
}
],
"info": true,//是否显示表格左下角的信息
"paging": true,//是否开启本地分页
"processing": true,//是否显示处理状态
"searching": false,//是否开始本地搜索
//"scrollX": "900",//宽度超出问题*/
//"scrollCollapse" : true,//宽度超出问题*//*/
//"bAutoWidth": true, //宽度超出问题*/
"lengthChange": false,//是否允许用户改变表格每页显示的记录数
"sort": false,//是否支持排序
"oLanguage" : { // 国际化配置
"sProcessing" : "正在获取数据,请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有找到数据",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "查询",
"sUrl" : "",
"oPaginate" : {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
//initComplete: function(settings, data) {},//初始化结束后的回调函数
//"createdRow": function(row, data, index) {},//行被创建时回调函数
//服务器端,数据回调处理
"fnServerData": function(sSource, aDataSet, fnCallback) {
var pagefirstIndex = aDataSet[3].value //每页开始的索引
var currentPage = pagefirstIndex/8 +1;//点击的第几页(每页8行)
$.ajax({
"dataType": 'json',
"type": "get",
"url": sSource,
"data": {
enterpriseId:enterpriseId,
currentPage:currentPage
},
"success": function(result) {
if(result.success){
var msg = {};
msg['data'] = result.entity.users;
msg["iTotalRecords"] = result.entity.pageEntity.totalResultSize;
msg["iTotalDisplayRecords"] = result.entity.pageEntity.totalResultSize;
fnCallback(msg);
} else {
var msg = {};
msg['data'] = [];
msg["iTotalRecords"] = 0;
msg["iTotalDisplayRecords"] = 0;
fnCallback(msg);
alert(result.message)
}
}
});
}
});
}