java分页用到的控件,laypage分页控件使用方法
laypage是一款非常简单易用的分页控件,由于最近项目中使用到了,简单记录一下使用方法
1、引入laypage所需的js和css文件
2、定义分页需要显示的地方,id为doctorDiv是分页要显示的地方
1
2
3
4
5
6
7
8
9
3、使用ajax异步请求查询数据,并分页显示
1
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: "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 += "
";
30 str += "";
31 // str+="";
32 str += "";
33 str += "
34 str += "
" + info.name;
35 str += "" + info.title + "";
36 str += "";
37 str += "
科室:" + info.department_one + "
";
38 str += "
";
39 str += "评分:";
40 str += "";
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 += "";
46 }
47 if(j<5){
48 for(var k=0;k<5-j;k++){
49 str += "";
50 }
51 }
52 }
53 str += ""
54 str += "";
55 str += "
所在医院:" + info.hospital + "
";
56 str += "
疾病擅长:" + info.skilful + "
";
57 str += "
";
58 str += "";
59 str += "
";
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: '
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
4、最终效果
5、感觉laypage显示出来的页码有点扁,高度不够,所以稍微修改了一点css
1
2
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
希望与广大网友互动??
点此进行留言吧!
java分页用到的控件,laypage分页控件使用方法相关推荐
- java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖 主要是jquery-1.11. ...
- Datalist控件,Repeater控件如何分页?
Asp.net提供了三个功能强大的列表控件:DataGrid.DataList和Repeater控件,但其中只有DataGrid控件提供分页功能.相对DataGrid,DataList和Repeate ...
- Repeater控件的分页问题
作者:zhoubin@mail.sdu.edu.cn 以前做ASP的时间不算短,可是做ASP.NET我是个新手.前几天做项目,遇到一个问题,要求比较复杂的数据格式显示,用DataGrid非常难实现,后 ...
- 使用amaze ui的分页样式封装一个通用的JS分页控件
作为一名码农,天天百度.偶尔谷歌,所有代码全靠copy,用第三方插件,偶尔也想着造造轮子,毕竟自己的骨肉总归比较亲. 今天有点空闲时间,想起我们公司之前套的页面的分页插件上还有bug,而写那个分页插件 ...
- 读书笔记:《Aspx开发200问》——如何实现Repeater控件的分页
由于Repeater控件没有分页相关的属性,要使用System.Web.UI.WebControl中的PageDataSource类. PageDataSource封装了DataGrid控件的分页属性 ...
- java fx border_JavaFx UI控件与代码间的绑定方法
JavaFx初探一,UI控件的使用,具体内容如下 方式一:使用纯代码直接new view控件,这样就不涉及到与fxml文件之间的交互了 方式二:使用fxml编写界面文件,用可视化工具scene bui ...
- ASP.NET调用Oracle分页存储过程并结合ASPnetpager分页控件 实现分页功能
之前用的是GridView自带的分页功能,那速度啊慢的真实不行 ,决定自定义分页 Oracle库里有5W多条数据 AspnetPager做的还是不错,拿过来用 Oracle 分页存储过程: cre ...
- 使用PagedDataSource类实现DataList和Repeater控件的分页显示
Asp.net提供了三个功能强大的列表控件:DataGrid.DataList和Repeater控件,但其中只有DataGrid控件提供分页功能.相对DataGrid,DataList和Repeate ...
- ASP.NET技巧:GridView控件自定义分页详解第一页
ASP.NET技巧:GridView控件自定义分页详解 日期:2007年9月11日 作者: 查看:[大字体 中字体 小字体] <script src="../gg/info468.js ...
- 在 DataList 或 Repeater 控件中分页报表数据44
简介 在在线应用程序中显示数据时,分页和排序是两个非常常见的功能.例如,在一个在线书店搜寻 ASP.NET 书籍时,可能会有数以百计种这样的图书,但在报表的每页只列出十个匹配的搜索结果.而且,搜索结果 ...
最新文章
- SAP 没有激活HUM功能照常可以使用Handling Unit
- linux命令怎么打开优盘,Linux下U盘使用具体步骤
- SpringBoot中使用thymeleaf模板时select下拉框怎样查询数据库赋值
- ExcelAndJSON的设计决策
- 《四世同堂》金句摘抄(四)
- Kafka 分区备份实战
- Mask-RCNN(2)Resnet101
- 用python 打开qq自动输入账号密码登陆 (python3 案例1)
- 京瓷打印机m5521cdn_京瓷Kyocera ECOSYS M5521cdn 驱动
- C# 生成word文件 小学一年级口算题生成器(代码)
- Instructions on EINT configuration for SIM hot swap for MT6575/MT6577 platforms
- ossec是干什么的?
- 啥是jQuery(什么是jQuery)
- graphx-社区发现(community detection)
- react-dom.development.js:6202 Unable to preventDefault inside passive event listener invocation 错误
- nuc970 nfs启动配置问题
- CSS实现文字跑马灯效果
- Android中使用ExpandableListView实现好友分组
- 六种STM32开发板光盘资料免费下载
- 超详细的MES制造执行系统介绍——看板管理