零开始jfinal_OA】四：datatables管理
这节课把之前写的四上也整合进来了，就是为了方便阅读，顺便讲解一下四上的问题，我有拖延症，后面再补充证据删除修改！！！！
基础部分
显示数据
前台代码
<input id="button" type="button" value="获取行数" /> <table id="table_id" class="display"> <thead> <tr> <th>编号</th> <th>类型编号</th> <th>类型名称</th> <th>申请时间</th> <th>备注</th> <th>金额</th> <th>状态</th> </tr> </thead> </table>
<script type="text/javascript">
$(function () {
table = $('#table_id').DataTable({
ajax: {
url: "/ex/ex_list_ajax"
},
serverSide: true,
columns: [
{"data": "id"},
{"data": "type"},
{"data": "typeName"},
{"data": "datetime"},
{"data": "desc"},
{"data": "money"},
{"data": "statetext"},
{"data": "state"}
]
});
});
</script>
后台代码
public void ex_list_ajax(){
List<Expense> ExpenseList = Expense.dao.find("select * from expense group by id desc");
setAttr("data", ExpenseList);
renderJson();
}
看代码就可以直观的了解，并不需要解释，关于ajax可以看我前面写的文章:点击查看
显示效果图:
不过时候就出现了一个问题，所有的文字都是英文的，这时候就需要更改一下语言包:
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
这样就会变成中文的了！
进阶
筛选
datatables会自动传参数过去，所以只要在后台定义接收参数然后根据接收的参数处理数据
首先定义你显示的列,然后接收参数，执行sql语句
/定义需要排序的列
String[] cols = {"id", "type", "typeName", "datetime", "id", "money", "state"};
String orderColumn = getPara("order[0][column]");
orderColumn = cols[Integer.parseInt(orderColumn)];
String orderDir = "asc";//默认方式是asc
orderDir = getPara("order[0][dir]");
String sql = "select * from expense order by "+orderColumn+" "+orderDir+" limit "+start+","+length+"";
System.out.println(sql);
List<Expense> ExpenseList = Expense.dao.find(sql);
其他项
比如说总数分页等功能
//获取请求次数
String draw = "0";
draw =getPara("draw");
//数据起始位置
String start = getPara("start");
//总记录数
String recordsTotal = Db.queryLong("select count(*) from expense").toString();
//数据长度
String length = getPara("length");
setAttr("ExpenseList",ExpenseList);
setAttr("data", ExpenseList);//数据
setAttr("recordsTotal", recordsTotal);
setAttr("recordsFiltered", recordsTotal);
然后是全部代码
//获取请求次数
String draw = "0";
draw =getPara("draw");
//数据起始位置
String start = getPara("start");
//总记录数
String recordsTotal = Db.queryLong("select count(*) from expense").toString();
//数据长度
String length = getPara("length");
//定义需要排序的列
String[] cols = {"id", "type", "typeName", "datetime", "id", "money", "state"};
String orderColumn = getPara("order[0][column]");
orderColumn = cols[Integer.parseInt(orderColumn)];
String orderDir = "asc";//默认方式是asc
orderDir = getPara("order[0][dir]");
String sql = "select * from expense order by "+orderColumn+" "+orderDir+" limit "+start+","+length+"";
System.out.println(sql);
List<Expense> ExpenseList = Expense.dao.find(sql);
setAttr("ExpenseList",ExpenseList);
setAttr("data", ExpenseList);
setAttr("recordsTotal", recordsTotal);
setAttr("recordsFiltered", recordsTotal);
renderJson();
前台:
<script type="text/javascript">
$(function () {
table = $('#table_id').DataTable({
"searching": false,//关闭搜索
"order": [[ 0, "desc" ]],
ajax: {
url: "/ex/ex_list_ajax"
},
"language": {
"lengthMenu": "_MENU_ 条记录每页",
"zeroRecords": "没有找到记录",
"info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
"infoEmpty": "无记录",
"infoFiltered": "(从 _MAX_ 条记录过滤)",
"paginate": {
"previous": "上一页",
"next": "下一页"
}
},
serverSide: true,
columns: [
{"data": "id"},
{"data": "type"},
{"data": "typeName"},
{"data": "datetime"},
{"data": "desc"},
{"data": "money"},
{"data": null},
{"data":null}
],
"columnDefs": [
{
"render": function(data, type, row) {//如果想修改文字 就必须把上面的data也修改为null
if(data["state"] == 0){
return "未审核";
}else{
return "审核通过";
}
},
"targets": 6
},{
"render": function(data, type, row) {//这里是增加按钮
if(data["state"] == 0){
return "<button type='button' onclick='edit("+data["id"]+")' class='am-btn am-btn-primary am-btn-xs'>编辑</button> <button type='submit' onclick='edit("+data["id"]+")' class='am-btn am-btn-primary am-btn-xs'>删除</button>";
}else{
return "<button type='button' class='am-btn am-btn-primary am-btn-xs'>审核通过无法操作</button>";
}
},
"targets": 7
}
]
});
});
/**
* 修改数据(修改条件是状态为未审核的)
* @param id
*/
function edit(id) {
alert(id);
}
/**
* 删除数据(删除条件是状态为未审核的)
* @param id
*/
function del(id) {
alert(id);
}
</script>
最后给个效果图
