jq分页插件,支持动态,静态分页的插件,简单易用。
2017-09-17 21:46
197 查看
工作中经常要用到分页功能。为了方便封装了一个比较通用的分页插件开源出来了,简单易用。
官网:https://cwlch.github.io/ChPaging
下载地址:https://github.com/cwlch/ChPaging
详细教程:https://cwlch.github.io/ChPaging/example/guida.html
示列:
功能介绍:
1、支持静态(写死的数据、假分页)、动态分页(Ajax动态请求数据);
2、使用功能可安需求选择:首尾页、上下页、显示条数选择器、总页数展示、快速跳转;
3、他没有自带样式,开发者可以完全自定义样式;
4、简单(使用简单、代码简单);
使用方法:
第一步
将jquery和ChPaging库引入到页面中
第二步
创建一个ChPaging实例,并操作实例关联列表展示。必须创建一个分页容器节点。
1、动态分页,使用ajax请求即时数据
2、静态分页。(数据缓存在前端,不需要每次点击分页请求数据,也就是常说的假分页)
希望对大家能有所帮助,欢迎留言讨论。
谢谢!
官网:https://cwlch.github.io/ChPaging
下载地址:https://github.com/cwlch/ChPaging
详细教程:https://cwlch.github.io/ChPaging/example/guida.html
示列:
功能介绍:
1、支持静态(写死的数据、假分页)、动态分页(Ajax动态请求数据);
2、使用功能可安需求选择:首尾页、上下页、显示条数选择器、总页数展示、快速跳转;
3、他没有自带样式,开发者可以完全自定义样式;
4、简单(使用简单、代码简单);
使用方法:
第一步
将jquery和ChPaging库引入到页面中
<script src="jquery.js"></script > <script src="ChPaging.1.0.1.min.js"></script >
第二步
创建一个ChPaging实例,并操作实例关联列表展示。必须创建一个分页容器节点。
//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] ...); } } })
希望对大家能有所帮助,欢迎留言讨论。
谢谢!
相关文章推荐
- 分页插件简单实用,支持跟随数据量变化进行分页
- MyBatis分页插件:比PageHelper都要简单,使用很灵活,目前支持Oracle和MySQL
- 织梦超简单“加载更多”“无限下拉”插件,支持动静态,支持图片延迟加载
- 一个简单的静态的分页界面
- [JS 最简单简洁的插件] 浮动提示 (支持显示Html和手动关闭)
- 【js】jQuery Pagination分页插件( 添加支持 首页,末页)
- 简单分页插件
- mybatis分页插件pageHelper简单实用
- 分页插件(基于jq和bootstrap)
- Java设计模式之静态代理和动态代理(简单例子)
- 安装VS.NET插件AnkhSVN,通过简单配置让其支持.svn和_svn,并其很好的支持web project
- spring boot 配置MyBatis,支持多个数据源和分页插件
- 简单实用的jQuery分页插件
- SQL简单分页语句(支持SQL2005及以上)
- JS实现table表格数据排序功能(可支持动态数据+分页效果)
- JS实现table表格数据排序(可支持动态数据+分页效果)
- c#关于网页内容抓取,简单爬虫的实现。(包括动态,静态的)
- 简单分页插件simplePagination改造为CMD模块
- 记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序
- Mybatis分页插件PageHelper简单使用