表单/表格
cPager 客户端分页jQuery插件
PetitQ
cPager 是一款 jQuery 客户端分页插件。cPager 能够在客户端实现分页显示效果，结合 CSS3，可以为用户呈现出漂亮的分页效果。该 jQuery 客户端分页插件的特点还有：
支持分页每一页显示的记录条数
也想出现在这里？联系我们吧
支持分页容器的配置
支持个体元素的样式标记配置
自动提取数据进行元素总数和总页数的计算
使用方法
在页面中引入 jquery 以及 cPager.css 和 cPager.js 文件，以及面板文件 template.js。
<link href="css/cPager.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/cPager.js"></script>
<script src="js/template.js"></script>
其中，template.js 是 js 模板引擎，用于快速渲染页面列表的。cPager.js 是基于 jQuery 封装的客户端分页插件。
HTML 结构
用于展示数据的基本 HTML 结构如下：
<div class="container">
<!--容器-->
<ul id="listShow"></ul>
<!--分页容器-->
<div class="turn-page" id="pager"></div>
<!--模板-->
<textarea id="listTemplate" style="display: none;">
{for item in data}
<li class="li-item hide">${item.name}</li>
{/for}
</textarea>
</div>
初始化插件
在页面 DOM 元素加载完毕之后，可以像下面这样来初始化该 jQuery 客户端分页插件。
$(this).cPager({
pageSize: 8, //每一页显示的记录条数
pageid: "pager", //分页容器ID
itemClass: "li-item", //个体元素名称
pageIndex: 1 //当前页面的索引
});
Github 地址：https://github.com/stepday/cPager
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
