5分钟了解jQuery客户端分页插件cPager

简要教程

cPager是一款jQuery客户端分页插件。cPager能够在客户端实现分页显示效果，结合CSS3，可以为用户呈现出漂亮的分页效果。该jQuery客户端分页插件的特点还有：

o 支持分页每一页显示的记录条数。

o 支持分页容器的配置。

o 支持个体元素的样式标记配置。

o 自动提取数据进行元素总数和总页数的计算。

 使用方法

在页面中引入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 //当前页面的索引
});