入职第一天就加入到一个新项目的开发中,我负责权限分配这块,所以在前段页面需要用表格来显示用户的权限信息,传统的表格填入信息太繁琐,所以找到了dataTables这个插件,数据绑定这块真的省心很多,初次体验就觉得这插件功能真够强大的,模糊查询、分页等等都进行了封装,废话不多说。
首先是前端引入js相关文件,包括dataTables.bootstrap.css,jquery.dataTables.js,dataTables.bootstrap.js。
1、html页面加入table控件并写好表头
2、在js脚本里设置datatables的相关属性
typeAuthorityTable=$('#typeAuthorityTable').DataTable({
searching: false, //是否开启搜索功能
ordering: false,//是否排序
processing: true,//获取数据过程中是否出现加载指示
bPaginate:true,//是否允许分页
bInfo:true,//是否显示表格相关信息
destroy:true,//销毁一个实例
iDisplayLength:5,//分页时每页显示的行数
bLengthChange:false,
serverSide: true,//当用ajax请求数据源时,这个属性必须添加,切记
ajax:{ //使用ajax记得要引入jquery.min.js
url:'/manage/operatePage', //请求路径,也就是控制器里方法
type:"post",
async:true,
data:{"authorityId":authorityId} //请求参数
},
columns:[ //绑定的数据源,后台的json数据里必须有这些属性,保持一致性
{"data":"accountNum"},
{"data":"userName"},
{"data":"unit"},
{"data":"authority"},
{"data":"time"},
{"data":null}
],
columnDefs:[
{
targets:5, //对数据源中的第六行进行渲染
render:function(data,type,row){
var html = '取消授权';
return html;
}
}
],
"oLanguage" : { // 国际化配置
"sProcessing" : "正在获取数据,请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有找到数据",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "查询",
"sUrl" : "",
"oPaginate" : {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
},
});
3、后台控制器相关方法
public void operatePage() {
int authorityId = getParaToInt("authorityId"); //ajax传入的参数
int draw = getParaToInt("draw");
int start = getParaToInt("start");
int length = getParaToInt("length");//draw、start、length是dataTables自动携带的,可以直接获取
//draw应该是请求次数,start和length为sql语句中的从第start条开始,获取length条数据。
List
} else {
//进行相关操作
}}
//返回给前台信息的时候要注意格式和返回数据,必须为json格式,必须包含以下几个属性
public void renderJsonTable(Object draw,Object recordsTotal,Object data) {
Map
maps.put("draw",draw);
maps.put("recordsTotal", recordsTotal);
maps.put("recordsFiltered",recordsTotal);//若不加过滤条件,同recordsTotal
maps.put("data", data);
render(new JsonRender(maps).forIE());
}
//这个项目用的框架是JFinal,所以用上面的方式进行返回数据。
至此,dataTables简单分页功能就已实现。