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分页控件使用方法的更多相关文章

  1. AspNetPager分页控件使用方法

    一.下载AspNetPager.dll 二.AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引用dll文件 三. 在工具栏中添加控件,这样可以支持拖拽使用 四. 要使用Asp ...

  2. 第三方分页控件aspnetPager出现问题解决方法

    问题描述: 今天在打开以前的项目使用vs2013打开后并且生成解决方案的时候发现报错了.经过检查发现是由于第三方分页控件aspnetPager在页面上不能引用到了. 解决方法: 1. 首先将AspNe ...

  3. AspNetPager分页控件的使用方法

    1. 首先将AspNetPager.dll复制于应用程序下的bin目录,打开解决方案,引入dll文件 (通过NuGet获取) 2. 在工具栏中添加控件,这样可以支持拖拽使用 3.页面拖入分页控件,设置 ...

  4. 分页控件layui的使用

    $.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json ...

  5. 在DevExpress程序中使用Winform分页控件直接录入数据并保存

    一般情况下,我们都倾向于使用一个组织比较好的独立界面来录入或者展示相关的数据,这样处理比较规范,也方便显示比较复杂的数据.不过在一些情况下,我们也可能需要直接在GridView表格上直接录入或者修改数 ...

  6. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

  7. winform快速开发平台 -> 基础组件之分页控件

    一个项目控件主要由及部分的常用组件,当然本次介绍的是通用分页控件. 处理思想:我们在处理分页过程中主要是针对数据库操作. 一般情况主要是传递一些开始位置,当前页数,和数据总页数以及相关关联的业务逻辑. ...

  8. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  9. 自定义angularjs分页控件

    继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...

随机推荐

  1. Spring事务管理—aop:pointcut expression解析(转)

    本文转载自: http://hane00.blog.163.com/blog/static/160061522011427473965/ 先来看看这个spring的配置文件的配置: <!-- 事 ...

  2. python全栈开发-Day9 函数对象、函数嵌套、名称空间与作用域

    一 .函数对象 一 .函数是第一类对象,即函数可以当作数据传递 可以被引用 可以当作参数传递 返回值可以是函数 可以当作容器类型的元素 二. 利用该特性,优雅的取代多分支的if def foo(): ...

  3. easyUi五个常用插件

    1.对话框(Dialog) 对话框(dialog)是一个特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏.默认情况下,对话框(dialog)只有一个显示在头部右侧的关闭工具.用户可以配置对话框 ...

  4. C#图解 (类和继承)

    所有的类都派生自object类 除了特殊的类object ,所有的类都是派生类,即使它们没有基类的规格说明.类object是唯一的非派生类,因为它是继承层次结构的基础. 一个类声明的基类规格说明只能有 ...

  5. python 面向对象的程序设计

    一:什么是编程范式? 编程是程序员用特定的语法 + 数据结构 + 算法组成的代码来告诉计算机如何执行任务的过程. 如果把编程的过程比喻为练习武功,那么编程范式指的就是武林中的各种流派,而在编程的世界里 ...

  6. 敏捷冲刺每日报告一(Java-Team)

    第一天报告(10.25  周三) 团队:Java-Team 成员: 章辉宇(284) 吴政楠(286) 陈阳(PM:288) 韩华颂(142) 胡志权(143) github地址:https://gi ...

  7. JAVA委托事件处理机制

    1)事件:用户对程序的某一种功能性操作. Java中的事件主要有两种: 1.组件类事件 componentEvent.ContainerEvent.WindowEvent.FocusEvent.Pai ...

  8. SCOI2010 序列操作

    2421 序列操作 http://codevs.cn/problem/2421/ 2010年省队选拔赛四川   题目描述 Description lxhgww最近收到了一个01序列,序列里面包含了n个 ...

  9. 从PRISM开始学WPF(四)Prism-Module?

    从PRISM开始学WPF(一)WPF? 从PRISM开始学WPF(二)Prism? 从PRISM开始学WPF(三)Prism-Region? 从PRISM开始学WPF(四)Prism-Module? ...

  10. 前端之bootstrap模态框

    简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...