5分钟了解jQuery客户端分页插件cPager-职坐标

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

沉沙 2018-06-28 来源：阅读 1401 评论 0

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

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

本文由职坐标整理发布，学习更多的jQuery相关知识，请关注职坐标WEB前端jQuery频道！

jquery实战中文版pdf jquery教程w3c jquery实战教程百度云

本文由 @沉沙发布于职坐标。未经许可，禁止转载。