laypage分页控件使用方法

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

官网：https://www.layui.com/demo/laypage.html

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>

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

?

1 2 3 4 5 6 7 8 9

<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异步请求查询数据，并分页显示

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<%--修改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>