好像还没分享过有关分页的文章,最近做了一个活动页面,统计用户中奖数据,需要用到分页,先前都是开发做的分页效果,效果很一般,代码也复杂。
这次活动想尝试新的分页,无意间发现一款不错的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参数:
参数 | 描述 | 默认值 |
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分页插件是我目前觉得最轻便的一款了,所以拿出来分享下。如果您有更好的,请留言,谢谢。
网友评论文明上网理性发言 已有1人参与
发表评论:
评论列表