springmvc + jquery datatable + ajax实现动态分页查询
2016-01-29 22:22
986 查看
网上关于jquery datatable的例子很多,但结合springmvc的例子很少,搞了2天才把这个弄明白,现在记录下来,作为学习笔记。
1.导入所需文件
(1) jquery.dataTables.css
(2) jquery.js
(3) jquery.dataTables.js
2.datatable.jsp
3.后台请求地址tableDemoAjax
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"%> <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> <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>
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(); }</string[]></string[]>
相关文章推荐
- jQuery使用Ajax
- javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件(三)
- javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)
- jquery Ajax异步请求之session
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
- HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document);
- jquery ajax 提交 FormData
- jQuery UI 实例 - 对话框(Dialog)
- jQuery的Ajax详解
- 带你学习JQuery:事件冒泡和阻止默认行为
- jquery.datatable.js与CI整合 异步加载(大数据量处理)
- jquery-mousewheel 插件
- jQuery ajax - serialize()方法和serializeArray() 方法
- jquery.dataTable.js 基础配置
- jquery.datatables中文语言设置
- 前端程序员应该知道的 15 个 jQuery 小技巧
- jquery.datatables中文使用说明
- web.py服务端,jquery ajax简单例子
- 简单实用jquery实现数字读秒的倒计时代码
- jquery移除、绑定、触发元素事件使用示例详解