laypage分页控件使用方法(代码片段)

天涯浪子心 天涯浪子心     2022-11-03     807

关键词:

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

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=" + 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=0; j < pingfen; j++) 
45                                 str += "<img src=\'images/pc/icon_031.png\'>";
46                             
47                             if(j<5)
48                                 for(var k=0;k<5-j;k++)
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下载地址:http://www.layui.com/引用:layui.csslayui.js<h1>LayUI分页控件</h1><div><divid="demo7"></div></div> layui.use([‘laypage‘,‘layer‘],function()  &nbs 查看详情

laypage分页插件的使用

laypage是用于分页的插件,该插件通过js请求分页数据1.载入js文件<scripttype="text/javascript"src="__STATIC__/hadmin/lib/laypage/1.2/laypage.js"></script>2.在页面中显示分页信息的地方插入标记<divid="laypage"></div>3.添加js & 查看详情

记录项目中用的laypage分页代码

...降,很多时候记不住东西。 参考url:http://www.layui.com/laypage/直接上代码了<scriptsrc="/assets/js/laypage/laypage.js"></script>进入页面时,默认加载第一页;定时器每隔60秒取新数据:$(document).re 查看详情

wpf之列表分页控件(代码片段)

 WPF之列表分页控件控件名:WindowAcrylicBlur作者:WPFDevelopersOrg -黄佳|驚鏵原文链接:  https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用大于等于.NET40。VisualStudio2022。项目使用MIT开源许可协议。新建Pagination自定义控件... 查看详情

laypage分页

1、分页laypage({cont:$("#page"),//容器,仅支持id名原生DOM对象,jquery对象pages:10,//总页数skip:true,//是否开启跳页groups:5,//连续显示分页数first:1,//首页last:10,//尾页skin:‘#fff‘,//皮肤curr:2,//当前页jump:function(obj,first){//触发分页后的回调//触... 查看详情

laypage分页源码

layui.use([‘laypage‘, ‘layer‘], function(){    var laypage = layui.laypage        ,layer = layui.layer;&n 查看详情

layui分页组件,一直在调用方法的解决办法(代码片段)

...回调,所以初次不让它执行jump里的方法 //自定义排版laypage.render(elem:‘demo8‘,count:totalCount,layout:[‘count‘,‘prev‘,‘page‘,‘next‘,‘limit‘,‘refresh‘,‘skip‘],jump:function(obj,first)//模拟渲染page=obj.curr;limit=obj.limit;if(!first)//执... 查看详情

bootstrap-paginator分页控件的使用(代码片段)

首先对js和css的引用<linkrel="stylesheet"href="reference/bootstrap/css/bootstrap.min.css"/> <scripttype="text/javascript"src="reference/jquery-2.0.3.min.js"></script><scripttype="tex 查看详情

关于layui.laypage.render刷新首页没有分页问题

...言:  最近写项目遇到一个问题,就是使用vue里的layui.laypage.render分页时,刷新首页会只有一页,但后台传来的数据是有50多页的,所有的数据也都一一对应,调了好久debug,终于发现了一个地方:layui.laypage.render的elem有点不对... 查看详情

wpf分页控件(代码片段)

最近要写个程序要用到分页控件,找到了很多好高级的,代码拿到了也看不懂。最后找到了一个能看懂的,完善了一下。源控件https://www.cnblogs.com/madehua/archive/2011/12/14/2287672.html  页面代码<UserControlx:Class="WpfCustomControlLibra... 查看详情

laravel5.1与laypage结合进行分页

路由Route::match(array(‘get‘,‘post‘),‘/orm‘,‘[email protected]‘);控制器<?phpnamespaceAppHttpControllers;useIlluminateHttpRequest;useAppHttpRequests;useAppUser;//user表的模型useAppPhone;//phone表 查看详情

css基于angularjs+bootstrap分页控件(代码片段)

查看详情

相关tablelayoutpanel分页显示自定义控件(代码片段)

publicpartialclassAcrossGrid:UserControl///<summary>///一页数量///</summary>privateint_RowCount=21;///<summary>///数据源///</summary>publicList<string>DataListget;set;=newLis 查看详情

wpf实现datagrid/listview分页控件(转)(代码片段)

...,而且用户体验也很糟糕。这篇博客将介绍如何创建一个分页控件。为了简单起见,这个分页控件目前只有首页/上一页/下一页/末页/总页数/第几页等功能。实现思路,首页/上一页/下一页/末页这四个通过路由事件来实现,在 查看详情

wpf实现datagrid/listview分页控件(转)(代码片段)

...,而且用户体验也很糟糕。这篇博客将介绍如何创建一个分页控件。为了简单起见,这个分页控件目前只有首页/上一页/下一页/末页/总页数/第几页等功能。实现思路,首页/上一页/下一页/末页这四个通过路由事件来实现,在 查看详情

wpf管理系统自定义分页控件-wpf特工队内部资料(代码片段)

原文:WPF管理系统自定义分页控件-WPF特工队内部资料  最近做一个演示的管理系统项目,需要用到分页控件,在网上找了很多,依然找到与UI模版匹配的,最后干脆自己写一个。  分页控件分析:    1、分页控件分简单... 查看详情

模糊查询+分页有坑!(代码片段)

...行模糊查询?不知道你有没有将查询结果,进行分页处理?模糊查询,加上分页处理,会有意想不到的坑,不信我们继续往下看。我之前提供过一个品牌查询接口,给前端品牌选择控件使用的。当时为... 查看详情

模糊查询+分页有坑!(代码片段)

...行模糊查询?不知道你有没有将查询结果,进行分页处理?模糊查询,加上分页处理,会有意想不到的坑,不信我们继续往下看。我之前提供过一个品牌查询接口,给前端品牌选择控件使用的。当时为... 查看详情