jq分页插件,支持动态,静态分页的插件,简单易用。
工作中经常要用到分页功能。为了方便封装了一个比较通用的分页插件开源出来了,简单易用。
官网:https://cwlch.github.io/ChPaging
下载地址:https://github.com/cwlch/ChPaging
详细教程:https://cwlch.github.io/ChPaging/example/guida.html
示列:
功能介绍:
1、支持静态(写死的数据、假分页)、动态分页(Ajax动态请求数据);
2、使用功能可安需求选择:首尾页、上下页、显示条数选择器、总页数展示、快速跳转;
3、他没有自带样式,开发者可以完全自定义样式;
4、简单(使用简单、代码简单);
使用方法:
第一步
<script src="jquery.js"></script >
<script src="ChPaging.1.0.1.min.js"></script >
第二步
//html
<ul id="list"></ul>//与分页关联的列表节点
<div id="pagingId"></div>//分页容器节点
1、动态分页,使用ajax请求即时数据
var paging = new ChPaging($("pagingId"),{
xhr : {//与jq的ajax方法属性值相似。不同点:不能设置success回调
url : '服务端请求接口地址'
data : {请求参数}
...
},
xhrSuccess : function(data){//ajax中的success回调
return {data : data.lsit, count : data.count}
}
reloadPage : function(msg,data){
//msg 返回属性
//data 当前分页数据,数组。
for(var i = 0; i < data.length; i++){
$("#list").append(... data[i] ...);
}
}
})
2、静态分页。(数据缓存在前端,不需要每次点击分页请求数据,也就是常说的假分页)
var data = ["文章1","文章2","文章3","文章4","文章5","文章6"]
var paging = new x
data : data,
limit : 2,
reloadPage : function(msg,data){
//msg 返回属性
//data 当前分页数据,数组。
for(var i = 0; i < data.length; i++){
$("#list").append(... data[i] ...);
}
}
})
希望对大家能有所帮助,欢迎留言讨论。
谢谢!
jq分页插件,支持动态,静态分页的插件,简单易用。的更多相关文章
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
- PNotify – 简单易用的 JS 通知,消息提示插件
PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- 基于jQuery的自定义插件:实现整屏分页转换的功能
动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...
- ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)
0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询.
- ASM:《X86汇编语言-从实模式到保护模式》第16章:Intel处理器的分页机制和动态页面分配
第16章讲的是分页机制和动态页面分配的问题,说实话这个一开始接触是会把人绕晕的,但是这个的确太重要了,有了分页机制内存管理就变得很简单,而且能直接实现平坦模式. ★PART1:Intel X86基础分 ...
- LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...
- 传统方式和插件方式 分别实现 分页 功能 pageHelper 插件
实现分页 这里提供两种方式 一种是传统的分页方式 一种是基于pageHelper插件 实现的分类 推荐使用后者 前者是一般开发的方式 思路 先手动创建一个 pageUtil 工具 ...
- 基于VUE2.0的分页插件(很好用,很简单)
基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来. 下载解压的主要目 ...
随机推荐
- Android service 服务的应用之电话监听器以及短信监听器
首先建立一个项目工程文件,如下图所示:
- python时间序列分析
题记:毕业一年多天天coding,好久没写paper了.在这动荡的日子里,也希望写点东西让自己静一静.恰好前段时间用python做了一点时间序列方面的东西,有一丁点心得体会想和大家 ...
- 社群系统ThinkSNS + 移动端研发周报
社群系统"ThinkSNS+"对比ThinkSNS V4系列,ThinkSNS V4系列的产品规划主要偏重于企业服务应用,注重功能的覆盖面和用户关系的逻辑处理.Thin社群系统kS ...
- 移动端为何不使用click而模拟tap事件及解决方案
移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: ...
- mongodb相关 (population)
记录Mongodb的populate Mongodb是文档型数据库,不存在像关系型数据库一样的外键设置,但通过Mongodb中的populate函数可以模拟关系型数据库的外键连接后的查询功能. 文档型 ...
- Python 搭建环境踩过的那些坑
实践出真知,学习 Python 第六天,准备开始尝试写一些 Python 的实例.之前学习过程主要是参照的 廖雪峰老师的教程.搭建环境的过程,被很多坑围绕着. 版本选择 版本选择 Python 3.5 ...
- koa2 controller中实现类似sleep的延迟功能
今天有同事问我如何在koa2中的controller中使用延迟执行的功能,他直接在controller中使用setTimeout,但是没效果. 错误的代码类似下面这样: // 错误的方法 export ...
- Node.js之断言处理
Node.js之断言处理 在Node.js中,可以利用assert模块进行断言处理,如果判断错误,则抛出AssertError异常 1 equal方法与notEqual方法 equal方法用于判断两个 ...
- c语言 内存管理
动态内存是由程序员手动分配,不再使用时,一定记得释放内存. 静态内存是程序开始运行时由编译器分配的内存,它的分配是程序开始编译时完成的,不占用cpu资源.程序中的各种变量在编译源程序时就已经分配了内存 ...
- IT科技企业逻辑思维面试题
逻辑思维面试题 一.假设有一个池塘,里面有无穷多的水.现有2个空水壶,容积分别为5升和6升.问题是如何只用这2个水壶从池塘里取得3升的水.[请描述操作过程] 答:(1)先用容积为6升的水壶装满水: ( ...