1:当前环境:jfinal+beetSql
2:所需文件:`jquery.dataTables.js和dataTables.bootstrap.js和bootstrap.css
3:第一步在html中建立该表格
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>序号</th>
<th>权限名称</th>
<th>模块名称</th>
<th>控制名称</th>
<th>方法名称</th>
<th>操作</th>
</tr>
</thead>
</table>
4:第二步,在该页面中引入<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/dataTables.bootstrap.min.js"></script>
这两个js文件
5:第三步,自己写一个js文件并引入页面<script src="/static/js/data_table.js"></script>
6:编写data_table.js
$(document).ready(function() {
$('#example').DataTable({
//searching: false, //禁用搜索
//ordering: false, //禁用排序
//"processing": true, //进度,开启后会闪动
"serverSide": true, //启用服务模式
"ajax": {
"url": "/privilege/dataTest.html",
//当处理大数据时,延迟渲染数据,有效提高Datatables处理能力
"deferRender": true
},
"columns" : [
{
"data" : "id",
"orderable" : false, // 禁用排序
"sDefaultContent" : "",
"width" : "6%",
}, {
"data" : "pri_name",
"orderable" : false, // 禁用排序
"sDefaultContent" : "",
"width" : "10%"
}, {
"data" : "module_name",
"orderable" : false, // 禁用排序
"sDefaultContent" : "",
"width" : "10%"
},{
"data" : "controller_name",
"orderable" : false, // 禁用排序
"sDefaultContent" : "",
"width" : "3%",
"render" : function(data, type, full, meta) {
// if(data==1){
// return data ='有效';
// }else{
// return data ='无效';
// }
//return data == 1 ? '有效' : '<font color="red">无效</font>';
if(data==1){
data ="<a href='#' class='upOrderStatus' data-id="+full.id+">有效</a>";
}else{
data ="<a href='#' class='upOrderStatus' data-id="+full.id+"><font color='red'>无效</font></a>";
}
return data;
}
},{
"mData" : "action_name",
"orderable" : false, // 禁用排序
"sDefaultContent" : "",
"sWidth" : "10%"
},{
"mData" : "id",
"orderable" : false, // 禁用排序
"sDefaultContent" : '',
"sWidth" : "10%",
"render":function(data, type, full, meta){
return data='<button id="deleteOne" class="btn btn-danger btn-sm" data-id='+data+'>删 除</button>';
}
}]
columnDefs: [
{
targets: 5, //第四列,从0开始
render: function (a, b, c, d) {
// 这块可以采用我之前讲到的js模板处理:http://laytpl.layui.com/
var html = '<button data-id="#tpl_edit" data-action="'+ '/privilege/edit/' + c.id + '" type="button" class="js_edit am-btn am-btn-xs am-btn-primary">修改</button>'
+ '<button data-action="'+ '/privilege/delete/' + c.id + '" type="button" class="js_del am-btn am-btn-xs am-btn-danger">删除</button>';
return html;
}
}
]
});
} );
“oLanguage” : { // 国际化配置
“sProcessing” : “正在获取数据,请稍后…”,
“sLengthMenu” : “显示 MENU 条”,
“sZeroRecords” : “没有找到数据”,
“sInfo” : “从 START 到 END 条记录 总记录数为 TOTAL 条”,
“sInfoEmpty” : “记录数为0”,
“sInfoFiltered” : “(全部记录数 MAX 条)”,
“sInfoPostFix” : “”,
“sSearch” : “搜索”,
“sUrl” : “”,
“oPaginate” : {
“sFirst” : “第一页”,
“sPrevious” : “上一页”,
“sNext” : “下一页”,
“sLast” : “最后一页”
}
},
initComplete:initComplete,
drawCallback: function( settings ) {
$('input[name=allChecked]')[0].checked=false;
`
s
ajax表示请求的地址,columns要和返回的json数据中的字段对应,并和table中的th对应
"serverSide": true, //启用服务模式这个表示后台分页
aoColumns[]数组中表示后端返回的json数据(也和table中的th的数量一致,所以这块容易出错),mData表示json对象的属性名,orderable是否启动排序,sDefaultContent没有这个属性的情况下的默认值,sWidth表示th的宽度,render方法表示对接收到的json数据进行处理判断后显示,` "render" : function(data, type, full, meta) {
//return data == 1 ? '有效' : '<font color="red">无效</font>';
if(data==1){
data ="<a href='#' class='upOrderStatus' data-id="+full.id+">有效</a>";
}else{
data ="<a href='#' class='upOrderStatus' data-id="+full.id+"><font color='red'>无效</font></a>";
}
return data;
}`
data表示该json属性的值,type不清楚,full表示整个json对象,就是一整行的值,d不清楚,对data进行处理,再渲染
“columnDefs” :
[{
“orderable” : false, // 禁用排序
“targets” : 0, // 指定的列
“data” : “id”,
“render” : function(data, type, full, meta) {
return ‘’;
}
}],
该段代码表示字段再定义,也就是 用来接收json数据,改变输出格式的,例如上面表示将table第0列的一个input属性
接下来是国际化配置
“oLanguage” : { // 国际化配置
“sProcessing” : “正在获取数据,请稍后…”,
“sLengthMenu” : “显示 MENU 条”,
“sZeroRecords” : “没有找到数据”,
“sInfo” : “从 START 到 END 条记录 总记录数为 TOTAL 条”,
“sInfoEmpty” : “记录数为0”,
“sInfoFiltered” : “(全部记录数 MAX 条)”,
“sInfoPostFix” : “”,
“sSearch” : “搜索”,
“sUrl” : “”,
“oPaginate” : {
“sFirst” : “第一页”,
“sPrevious” : “上一页”,
“sNext” : “下一页”,
“sLast” : “最后一页”
}
},
一般这段可以直接复制即可
initComplete:initComplete,
drawCallback: function( settings ) {
$('input[name=allChecked]')[0].checked=false;
上面代码表示初始化完成时的回调函数
/**
* 表格加载渲染完毕后执行的方法
* @param data
*/
function initComplete(data){
//上方topPlugin DIV中追加HTML
//var topPlugin='<button id="addButton" class="btn btn-success btn-sm" data-toggle="modal" data-target="#addUser" style="display:block;">' +
// '<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加用户</button>';
//删除用户按钮的HTMLDOM
var topPlugin='<button class="btn btn-danger btn-sm" id="deleteAll">批量删除</button> <button class="btn btn-primary btn-sm addBtn" >新 增</button> <iframe id="exp" style="display:none;"></iframe><button class="btn btn-info btn-sm" id="expCsv">导 出全部</button> <button class="btn btn-warning btn-sm" id="reset">重置搜索条件</button>' ;
$("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML
//$("#expCsv").on("click", exp1);//给下方按钮绑定事件
}
7:接下来是服务端
我是jfinal+beetSql
每次datatables发送的请求都是start和length两个请求数据,所以以下是我在后台的封装`package vo;
import org.beetl.sql.core.engine.PageQuery;
import java.util.List;
/*
*author:zhangweilun
*email:18702515157@163.com
*des:
*/
public class DataTables {
private long draw;
private long recordsTotal;
private long recordsFiltered;
private List data;
public DataTables(int draw, PageQuery page,List data) {
this.draw = draw;
this.recordsTotal = page.getTotalRow();
this.recordsFiltered = page.getTotalRow();
this.data = data;
}
public long getDraw() {
return draw;
}
public void setDraw(long draw) {
this.draw = draw;
}
public long getRecordsTotal() {
return recordsTotal;
}
public void setRecordsTotal(long recordsTotal) {
this.recordsTotal = recordsTotal;
}
public long getRecordsFiltered() {
return recordsFiltered;
}
public void setRecordsFiltered(long recordsFiltered) {
this.recordsFiltered = recordsFiltered;
}
public List<T> getData() {
return data;
}
public void setData(List<T> data) {
this.data = data;
}
}
@SuppressWarnings({ “rawtypes”, “unchecked” })
这是datatables要需要返回的json数据格式
private void renderDataTable(PageQuery page,List data) {
int draw = getParaToInt(“draw”, 0);
renderJson(new DataTables(draw, page,data));
}`
int start = getParaToInt("start",0)+1;
int length = getParaToInt("length",10);
int pageNumber = start/length+1;
PrivilegeS privilegeS = new PrivilegeS();
List<Privilege> privilegeList = privilegeS.dao.all(Privilege.class,start,length);
PageQuery pageQuery = Paginate.paginate(Privilege.class,"1_privilege.allPrivilege",pageNumber,length);
setAttr("pageQuery",pageQuery);
renderDataTable(pageQuery,privilegeList);
以上为控制器逻辑
自行封装请求参数
"ajax": {
"type": "POST",
"url":contextPath + "/dept/list.do",
"data":function(d){
d.state=$("#state").val();
d.deptname=$("#deptname").val().trim();
d.startTime=$("#startTime").val();
d.endTime=$("#endTime").val();
}
ajax片段增加,在搜索按钮上绑定事件
table.ajax.reload();
其中table为
var table = $(‘#example’).DataTable();而来