很多站长朋友们都不太清楚laypagephp，今天小编就来给大家整理laypagephp，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 有人知道laypage这个分页插件怎么用吗？ 2、 layui分页怎么配合php使用 3、 layui的分页组件在后台怎么获取分页php 4、 laypage不足一页不显示分页怎么办 5、 laypagepage设置 6、 使用layui前端框架，进行分页，php怎样传递数据 有人知道laypage这个分页插件怎么用吗？有文档的
<!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测试数据/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测试数据/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>
layui分页怎么配合php使用0代表开始的下标，比如一页显示10条的话，那么第一页就是0,10，第二页就是（2-1）*10，10，第三页就是（3-1）*10，10 所以你那个0 就是写 limit($page-1)*$pagenum,$pagenum
layui的分页组件在后台怎么获取分页php$.getJSON( )的使用方法简介
$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
url是必选参数，表示json数据的地址；
data是可选参数，用于请求数据时发送数据参数；
success是可参数，这是一个回调函数，用于处理请求到的数据。
//内容页面
<div id="notice_div"></div>
//分页控件 <div id="notice_pages"></div> <script> var roolurl = "http://" + window.location.host; var urlAshx = roolurl + "/aa/Ashx/NoticeInfo.ashx"; //var pages = 0; //获取分页好的公告内容 function GetNoticeList(curr, cid) { $.getJSON(urlAshx, {//参数 action: "notice_action", courseid: cid, page: curr || 1,//向服务端传的参数，此处只是演示 nums: 3//每页显示的条数 }, function (datajson) {//成功执行的方法 if (datajson != null) { var norice_content = ""; //alert(datajson.pages); $(datajson.rows).each(function (n, Row) { norice_content += " <div class='panel panel-default'>"; norice_content += " <div class='panel-heading'>"; norice_content += " <h3 class='panel-title'>"; norice_content += Row.CreateDate; norice_content += " "; norice_content += Row.Creater; norice_content += " </h3>"; norice_content += " </div>"; norice_content += " <div class='panel-body'>"; norice_content += Row.NoticeContent; norice_content += " </div>"; norice_content += " </div>"; }); $('#notice_div').html(norice_content); //alert(11); //调用分页 laypage({ cont: 'notice_pages',//容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div> pages: datajson.pages,//总页数 groups: 5, //连续显示分页数 skip: false, //是否开启跳页 skin: '#AF0000', curr: curr || 1, //当前页, jump: function (obj, first) {//触发分页后的回调 if (!first) {//点击跳页触发函数自身，并传递当前页：obj.curr GetNoticeList(obj.curr, cid); } } }) } }); } $(document).ready(function () { GetNoticeList(0, '<%=_courseid%>') }); </script>
laypage不足一页不显示分页怎么办只要把目录下的， layui/lay/modulles/laypage.js
查找 t.pages<=1)return"";
改成 t.pages<=0)return"";
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 = 0; i < mydata.length; i++) {
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="/data/upload/help/202303/13/68421f5e21ac1580b75e051f55df9ecb.photo + ">";
33 str += "<div class='yi_text'>";
34 str += "<strong>" + info.name;
35 str += "<span>" + info.title + "</span>";
36 str += "</strong>";
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=0; j < pingfen; j++) {
45 str += "<img src='/data/upload/help/202303/13/bbcf24fa953861399a88b59f023186be.png'>";
46 }
47 if(j<5){
48 for(var k=0;k<5-j;k++){
49 str += "<img src='/data/upload/help/202303/13/75e56dbafcf6ff732317c3a981760f14.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前端框架，进行分页，php怎样传递数据//以下将以jquery.ajax为例，演示一个异步分页
function?demo(curr){
??$.getJSON('test/demo1.json',?{
????page:?curr?||?1?//向服务端传的参数，此处只是演示
??},?function(res){
????//此处仅仅是为了演示变化的内容
????var?demoContent?=?(new?Date().getTime()/Math.random()/1000)|0;
????document.getElementById('view1').innerHTML?=?res.content?+?demoContent;
????//显示分页
????laypage({
??????cont:?'page1',?//容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div?id="page1"></div>
??????pages:?res.pages,?//通过后台拿到的总页数
??????curr:?curr?||?1,?//当前页
??????jump:?function(obj,?first){?//触发分页后的回调
????????if(!first){?//点击跳页触发函数自身，并传递当前页：obj.curr
??????????demo(obj.curr);
????????}
??????}
????});
??});
};
//运行
demo();
关于laypagephp的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。