laypagepage设置

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 = 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是前端框架。layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。

事实上，layui更多是面向于后端开发者，所以在组织形式上毅然采用了几年前的以浏览器为宿主的类 AMD 模块管理方式，却又并非受限于 CommonJS 的那些条条框框，它拥有自己的模式，更加轻量和简单。

layui 定义为“经典模块化”，并非是刻意强调“模块”理念本身，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块！

在网上找的用着还可以就是选择时间以后刷新页面还是会回到默认时间。

layui.use(['laydate', 'form'], function () {

var laydate = layui.laydate

var form = layui.form

var start = laydate.render({

eventElem: '#start_date_icon',//日期输入框的图标，给图标也绑定点击事件

trigger: 'click',

value: getRecentDay(-30),//默认值30天前

done:function(value,date){

if(value &&(value>$("#jssj").val())){

/*开始时间大于结束时间时，清空结束时间*/

$("#jssj").val("")

}

end.config.min ={

year:date.year,

month:date.month-1,

date: date.date,

}

},

elem: '#kssj'

})

//结束日期

var end = laydate.render({

elem: '#jssj',

eventElem: '#end_date_icon',//日期输入框的图标，给图标也绑定点击事件

trigger: 'click',

value: getRecentDay(0),//默认值昨天

done:function(value,date){

start.config.max={

year:date.year,

month:date.month-1,

date: date.date,

}

}

})

/**获取近N天*/

function getRecentDay(day){

var today = new Date()

var targetday_milliseconds=today.getTime() + 1000*60*60*24*day

today.setTime(targetday_milliseconds)

var tYear = today.getFullYear()

var tMonth = today.getMonth()

var tDate = today.getDate()

tMonth = doHandleMonth(tMonth + 1)

tDate = doHandleMonth(tDate)

return tYear+"-"+tMonth+"-"+tDate

}

function doHandleMonth(month){

var m = month

if(month.toString().length == 1){

m = "0" + month

}

return m

}

})

---