laypage分页控件使用方法
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是分页要显示的地方
<div class="doctor_list">
<ul id="doctorUL">
<div style="clear: both;"></div>
</ul>
<div style="clear: both;"></div>
<div class="pages" id="doctorDiv"> </div>
</div>
3、使用ajax异步请求查询数据,并分页显示
<script type="text/javascript">
//定义全局变量记录页码信息
var globalDate = {};
//1页显示两条数据
globalDate.pageSize=2;
$(function () {
//查询数据
search();
});
//查询数据
function search(date) {
var str = "";
$.ajax({
type: "post",
url: "<%=basePath%>mytlist.html",
dataType: "json",
async: true,
data: date,
success: function (data) {
if (data.result) {
var mydata = data.obj.list;
for (var i = 0; i < mydata.length; i++) {
var info = mydata[i];
str += "<li>";
str += "<a onclick=" + "doctorDetail('" + info.id + "')" + ">";
// str+="<a href='mytdoctor_xq.html?id='"+info.id+">";
str += "<img src=" + info.photo + ">";
str += "<div class='yi_text'>";
str += "<h2>" + info.name;
str += "<span>" + info.title + "</span>";
str += "</h2>";
str += "<h3>科室:" + info.department_one + "</h3>";
str += "<h3>";
str += "<em>评分:</em>";
str += "<span>";
if (info.total_score != null && info.total_score != "" && info.total_evaluate_num != null && info.total_evaluate_num != "") {
var pingfen = info.total_score / info.total_evaluate_num; //评分
var j;
for (j=0; j < pingfen; j++) {
str += "<img src='images/pc/icon_031.png'>";
}
if(j<5){
for(var k=0;k<5-j;k++){
str += "<img src='images/pc/icon_032.png'>";
}
}
}
str += "</span>"
str += "</h3>";
str += "<h3>所在医院:" + info.hospital + "</h3>";
str += "<p>疾病擅长:" + info.skilful + "</p>";
str += "</div>";
str += "</a>";
str += "</li>";
}
$("#doctorUL").empty();
$("#doctorUL").append(str);
var page = data.obj.pages; //总页数
var curr = data.obj.pageNum; //当前页
laypage({
cont: 'doctorDiv', //分页需要显示的地方
pages: page, //总页数
curr: curr, //当前页
groups: 3,//连续显示分页数
skip: true, //是否开启跳页
first: '首页',
last: '尾页',
skin: 'molv', //加载内置皮肤,也可以直接赋值16进制颜色值,如:#c00
prev: '<', //若不显示,设置false即可
next: '>', //若不显示,设置false即可
jump: function (e, first) { //触发分页后的回调
if (!first) { //一定要加此判断,否则初始时会无限刷新
globalDate.pageNum = e.curr;
search(globalDate);
}
}
});
} else {
//错误
console.log("错误");
}
}
});
}
</script>
4、最终效果

5、感觉laypage显示出来的页码有点扁,高度不够,所以稍微修改了一点css
<%--修改laypage的样式--%>
<style>
.laypage_main a, .laypage_main input, .laypage_main span {
height: 40px;
line-height: 40px
} .laypage_main button {
height: 40px;
line-height: 40px;
margin-left: 5px;
padding: 0 10px;
color: #666
}
</style>
laypage分页控件使用方法的更多相关文章
- AspNetPager分页控件使用方法
一.下载AspNetPager.dll 二.AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引用dll文件 三. 在工具栏中添加控件,这样可以支持拖拽使用 四. 要使用Asp ...
- 第三方分页控件aspnetPager出现问题解决方法
问题描述: 今天在打开以前的项目使用vs2013打开后并且生成解决方案的时候发现报错了.经过检查发现是由于第三方分页控件aspnetPager在页面上不能引用到了. 解决方法: 1. 首先将AspNe ...
- AspNetPager分页控件的使用方法
1. 首先将AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引入dll文件 (通过NuGet获取) 2. 在工具栏中添加控件,这样可以支持拖拽使用 3.页面拖入分页控件,设置 ...
- 分页控件layui的使用
$.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json ...
- 在DevExpress程序中使用Winform分页控件直接录入数据并保存
一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数 ...
- 仿淘宝分页按钮效果简单美观易使用的JS分页控件
分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 ...
- winform快速开发平台 -> 基础组件之分页控件
一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...
- 基于存储过程的MVC开源分页控件--LYB.NET.SPPager
摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...
- 自定义angularjs分页控件
继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...
随机推荐
- 【BootStrap】 概述 & CSS
BootStrap BootStrap由Twitter开发,基于HTML,CSS,JS,是一套前端框架.它的特点是对浏览器良好的支持(目前市面上所有流行浏览器都可以),兼容移动设备,以及响应式设计(响 ...
- 【Linux】 字符串和文本处理工具 grep & sed & awk
Linux字符串&文本处理工具 因为用linux的时候主要用到的还是字符交互界面,所以对字符串的处理变得十分重要.这篇介绍三个常用的字符串处理工具,包括grep,sed和awk ■ grep ...
- TCP为什么不是两次握手而是三次?
为什么不采用两次握手?如果是两次握手的情景:客户端在发送一个连接建立请求之后进入等待状态,等到服务端确认之后就进入established状态.服务端在发送一个确认连接建立请求报文之后(不管客户端是否有 ...
- C语言程序设计(基础)最后一次作业-- 总结报告
本次作业是本学期的最后一次作业,有始有终,本次作业回顾下本学期的第0次作业,回答下面几个问题. 注意:在回答问题时请不要简单的回答 "不是","是".请把这当成 ...
- alpha-咸鱼冲刺day3
一,合照 emmmmm.自然还是没有的. 二,项目燃尽图 三,项目进展 今天把数据库的表给建好了,学长那边把登陆跟注册页面也做好了(纯页面,html5+css的那种) 四,问题困难 日常啥都不会,百度 ...
- 敏捷冲刺每日报告三(Java-Team)
第三天报告(10.27 周五) 团队:Java-Team 成员: 章辉宇(284) 吴政楠(286) 陈阳(PM:288) 韩华颂(142) 胡志权(143) github地址:https://gi ...
- MySQL的小Tips
交集和差集 MySQL中没有这两个运算,但是有并集运算,所以可以利用这个来间接实现. 差集: SELECT ID FROM ( SELECT DISTINCT A.AID AS ID FROM TAB ...
- maven创建web工程
使用eclipse插件创建一个web project 首先创建一个Maven的Project如下图 我们勾选上Create a simple project (不使用骨架) 这里的Packing 选择 ...
- (原创)不带模板的OLE输出EXCEL
目前我已知的EXCEL输出方式有3种: 1.GUI_DOWNLOAD函数输出(适用于简单无格式要求的输出). 2.OLE输出(适用于对EXCEL格式输出有特殊要求的,但是因其填充数据和设置格式是基于一 ...
- [知识梳理]课本3&9.1
函数:关键词:参数.返回值.函数返回类型.函数体. 函数按照返回类型,可以分为有参函数和无参函数. 函数根据是否有返回值,可以分为返回值函数和非返回值函数. 函数的定义:函数的定义可以放在任意 ...