工作中经常要用到分页功能。为了方便封装了一个比较通用的分页插件开源出来了,简单易用。

官网: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] ...);
}
}
})

希望对大家能有所帮助,欢迎留言讨论。

谢谢!

jq分页插件,支持动态,静态分页的插件,简单易用。的更多相关文章

  1. 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 **** ...

  2. PNotify – 简单易用的 JS 通知,消息提示插件

    PNotify 是一个 JavaScript 通知插件,前身为 Pines Notify.它旨在提供无与伦比的灵活性,同时很容易使用.它可以提供无阻塞的通知,允许用户无需关闭通知或者提示信息就可以点击 ...

  3. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  4. 基于jQuery的自定义插件:实现整屏分页转换的功能

    动态创建jQuery插件 一.实现功能: 1.基本功能:自适应式整屏分页功能的实现 2.通过鼠标点击标签页转换分页,支持键盘上下左右键的转换分页,同样支持 鼠标滚轮上下滑动转换分页 3.切屏时的动画效 ...

  5. ajax+json模态框中分页(spring+struts+mybatis+easyui分页插件)

    0.业务需求: 点击每个数字的时候可以显示每个对应的详细记录.也就是得点击11的时候拿着开采部与C级去查询.

  6. ASM:《X86汇编语言-从实模式到保护模式》第16章:Intel处理器的分页机制和动态页面分配

    第16章讲的是分页机制和动态页面分配的问题,说实话这个一开始接触是会把人绕晕的,但是这个的确太重要了,有了分页机制内存管理就变得很简单,而且能直接实现平坦模式. ★PART1:Intel X86基础分 ...

  7. LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  8. 传统方式和插件方式 分别实现 分页 功能 pageHelper 插件

    实现分页  这里提供两种方式  一种是传统的分页方式  一种是基于pageHelper插件 实现的分类     推荐使用后者 前者是一般开发的方式   思路  先手动创建一个 pageUtil 工具 ...

  9. 基于VUE2.0的分页插件(很好用,很简单)

    基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来. 下载解压的主要目 ...

随机推荐

  1. mybatis 详解(七)------一对一、一对多、多对多

    前面几篇博客我们用mybatis能对单表进行增删改查操作了,也能用动态SQL书写比较复杂的sql语句.但是在实际开发中,我们做项目不可能只是单表操作,往往会涉及到多张表之间的关联操作.那么我们如何用 ...

  2. Java中StringBuffer类append方法的使用

    public static void testAppend() { StringBuffer sb = new StringBuffer("This is a StringBuffer!&q ...

  3. python进阶(6):多态,封装

    昨天说了面向对象三大特性的继承,今天来说多态和封装,很多其他程序员说python不支持多态没有多态,并不是python没有多态,而是python处处皆多态.今天的讲课重点会放在封装. 一.多态 1.多 ...

  4. [stm32F429-DISCO-HAL] 1.先说说关于stm32Cube的一些事情。然后,Start with it...

    目前,我觉得STM32CUBE最大的方便在于,可以使用STM32CubeMX软件来图形化配置外设.首先贴出官网的PDF,Getting started with STM32CubeF4 firmwar ...

  5. RDVECore来自锐动的无UI,高度抽象化API的视频编辑SDK

    1 编写目的 预期读者: 有视频编辑开发经验或者无经验的,打算或者正在使用"锐动IOS版RDVECore"的相关工程师. iOS软件工程师. 产品经理. QA 2 名词解释 分辨率 ...

  6. 如何用CSS和jQuery实现一个侧滑导航菜单

    为了建立导航菜单,让我们先看看html结构:<!DOCTYPE html><html lang="en"><head> <meta cha ...

  7. ASP.NET Core 运行原理解剖[1]:Hosting

    ASP.NET Core 是新一代的 ASP.NET,第一次出现时代号为 ASP.NET vNext,后来命名为ASP.NET 5,随着它的完善与成熟,最终命名为 ASP.NET Core,表明它不是 ...

  8. 50个Java多线程面试题(上)

    Java 语言一个重要的特点就是内置了对并发的支持,让 Java 大受企业和程序员的欢迎.大多数待遇丰厚的 Java 开发职位都要求开发者精通多线程技术并且有丰富的 Java 程序开发.调试.优化经验 ...

  9. SoapUI进行接口测试,怎么应对接口地址总是变化!

    如果是没有代码能力的小白,要利用工具进行接口测试的时候,经常会遇到接口地址或者接口参数变化的问题,然后不得不在他们改了接口之后,就手动去改所有的请求链接地址和接口参数!1-5个请求,我们手动改还应付的 ...

  10. poj 2763 Housewife Wind (树链剖分)

    题目链接:http://poj.org/problem?id=2763 题意: 给定一棵含n个结点的树和树的边权,共有q次操作,分为两种 0 c :求从位置s到c的距离,然后s变成c 1 a b:把第 ...