提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery Pagination分页插件

jQuery插件 分页 Pagination
2023-09-27 14:27:16 时间

　　最近做官网的优化，因为之前官网是静态页面，但是这次需要从数据库中查询然后做展示。又不想引人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='width: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 回调函数 默认无执行效果

相关文章