最近做官网的优化，因为之前官网是静态页面，但是这次需要从数据库中查询然后做展示。又不想引人angular使其开发笨重，所以就用jquery来实现，分页使用的是jQuery Pagination。以前项目中也有过一些分页插件，但是都比较固定。
在使用jQuery Pagination的时候，需要引入jquery、jQuery Pagination和jQuery Pagination CSS。
相应的代码如下：
jquery代码：
1 <script type="text/javascript"> 2 //分页查询开始 3 $(document).ready(function() { 4 getDataList(0, null); 5 }); 6 7 var rows = 10; 8 var page = 1; 9 var initFlag = true; 10 11 function getDataList(currPage, jg) { 12 13 $.ajax({ 14 url : "page", 15 type : "post", 16 dataType : 'json', 17 data : {rows : rows,page : currPage + 1}, 18 contentType : "application/x-www-form-urlencoded; charset=utf-8", 19 success : function(response) { 20 if (response.result) { 21 if (response.data != null && response.data != ""&& response.total != undefined && response.total > 0) { 22 if (initFlag) { 23 $("#Pagination").pagination( 24 response.total, 25 { 26 items_per_page : rows, 27 num_edge_entries : 1, 28 num_display_entries : 8, 29 callback : getDataList//回调函数 30 }); 31 initFlag = false; 32 } 33 $("#listData").html(""); 34 loadDataList(response.data); 35 } else { 36 //暂无数据 37 } 38 } else { 39 //暂无数据 40 } 41 } 42 }); 43 } 44 45 46 function loadDataList(listdata) { 47 //表头 48 var html ="<tr class='t-header'>"+ 49 "<td>头像</td>"+ 50 "<td>姓名</td>"+ 51 "<td>密码</td>"+ 52 "</tr>"; 53 $("#listData").append(html); 54 for (var i = 0; i < listdata.length; i++) { 55 var n = listdata[i]; 56 //表格 57 var html = "<tr>"+ 58 "<td>"+"<img src='getphoto?unid="+n.uuid+"' onerror='this.src="resources/img/default.png"' style='48px;height:48px;border-radius:48px;'/>"+"</td>"+ 59 "<td>"+n.username+"</td>"+ 60 "<td>"+n.password+"</td>"+ 61 "</tr>"; 62 $("#listData").append(html); 63 } 64 } 65 //分页查询结束 66 </script>
html代码：
1 <body> 2 <div class="clearbox"> 3 <div class="x-box"> 4 <h2><a>表格</a></h2> 5 <table id="listData"></table> 6 </div> 7 <div id="Pagination" class="pagination"></div> 8 </div> 9 </body>
后端代码：
1 /** 2 * 分页请求地址 3 * @param request 4 * @param response 5 * @return 6 */ 7 @ResponseBody 8 @RequestMapping("page") 9 public Map<String, Object> page(HttpServletRequest request,HttpServletResponse response){ 10 int total = userService.getTotal(); 11 int page = Integer.parseInt(request.getParameter("page"));//当前页 12 int rows = Integer.parseInt(request.getParameter("rows"));//每页条数 13 List<User> data =userService.getCurrentPage((page-1)*rows, rows); 14 boolean result = (data == null)?false:true; 15 Map<String, Object> map = new HashMap<String, Object>(); 16 map.put("data", data); 17 map.put("total", total); 18 map.put("result", result); 19 return map; 20 }
jQuery Pagination参数
| 参数名 | 描述 | 参数值 |
|---|---|---|
| maxentries | 总条目数 | 必选参数，整数 |
| items_per_page | 每页显示的条目数 | 可选参数，默认是10 |
| num_display_entries | 连续分页主体部分显示的分页条目数 | 可选参数，默认是10 |
| current_page | 当前选中的页面 | 可选参数，默认是0，表示第1页 |
| num_edge_entries | 两侧显示的首尾分页的条目数 | 可选参数，默认是0 |
| link_to | 分页的链接 | 字符串，可选参数，默认是"#" |
| prev_text | “前一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Prev" |
| next_text | “下一页”分页按钮上显示的文字 | 字符串参数，可选，默认是"Next" |
| ellipse_text | 省略的页数用什么文字表示 | 可选字符串参数，默认是"..." |
| prev_show_always | 是否显示“前一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“前一页”按钮 |
| next_show_always | 是否显示“下一页”分页按钮 | 布尔型，可选参数，默认为true，即显示“下一页”按钮 |
| callback | 回调函数 | 默认无执行效果 |