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是分页要显示的地方

 <div class="doctor_list">
     <ul id="doctorUL">
         <div style="clear: both;"></div>
     </ul>
     <div style="clear: both;"></div>
     <div class="pages" id="doctorDiv">

     </div>
 </div>

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

 <script type="text/javascript">

     //定义全局变量记录页码信息
     var globalDate = {};
     //1页显示两条数据
     globalDate.pageSize=2;

     $(function () {
         //查询数据
         search();

     });

     //查询数据
     function search(date) {
         var str = "";
         $.ajax({
             type: "post",
             url: "<%=basePath%>mytlist.html",
             dataType: "json",
             async: true,
             data: date,
             success: function (data) {
                 if (data.result) {
                     var mydata = data.obj.list;
                     for (var i = 0; i < mydata.length; i++) {
                         var info = mydata[i];
                         str += "<li>";
                         str += "<a onclick=" + "doctorDetail('" + info.id + "')" + ">";
 //                        str+="<a href='mytdoctor_xq.html?id='"+info.id+">";
                         str += "<img src=" + info.photo + ">";
                         str += "<div class='yi_text'>";
                         str += "<h2>" + info.name;
                         str += "<span>" + info.title + "</span>";
                         str += "</h2>";
                         str += "<h3>科室：" + info.department_one + "</h3>";
                         str += "<h3>";
                         str += "<em>评分：</em>";
                         str += "<span>";
                         if (info.total_score != null && info.total_score != "" && info.total_evaluate_num != null && info.total_evaluate_num != "") {
                             var pingfen = info.total_score / info.total_evaluate_num;  //评分
                             var j;
                             for (j=0; j < pingfen; j++) {
                                 str += "<img src='images/pc/icon_031.png'>";
                             }
                             if(j<5){
                                 for(var k=0;k<5-j;k++){
                                     str += "<img src='images/pc/icon_032.png'>";
                                 }
                             }
                         }
                         str += "</span>"
                         str += "</h3>";
                         str += "<h3>所在医院：" + info.hospital + "</h3>";
                         str += "<p>疾病擅长：" + info.skilful + "</p>";
                         str += "</div>";
                         str += "</a>";
                         str += "</li>";
                     }
                     $("#doctorUL").empty();
                     $("#doctorUL").append(str);
                     var page = data.obj.pages;  //总页数
                     var curr = data.obj.pageNum;    //当前页
                     laypage({
                         cont: 'doctorDiv',  //分页需要显示的地方
                         pages: page,    //总页数
                         curr: curr,     //当前页
                         groups: 3,//连续显示分页数
                         skip: true,     //是否开启跳页
                         first: '首页',
                         last: '尾页',
                         skin: 'molv',   //加载内置皮肤，也可以直接赋值16进制颜色值，如:#c00
                         prev: '<', //若不显示，设置false即可
                         next: '>', //若不显示，设置false即可
                         jump: function (e, first) { //触发分页后的回调
                             if (!first) { //一定要加此判断，否则初始时会无限刷新
                                 globalDate.pageNum = e.curr;
                                 search(globalDate);
                             }
                         }
                     });

                 } else {
                     //错误
                     console.log("错误");
                 }
             }
         });
     }
 </script>

4、最终效果

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

 <%--修改laypage的样式--%>
 <style>
     .laypage_main a, .laypage_main input, .laypage_main span {
         height: 40px;
         line-height: 40px
     }

     .laypage_main button {
         height: 40px;
         line-height: 40px;
         margin-left: 5px;
         padding: 0 10px;
         color: #666
     }
 </style>