欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

laypage分页控件使用方法

程序员文章站 2022-07-02 14:34:46
laypage是一款非常简单易用的分页控件,由于最近项目中使用到了,简单记录一下使用方法 1、引入laypage所需的js和css文件 2、定义分页需要显示的地方,id为doctorDiv是分页要显示的地方 3、使用ajax异步请求查询数据,并分页显示 4、最终效果 5、感觉laypage显示出来的 ......

laypage是一款非常简单易用的分页控件,由于最近项目中使用到了,简单记录一下使用方法

1、引入laypage所需的js和css文件


<link href="js/laypage/1.3/skin/laypage.css" rel="stylesheet"/>
<script type="text/javascript" src="js/laypage/1.3/laypage.js"></script>
<script type="text/javascript" src="js/layer/2.1/layer.js"></script>

2、定义分页需要显示的地方,id为doctorDiv是分页要显示的地方

1 <div class="doctor_list">
2     <ul id="doctorUL">
3         <div style="clear: both;"></div>
4     </ul>
5     <div style="clear: both;"></div>
6     <div class="pages" id="doctorDiv">
7 
8     </div>
9 </div>

3、使用ajax异步请求查询数据,并分页显示

 1 <script type="text/javascript">
 2 
 3     //定义全局变量记录页码信息
 4     var globalDate = {};
 5     //1页显示两条数据
 6     globalDate.pageSize=2;
 7 
 8     $(function () {
 9         //查询数据
10         search();
11 
12     });
13 
14 
15     //查询数据
16     function search(date) {
17         var str = "";
18         $.ajax({
19             type: "post",
20             url: "<%=basePath%>mytlist.html",
21             dataType: "json",
22             async: true,
23             data: date,
24             success: function (data) {
25                 if (data.result) {
26                     var mydata = data.obj.list;
27                     for (var i = 0; i < mydata.length; i++) {
28                         var info = mydata[i];
29                         str += "<li>";
30                         str += "<a onclick=" + "doctorDetail('" + info.id + "')" + ">";
31 //                        str+="<a href='mytdoctor_xq.html?id='"+info.id+">";
32                         str += "<img src=" + info.photo + ">";
33                         str += "<div class='yi_text'>";
34                         str += "<h2>" + info.name;
35                         str += "<span>" + info.title + "</span>";
36                         str += "</h2>";
37                         str += "<h3>科室:" + info.department_one + "</h3>";
38                         str += "<h3>";
39                         str += "<em>评分:</em>";
40                         str += "<span>";
41                         if (info.total_score != null && info.total_score != "" && info.total_evaluate_num != null && info.total_evaluate_num != "") {
42                             var pingfen = info.total_score / info.total_evaluate_num;  //评分
43                             var j;
44                             for (j=0; j < pingfen; j++) {
45                                 str += "<img src='images/pc/icon_031.png'>";
46                             }
47                             if(j<5){
48                                 for(var k=0;k<5-j;k++){
49                                     str += "<img src='images/pc/icon_032.png'>";
50                                 }
51                             }
52                         }
53                         str += "</span>"
54                         str += "</h3>";
55                         str += "<h3>所在医院:" + info.hospital + "</h3>";
56                         str += "<p>疾病擅长:" + info.skilful + "</p>";
57                         str += "</div>";
58                         str += "</a>";
59                         str += "</li>";
60                     }
61                     $("#doctorUL").empty();
62                     $("#doctorUL").append(str);
63                     var page = data.obj.pages;  //总页数
64                     var curr = data.obj.pageNum;    //当前页
65                     laypage({
66                         cont: 'doctorDiv',  //分页需要显示的地方
67                         pages: page,    //总页数
68                         curr: curr,     //当前页
69                         groups: 3,//连续显示分页数
70                         skip: true,     //是否开启跳页
71                         first: '首页',
72                         last: '尾页',
73                         skin: 'molv',   //加载内置皮肤,也可以直接赋值16进制颜色值,如:#c00
74                         prev: '<', //若不显示,设置false即可
75                         next: '>', //若不显示,设置false即可
76                         jump: function (e, first) { //触发分页后的回调
77                             if (!first) { //一定要加此判断,否则初始时会无限刷新
78                                 globalDate.pageNum = e.curr;
79                                 search(globalDate);
80                             }
81                         }
82                     });
83 
84 
85                 } else {
86                     //错误
87                     console.log("错误");
88                 }
89             }
90         });
91     }
92 </script>

4、最终效果

laypage分页控件使用方法

5、感觉laypage显示出来的页码有点扁,高度不够,所以稍微修改了一点css

 1 <%--修改laypage的样式--%>
 2 <style>
 3     .laypage_main a, .laypage_main input, .laypage_main span {
 4         height: 40px;
 5         line-height: 40px
 6     }
 7 
 8     .laypage_main button {
 9         height: 40px;
10         line-height: 40px;
11         margin-left: 5px;
12         padding: 0 10px;
13         color: #666
14     }
15 </style>