使用datatable后台分页
来源:互联网 发布:java读取配置文件参数 编辑:程序博客网 时间:2024/05/16 05:42
Datatable是jQuery提供的优秀的前端处理表格与分页的一个框架。接下来就通过简单的例子,说说datable的集成过程。刚一开始,百度datatable插件,搜到的大都是一些前台分页的例子,看了几个例子之后,自己尝试了一下,没出什么问题。关于前台分页没什么难的。
1.在jsp中需要定义一个< thead> 与< tbody>标签,datatable应该会扫描这个标签。
2.引入datatable,css,与js包,这个官网就可以下不用翻墙。
引入这几个东西。
直接调用datatable方法,都适用默认参数,这时候前台页面其实就已经分页成功了。
但是这样的分页其实没有什么意义,这属于一次性到数据库把数据都取出来,没有做到真正的分页。接下来重点说说服务器分页。最后还是google才查到解决问题的。
直接粘代码了
之后在,表格中,tbody就可以空着了,已经通过aoColumns动态注入进去了。
SpringMVC返回json配置步骤如下:
1、添加jackson.jar包
2、在applicationContext.xml配制文件中添加如下代码
springmvc默认是不支持map类型转换成json的,必须加上上面的配置,注意还要倒入jar包(新版的springmvc集成了json,这步可以省略)
这地方先贴出一部分,可能还有没涉及到的依赖,到百度一查就好了,
1.在jsp中需要定义一个< thead> 与< tbody>标签,datatable应该会扫描这个标签。
2.引入datatable,css,与js包,这个官网就可以下不用翻墙。
<link href="${pageContext.request.contextPath}/static/css/jquery.dataTables.css" rel="stylesheet" /><link href="${pageContext.request.contextPath}/static/css/jquery.dataTables.min.css" rel="stylesheet" /><script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.dataTables.min.js"></script>
引入这几个东西。
<script>3.$(document).ready(function() {$('#example11').dataTable({});});</script>
直接调用datatable方法,都适用默认参数,这时候前台页面其实就已经分页成功了。
但是这样的分页其实没有什么意义,这属于一次性到数据库把数据都取出来,没有做到真正的分页。接下来重点说说服务器分页。最后还是google才查到解决问题的。
直接粘代码了
<p></p>$('#example11').dataTable({ "bFilter": false,//去掉搜索框 //"bAutoWidth": true, //自适应宽度 "sPaginationType" : "full_numbers", "bDestroy" : true, "bProcessing" : true, "bServerSide" : true, "sAjaxDataProp" : "aData",//是服务器分页的标志,必须有 "sAjaxSource" : "${pageContext.request.contextPath}/datatable/datainfo",//通过ajax实现分页的url路径。 "aoColumns" : [ { "mDataProp" : "id", }, { "mDataProp" : "name", }, { "mDataProp" : "telephone", }, { "mDataProp" : "email", }, ], // 如果不知是简单的数据显示,需要复杂的要求时,通过以下方法来实现动态js插入。 //不知道有没有更好的方法。 "aoColumnDefs":[{"aTargets":[1],"mRender":function(){ return "<a href=#>1441</a>"} }], "bAutoWidth": true, //自适应宽度 "sPaginationType" : "full_numbers", "oLanguage" : { "sProcessing" : "正在加载中......", "sLengthMenu" : "每页显示 _MENU_ 条记录", "sZeroRecords" : "正在加载中......", "sEmptyTable" : "表中无数据存在!", "sInfo" : "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", "sInfoEmpty" : "显示0到0条记录", "sInfoFiltered" : "数据表中共为 _MAX_ 条记录", "sSearch" : "搜索", "oPaginate" : { "sFirst" : "首页", "sPrevious" : "上一页", "sNext" : "下一页", "sLast" : "末页" } }});});
之后在,表格中,tbody就可以空着了,已经通过aoColumns动态注入进去了。
接下来是后台,涉及到json的地方也很麻烦
@ResponseBody @RequestMapping("datainfo") public Map<String, Object> datainfo(HttpServletRequest request,Model model,HttpServletResponse response) throws IOException{ JSONObject jsonobj =new JSONObject(); jsonobj.put("aData", DatatableDao.userList); Map<String, Object> map = new HashMap<String,Object>(); map.put("sEcho", request.getParameter("sEcho")); map.put("iTotalRecords", 30); map.put("iTotalDisplayRecords", 30); map.put("aData", DatatableDao.userList); model.addAttribute("aData",DatatableDao.userList); System.out.println(jsonobj.toJSONString()); return map; }
SpringMVC返回json配置步骤如下:
1、添加jackson.jar包
2、在applicationContext.xml配制文件中添加如下代码
<!--解析返回JSON --><!-- <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> --> <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"> <property name="messageConverters"> <list > <ref bean="mappingJacksonHttpMessageConverter" /> </list> </property> </bean> <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"> <property name="supportedMediaTypes"> <list> <value>text/html;charset=UTF-8</value> </list> </property> </bean>
springmvc默认是不支持map类型转换成json的,必须加上上面的配置,注意还要倒入jar包(新版的springmvc集成了json,这步可以省略)
<dependencies><dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-core</artifactId> <version>2.7.1</version> </dependency> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.7.1-1</version> </dependency> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-annotations</artifactId> <version>2.7.1</version> </dependency> <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20151123</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.7</version>
这地方先贴出一部分,可能还有没涉及到的依赖,到百度一查就好了,
1 0
- 使用datatable后台分页
- jQuery Datatable后台分页
- 使用DataTable分页
- datatable分页指南--前台分页和后台分页
- datatable分页指南--前台分页和后台分页
- jquery datatable 配合 rails 进行后台分页
- jquery dataTable 后台加载数据并分页
- 使用datatable进行服务端分页
- jquery datatable ajax后台数据来源使用
- 使用AspNetPager绑定DataTable进行分页操作
- 使用JQuery中dataTable展示分页
- 二、jq前端分页插件datatable使用
- DataTable 分页
- DataTable分页
- DataTable分页
- datatable 分页
- DataTable分页
- DataTable 分页
- Gradle for Android 第七篇( Groovy入门 )
- membercache使用笔记
- 38.windbg-调试技巧(创建进程即断下、r修改控制条件跳转)
- leetcode--Maximum Depth of Binary Tree
- Eclipse Logcat 显示配置
- 使用datatable后台分页
- Leetcode:28. Implement strStr()(JAVA)
- 去掉String字符串的最后一个字符
- Java集合框架:总结
- adb logcat 命令行用法
- 移动端H5做一个不限个数的通栏按钮 by FungLeo
- java中图片格式转换
- doGet()方法来处理浏览器直接访问和get方式提交的表单
- 实现在CMD中用命令运行apache