×

分享一款不错的jQuery分页插件:Cypager

作者:Terry2016.10.24来源:Web前端之家浏览:21285评论:1

好像还没分享过有关分页的文章,最近做了一个活动页面,统计用户中奖数据,需要用到分页,先前都是开发做的分页效果,效果很一般,代码也复杂。

这次活动想尝试新的分页,无意间发现一款不错的jQuery插件:Cypager。

600.jpg

它可以传入总页数和每页显示条数,可设置显示多少位数字,ajax请求后台返回当前页条数。

说明:

jQuery可点击回调的分页插件,cypager一款强大的支持分页效果的,样式有点类似bootstrap分页。上一页、下一页加载前的回调效果。cypager插件兼容 IE8+,Chrome,Firefox 浏览器,核心文件仅 5KB。

调用:

调用jQuery库、cypager.js和css,如下:

<script src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="css/cypager.min.css" />
<script type="text/javascript" src="js/cypager.min.js" ></script>

这里说明下,jQuery库文件需要1.7.2或以上版本。

那么如何生成分页效果呢,看下如下代码:

<div id="pagerArea" unselectable="on" onselectstart="return false;"></div>
$("#pagerArea").cypager({pg_size: 10, pg_nav_count: 8, pg_total_count: 194, pg_call_fun: function(count) { 
        $("#console").html("正在加载第(" + count + ")页的数据,请稍后......."); 
    } 
});

cypager分页插件也有一些API参数:

参数描述默认值
pgerId 插件的ID cy_pager
pg_size 每页显示记录数 10
pg_cur_count 当前页数 -
pg_total_count 总记录数 -
pg_nav_count 显示多少个导航数 7
pg_prev_name 上一页按钮名称 PREV
pg_next_name 下一页按钮名称 NEXT
pg_call_fun(page_count) 回调函数,点击按钮执行 -

差不多就介绍到这里了,实际应用我们可以看下具体案例:DEMO

总结

cypager jQuery分页插件是我目前觉得最轻便的一款了,所以拿出来分享下。如果您有更好的,请留言,谢谢。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/JQuery-Cypager.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

  • ajax爱好 ajax爱好  发布于 2016-10-25 09:03:36   回复该评论
  • 这个插件挺好用的,已试过。主要是比较简单,有点jQuery和ajax基础的,都可以玩。