jQuery客户端分页插件cPager

当前位置:主页 > jQuery库 > 表单 > jQuery客户端分页插件cPager
jQuery客户端分页插件cPager
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2018-01-19
    阅读:
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
简要教程

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

cPager jQuery客户端分页插件的github地址为:https://github.com/stepday/cPager

网友评论