<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 = 0i <mydata.lengthi++) {
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=0j <pingfenj++) {
45 str += "<img src='images/pc/icon_031.png'>"
46 }
47 if(j<5){
48 for(var k=0k<5-jk++){
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、最终效果
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>
只要把目录下的， layui/lay/modulles/laypage.js查找 t.pages<=1)return""
改成 t.pages<=0)return""
有文档的
http://www.layui.com/demo/laypage.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>总页数低于页码总数</legend>
</fieldset>
<div id="demo0"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>总页数大于页码总数</legend>
</fieldset>
<div id="demo1"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>自定义主题 - 颜色随意定义</legend>
</fieldset>
<div id="demo2"></div>
<div id="demo2-1"></div>
<div id="demo2-2"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>自定义首页、尾页、上一页、下一页文本</legend>
</fieldset>
<div id="demo3"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>不显示首页尾页</legend>
</fieldset>
<div id="demo4"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>开启HASH</legend>
</fieldset>
<div id="demo5"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>只显示上一页、下一页</legend>
</fieldset>
<div id="demo6"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>显示完整功能</legend>
</fieldset>
<div id="demo7"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>自定义排版</legend>
</fieldset>
<div id="demo8"></div>
<div id="demo9"></div>
<div id="demo10"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>自定义每页条数的选择项</legend>
</fieldset>
<div id="demo11"></div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px">
<legend>将一段已知数组分页展示</legend>
</fieldset>
<div id="demo20"></div>
<ul id="biuuu_city_list"></ul>
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer
//总页数低于页码总数
laypage.render({
elem: 'demo0'
,count: 50 //数据总数
})
//总页数大于页码总数
laypage.render({
elem: 'demo1'
,count: 70 //数据总数
,jump: function(obj){
console.log(obj)
}
})
//自定义样式
laypage.render({
elem: 'demo2'
,count: 100
,theme: '#1E9FFF'
})
laypage.render({
elem: 'demo2-1'
,count: 100
,theme: '#FF5722'
})
laypage.render({
elem: 'demo2-2'
,count: 100
,theme: '#FFB800'
})
//自定义首页、尾页、上一页、下一页文本
laypage.render({
elem: 'demo3'
,count: 100
,first: '首页'
,last: '尾页'
,prev: '<em>←</em>'
,next: '<em>→</em>'
})
//不显示首页尾页
laypage.render({
elem: 'demo4'
,count: 100
,first: false
,last: false
})
//开启HASH
laypage.render({
elem: 'demo5'
,count: 500
,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
,hash: 'fenye' //自定义hash值
})
//只显示上一页、下一页
laypage.render({
elem: 'demo6'
,count: 50
,layout: ['prev', 'next']
,jump: function(obj, first){
if(!first){
layer.msg('第 '+ obj.curr +' 页')
}
}
})
//完整功能
laypage.render({
elem: 'demo7'
,count: 100
,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
,jump: function(obj){
console.log(obj)
}
})
//自定义排版
laypage.render({
elem: 'demo8'
,count: 1000
,layout: ['limit', 'prev', 'page', 'next']
})
laypage.render({
elem: 'demo9'
,count: 1000
,layout: ['prev', 'next', 'page']
})
laypage.render({
elem: 'demo10'
,count: 1000
,layout: ['page', 'count']
})
//自定义每页条数的选择项
laypage.render({
elem: 'demo11'
,count: 1000
,limit: 100
,limits: [100, 300, 500]
})
//将一段数组分页展示
//测试数据
var data = [
'北京',
'上海',
'广州',
'深圳',
'杭州',
'长沙',
'合肥',
'宁夏',
'成都',
'西安',
'南昌',
'上饶',
'沈阳',
'济南',
'厦门',
'福州',
'九江',
'宜春',
'赣州',
'宁波',
'绍兴',
'无锡',
'苏州',
'徐州',
'东莞',
'佛山',
'中山',
'成都',
'武汉',
'青岛',
'天津',
'重庆',
'南京',
'九江',
'香港',
'澳门',
'台北'
]
//调用分页
laypage.render({
elem: 'demo20'
,count: data.length
,jump: function(obj){
//模拟渲染
document.getElementById('biuuu_city_list').innerHTML = function(){
var arr = []
,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit)
layui.each(thisData, function(index, item){
arr.push('<li>'+ item +'</li>')
})
return arr.join('')
}()
}
})
})
</script>
</body>
</html>
