主要写一下datatables分页功能的使用,以及ajax的发送请求,后台逻辑的处理
1、在html页面引入datatables的一些js文件
2、html代码部分
3、js部分
<script type="text/javascript">
$(function () {
table = $('#table_id').DataTable({
ajax: {
url: "${ctx}/dic/getbypage"
},
serverSide: true,
columns: [
{"data": "id"},
{"data": "type"},
{"data": "typeName"},
{"data": "datetime"},
{"data": "desc"},
{"data": "money"},
{"data": "statetext"},
{"data": "state"}
]
});
});
</script>
4、后台代码如下:
public void getByPage(){
List<Dic> dList = Expense.dao.find("select * from t_dic group by id desc");
setAttr("data", dList);
renderJson();
}
5、页面展示如下:
6、此时发现展示的效果都是英文的,所以需要加载汉化语言包,js代码如下:
<script type="text/javascript">
$(function(){
table = $('#grid').DataTable({
"dom":'<ltip>',//dom,对属性调整文职
"processing" : true,
"autoWidth":false,//是否自适应宽度
"lengthMenu": [5, 10, 20, 50],//每页显示的数目
"jQueryUI": true,//是否使用jqueryui的样式
"searching":false,//是否开启搜索
"info" : true,//分页信息
"order":[[0,"desc"]],//排序
ajax:{
url:"${ctx}/dic/getPage"
},
"language":{//汉化语言包
"lengthMenu":" _MENU_ 条记录每页",
"zeroRecords":"没有找到记录",
"info":"第 _PAGE_ 页 (共 _PAGES_ 页 )",
"infoEmyty":"无记录",
"infoFiltered":"(从 _MAX_ 条记录过滤)",
"paginate":{
"previous":"上一页",
"next":"下一页",
}
},
serverSide:true,//是否由服务器处理分页
columns:[
{"data":"dictvalue"},
{"data":"id"},
{"data":"parentid"},
{"data":"dictdesc"},
{"data":null}//想修改值,就设置为空
],
"columnDefs": [
{
"render": function(data, type, row) {//data代表的想要获取的值,row代表的是需要控制的行数
return "<button type='button' class='btn btn-primary btn-xs' οnclick='edit(\""+data.id+"\")' >编辑</button> <button type='button' οnclick='del(\""+data.id+"\")' class='btn btn-danger btn-xs'>删除</button>"; //这里要设置自定义的按钮,点击事件需要转义的
},
"targets": 4//控制的行数
}
]
});
$("#grid_info").css("margin","20px 0");
});
/**
*添加事件
*/
function add(){
alert(111);
window.location.href="${ctx}/dic/add";
}
/**
*编辑事件
*/
function edit(id){
alert(id);
window.location.href="${ctx}/dic/edit?id="+id;
}
/**
*删除事件
*/
function del(id){
alert(id);
bootbox.setLocale("zh_CN");
bootbox.confirm({
//title : '站点删除确认',
message : '亲,你确认删除吗?三思啊!',
callback : function(r){
if(r){
window.location.href="${ctx}/dic/del?id="+id;
}
}
});
}
</script>
7、后台代码展示如下:
public void getPage(){
String draw = "0";
draw =getPara("draw");
//数据起始位置
String start = getPara("start");
//总记录数
String recordsTotal = Db.queryLong("select count(*) from t_dic").toString();
//数据长度
String length = getPara("length");
//定义需要排序的列
String[] cols = {"id", "dictvalue"};
String orderColumn = getPara("order[0][column]");
orderColumn = cols[Integer.parseInt(orderColumn)];
String orderDir = "asc";//默认方式是asc
orderDir = getPara("order[0][dir]");
String sql = "select * from t_dic order by "+orderColumn+" "+orderDir+" limit "+start+","+length+"";
List<Dic> dList = Dic.dao.find(sql);
setAttr("dList", dList);
setAttr("data", dList);
setAttr("recordsTotal", recordsTotal);
setAttr("recordsFiltered", recordsTotal);
renderJson();
}
最终的展示效果如下: