首页 > 代码库 > springmvc + jquery datatable + ajax实现动态分页查询

springmvc + jquery datatable + ajax实现动态分页查询

2024-11-27 11:29:39   203人阅读

网上关于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=http://www.mamicode.com/"css/jquery.dataTables.css"/>>
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.效果图
技术分享
技术分享

springmvc + jquery datatable + ajax实现动态分页查询


联系
我们