Datatables表格控件应该是现在使用最广的免费前端jquery表格插件了吧。下面讲讲在实际项目中使用的一些经验。在介绍之前,先贴出几个链接。[Datatables官方网站](http://dt.thxopen.com/index.html)[github项目地址](https://github.com/fudanstar/DataTables)
对于数据量特别大,或者数据来源于webservice等导致数据获取时间特别长的,就需要使用服务器模式,也就是数据不是全部获取到前端,而是通过服务器分页获取的。
- javascript代码
table = $('#resultfile_datatable').DataTable(//创建一个Datatable
{
ajax : {//通过ajax访问后台获取数据
"url": "*******",//后台地址
"dataSrc": function (json) {//获取数据之后处理函数,jason就是返回的数据
var dataSet = new Array();
dataSet=json.data;
...//对数据处理过程
return dataSet;//再将数据返回给datatable控件使用
}
},
serverSide: true,//如果是服务器方式,必须要设置为true
processing: true,//设置为true,就会有表格加载时的提示
columns : [ {"data" : "name"}, //各列对应的数据列
{"data" : "proTopicName"},
{"data" : "missionName"},
{"data" : "areaName"},
{"data" : "fileformat"},
{"data" : "research"},
{"data" : "category"},
{"data" : null} ],
columnDefs : [ {//列渲染,可以添加一些操作等
targets : 7,//表示是第8列,所以上面第8列没有对应数据列,就是在这里渲染的。
render : function(data, type, row) {//渲染函数
var html = ' <button type="button" class="btn btn-info btn-sm" ">修改</button><br><br> <button type="button" class="btn btn-danger btn-sm" ">删除</button>';//这里加了两个button,一个修改,一个删除
return html;//将改html语句返回,就能在表格的第8列显示出来了
}
},{
orderable:false,//禁用排序
targets:[1,2,3,5,6] //指定的列
}
],
"language": {//国际化
"processing":"<p style=\"font-size: 20px;color: #F79709;\">正在玩命加载中。。。。请稍后!</p>",//这里设置就是在加载时给用户的提示
"lengthMenu": "_MENU_ 条记录每页",
"zeroRecords": "没有找到记录",
"info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
"infoEmpty": "无记录",
"infoFiltered": "(从 _MAX_ 条记录过滤)",
"paginate": {
"previous": "上一页",
"next": "下一页"
}
},
"dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +"t" +"<'row'<'col-xs-6'i><'col-xs-6'p>>",//给表格改样式
initComplete : function() {//表格完成时运行函数
$("#mytool").append('<button type="button" class="btn btn-warning btn-sm" id="importfilebutton" onclick="jumpimportfilepage();">添加</button>');//这里在表格的上面加了一个添加标签
}
});
}
- 后台action代码
//获取请求次数
private String draw = "0";
//数据起始位置
private String start;
//数据长度
private String length;
//总记录数
private String recordsTotal = "0";
//过滤后记录数
private String recordsFiltered = "";
//定义列名
private String[] cols = {"name", "proTopicName", "missionName", "areaName", "fileformat", "areaName", "research", "category"};
//获取客户端需要那一列排序
private String orderColumn = "0";
//获取排序方式 默认为asc
private String orderDir = "asc";
//获取用户过滤框里的字符
private String searchValue;
public void getAllResultFiles() throws IOException
{
//获取文件参数
HttpServletRequest request = ServletActionContext.getRequest();
draw=request.getParameter("draw");
start = request.getParameter("start");
length = request.getParameter("length");
orderColumn = request.getParameter("order[0][column]");
orderColumn = cols[Integer.parseInt(orderColumn)];
orderDir = request.getParameter("order[0][dir]");
searchValue = request.getParameter("search[value]");
List<String> sArray = new ArrayList<String>();
if (!searchValue.equals("")) {//判断搜索框是否为空,添加查询条件
sArray.add(" name like '%" + searchValue + "%'");
sArray.add(" fileformat like '%" + searchValue + "%'");
}
String individualSearch = "";
if (sArray.size() == 1) {
individualSearch = sArray.get(0);
} else if (sArray.size() > 1) {
for (int i = 0; i < sArray.size() - 1; i++) {
individualSearch += sArray.get(i) + " or ";
}
individualSearch += sArray.get(sArray.size() - 1);
}
//获取数据库总记录数
recordsTotal=""+resultFilesService.getModelCount();
String searchSQL = "";
if (individualSearch != "") {
searchSQL = " where " + individualSearch;
}
searchSQL+= " order by " + orderColumn + " " + orderDir;
List<Resultfiles> resultfilesList=resultFilesService.findResultfilesList(searchSQL,start,length);
if (searchValue != "") {
recordsFiltered =""+resultFilesService.getModelCount(searchSQL);
}
else {
recordsFiltered = recordsTotal;
}
if(resultfilesList!=null)
{
...//对数据进行处理
Map<Object, Object> info = new HashMap<Object, Object>();
info.put("data", resultfilesBeanList);
info.put("recordsTotal", recordsTotal);
info.put("recordsFiltered", recordsFiltered);
info.put("draw", draw);
JSONObject jsonstr = JSONObject.fromObject(info);
System.out.println(jsonstr.toString());
results = jsonstr.toString();
}
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write(results);
response.getWriter().close();
}
以上就是在javaweb环境下Datatables控件的服务器模式的使用。