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>

本文实例为大家分享了laypage前端分页插件，ajax异步分页，获取json数据实现无刷新分页，供大家参考，具体内容如下：

function GetList(pageIndex) {

var _this = ""

var clone_this = ""

_this = $(".BindDataList")//数据列表容器，

clone_this = _this.clone(true)

var pageSize = 25//每页展示的条数

$.ajax({

type: "get",

async: false,//异步锁定，默认为true

url: "../ashx/System/DefaultAjax.ashx",//后端处理数据，返回json格式

data: {"pageIndex": pageIndex, "pageSize": pageSize, },

contentType: "application/jsoncharset=utf-8",

success: function (data) {

var json = eval("(" + data + ")")

if (json.PageCount >0) //数据总条数

{

_this.html("")

for (var i = 0i <json.rows.length i++) {

var html = "<li>json数据</li>"

_this.append(html)

}

jsonpage(json, pageIndex, pageSize)

}

else {

_this.html("")

_this.append("")

}

}

})

}

function jsonpage(json, pageIndex, pageSize) {

var coun = json.PageCount//总数据条数

var pagecount = coun % pageSize == 0 ? coun / pageSize : coun / pageSize + 1//计算多少页

var laypageindex = laypage({

cont: 'project_page', //容器。值支持id名、原生dom对象，jquery对象。

skin: '#fb771f',

pages: pagecount, //通过后台拿到的总页数

curr: pageIndex, //初始化当前页

first: '|<', //将首页显示为数字1,。若不显示，设置false即可

last: '>|', //将尾页显示为总页数。若不显示，设置false即可

prev: '<', //若不显示，设置false即可

next: '>', //若不显示，设置false即可

jump: function (obj, first) { //触发分页后的回调

if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr

SearchHotTag(obj.curr)

}

}

})

}

---