最近做东西有一个需求,因为数据量很大,而实际上用户并不会对所有数据都感兴趣,如果用户直接翻页到最后一页的话,查询速度会很慢,影响用户体验,所以将分页控件处理成百度检索的效果,也就是用户不能直接点击到最后一页。
在这里我决定使用强大的datatables。datatables的“simple_numbers”的分页模式,比较接近需要的效果。
那么问题来了,因为数据量比较大,分页是需要在服务端进行的,同时还需要传递查询条件到服务端。怎样传递数据到后台呢?
先来看前台代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0"> <link rel="stylesheet" type="text/css" href="../../js/DataTables-1.10.8/media/css/jquery.dataTables.css"> <script type="text/javascript" language="javascript" src="../../js/DataTables-1.10.8/media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="../../js/DataTables-1.10.8/media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" class="init"> var table; $(document).ready(function() { table = $('#example').DataTable( { "pagingType": "simple_numbers",//设置分页控件的模式 searching: false,//屏蔽datatales的查询框 aLengthMenu:[10],//设置一页展示10条记录 "bLengthChange": false,//屏蔽tables的一页展示多少条记录的下拉列表 "oLanguage": { //对表格国际化 "sLengthMenu": "每页显示 _MENU_条", "sZeroRecords": "没有找到符合条件的数据", // "sProcessing": "<img src=’./loading.gif’ />", "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", "sInfoEmpty": "木有记录", "sInfoFiltered": "(从 _MAX_ 条记录中过滤)", "sSearch": "搜索:", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } }, "processing": true, //打开数据加载时的等待效果 "serverSide": true,//打开后台分页 "ajax": { "url": "../../alarms/datatablesTest", "dataSrc": "aaData", "data": function ( d ) { var level1 = $('#level1').val(); //添加额外的参数传给服务器 d.extra_search = level1; } }, "columns": [ { "data": "total" }, { "data": "level" } ] } ); } ); function search1() { table.ajax.reload(); } </script> </head> <body class="dt-example"> <div> <input type="text" id="level1"> <input type="button" onclick="search1()" value="查询"> </div> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> </tr> </thead> </table> </body> </html>
java代码如下,使用spring的 @ResponseBody将结果转换成json格式返回给前台
@RequestMapping(value="/datatablesTest", method=RequestMethod.GET) @ResponseBody public DatatablesViewPage<Alarm> datatablesTest(HttpServletRequest request){ //获取分页控件的信息 String start = request.getParameter("start"); System.out.println(start); String length = request.getParameter("length"); System.out.println(length); //获取前台额外传递过来的查询条件 String extra_search = request.getParameter("extra_search"); System.out.println(extra_search); //随便组织的查询结果 List<Alarm> list = new ArrayList<Alarm>(); Alarm alarm = new Alarm(); alarm.setLevel(1); alarm.setTotal(100L); list.add(alarm); alarm = new Alarm(); alarm.setLevel(2); alarm.setTotal(100L); list.add(alarm); DatatablesViewPage<Alarm> view = new DatatablesViewPage<Alarm>(); view.setiTotalDisplayRecords(100); view.setiTotalRecords(100); view.setAaData(list); return view; }
DatatablesViewPage的声明如下:
public class DatatablesViewPage<T> { private List<T> aaData; //aaData 与datatales 加载的“dataSrc"对应 private int iTotalDisplayRecords; private int iTotalRecords; public DatatablesViewPage() { } //get set方法 此处省略 }
处理完效果如下:
此处稍微修改了jquery.dataTables.js的内容,使分页的效果成这样。
相关推荐
本篇文章主要介绍了datatables 带查询条件java服务端分页处理实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
使用方法: 支持JAVA和PHP两种后台。...分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css) CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示
datatables+springmvc+bootstrap实现分页,包含数据库 Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。 分页,即时搜索和排序 几乎支持任何数据源:DOM, ...
基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页、模糊查询(非DataTables Search),页面异步刷新。 说明:sp:message标签是使用了SpringMVC国际化 效果 DataTable表格 关键字查询 自定义关键字查询,...
最近做东西有一个需求,因为数据量很大,在这里我决定使用datatables的服务端分页,同时还需要传递查询条件到服务端。在网上搜索的大部分文章都感觉有些误差,于是自己封装了一下,主要配置/工具为: 服务端:php...
使用DataTable默认的ajax交互功能,对传给后台和从后台获取的数据都有命名格式要求,这样一来耦合度较高,不利于后期扩展,不能...分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css)
03 datatables分页查询1
springboot+mybatis项目jsp+jquery+datatables.js+bootstrap前端分页.我只贴了controller还有jsp页面,还有相关js,希望能帮到初学者
hibernate分页(无排序,搜索,仅仅分页显示),服务器端分页在datatables上展现,有关 datatables的知识请关注它的官网http://www.datatables.net/,datatables的功能很 全面。 2,建表的sql--studentinfo和插入...
仿jquery.dataTables的分页(查询+排序),jquery插件式开发简单示例。
jquery 表格分页处理插件 DataTables 官方最新版本:1.62 作者:Allan Jardine 官網:http://sprymedia.co.uk/article/DataTables 展示:http://sprymedia.co.uk/article/DataTables 一个中文使用案例: ...
dataTables java后台解析http请求参数demo,解析datatableshttp多维数组
日常情况下使用前端插件进行分页,通过后端解析datatables请求来的参数进行request参数解析(demo中对通过datatable包中对datatables发送过来的参数进行一个解析器的操作)通过控制器action进行service数据解析调用...
最近看了下datatables,模仿写了一个小例子,和大家分享一下。效果图如下 (此图片来源于网络,如有侵权,请联系删除! ) jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>...
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
JQuery DataTables示例,包含分页、拖拽、导出,前端、后台分页都有,项目直接导入就可以使用,项目框架是struts2写Web项目。
主要为大家详细介绍了ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项,感兴趣的小伙伴们可以参考一下