网上关于jquery datatable的例子很多,但结合springmvc的例子很少,搞了2天才把这个弄明白,现在记录下来,作为学习笔记。
1.导入所需文件
(1) jquery.dataTables.css
(2) jquery.js
(3) jquery.dataTables.js
2.datatable.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"/>
<title>listView</title>
</head>
<body>
<table id="tb" class="display" >
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#tb").dataTable({
"bProcessing": false, // 是否显示取数据时的那个等待提示
"bServerSide": true,//这个用来指明是通过服务端来取数据
"sAjaxSource": "tableDemoAjax.html",//这个是请求的地址
"fnServerData": retrieveData // 获取数据的处理函数
});
});
// 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
function retrieveData( sSource111,aoData111, fnCallback111) {
$.ajax({
url : sSource111,//这个就是请求地址对应sAjaxSource
data : {"aoData":JSON.stringify(aoData111)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
type : 'post',
dataType : 'json',
async : false,
success : function(result) {
fnCallback111(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
},
error : function(msg) {
}
});
}
</script>
</body>
</html>
3.后台请求地址tableDemoAjax
@RequestMapping("tableDemoAjax")
@ResponseBody
public String tableDemoAjax(@RequestParam String aoData) {
JSONArray jsonarray = JSONArray.fromObject(aoData);
String sEcho = null;
int iDisplayStart = 0; // 起始索引
int iDisplayLength = 0; // 每页显示的行数
for (int i = 0; i < jsonarray.size(); i++) {
JSONObject obj = (JSONObject) jsonarray.get(i);
if (obj.get("name").equals("sEcho"))
sEcho = obj.get("value").toString();
if (obj.get("name").equals("iDisplayStart"))
iDisplayStart = obj.getInt("value");
if (obj.get("name").equals("iDisplayLength"))
iDisplayLength = obj.getInt("value");
}
// 生成20条测试数据
List<String[]> lst = new ArrayList<String[]>();
for (int i = 0; i < 20; i++) {
String[] d = { "co1_data" + i, "col2_data" + i };
lst.add(d);
}
JSONObject getObj = new JSONObject();
getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下
getObj.put("iTotalRecords", lst.size());//实际的行数
getObj.put("iTotalDisplayRecords", lst.size());//显示的行数,这个要和上面写的一样
getObj.put("aaData", lst.subList(iDisplayStart,iDisplayStart + iDisplayLength));//要以JSON格式返回
return getObj.toString();
}
4.效果图
时间： 2024-10-07 01:09:15