分享一款不错的jQuery分页插件：Cypager - Web前端

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

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

它可以传入总页数和每页显示条数，可设置显示多少位数字，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参数：

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

总结

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

标签：分页插件WebCypagerjQuery