首页 > 代码库 > 通用分页（Jquery版）
通用分页（Jquery版）
1、简单定义下样式
<style type="text/css"> .fanye { color: blue; margin-right: 15px; text-decoration: none; } .unUse { color: gray; } </style>
2、准备一个Div用来渲染分页按钮
<body> <h1 id="result"> 当前页码：[ 1 ]</h1> <div id="pager"> </div></body>
3、编写分页功能
(function ($) { $.fn.pager = function (options) { var defaults = { pageNum: 1, pageCount: 1 }; var opts = $.extend(true, defaults, options); //return this.each(function () { return $(this).empty().append(renderPager(parseInt(opts.pageNum), parseInt(opts.pageCount), opts.btnCallback)); //}); }; function renderPager(pageNum, pageCount, btnCallback) { var $pager = $(‘<div id="pageA"></div>‘); $pager.append(renderBtn(‘首页‘, pageNum, pageCount, btnCallback)).append(renderBtn(‘上一页‘, pageNum, pageCount, btnCallback)); $pager.append(renderBtn(‘下一页‘, pageNum, pageCount, btnCallback)).append(renderBtn(‘尾页‘, pageNum, pageCount, btnCallback)); //$pager.append(‘<span></span>‘); return $pager; } function renderBtn(btn, pageNum, pageCount, btnCallback) { var $Button = $(‘<a href="javascript:;" class="fanye">‘ + btn + ‘</a>‘); var currentPage = 1; switch (btn) { case "首页": currentPage = 1; break; case "上一页": currentPage = pageNum - 1; break; case "下一页": currentPage = pageNum + 1; break; case "尾页": currentPage = pageCount; break; } if (btn == "首页" || btn == "上一页") { pageNum <= 1 ? $Button.addClass("unUse") : $Button.click(function () { btnCallback(currentPage,pageCount); }); } else { pageNum >= pageCount ? $Button.addClass("unUse") : $Button.click(function () { btnCallback(currentPage, pageCount); }); } return $Button; }})(jQuery);
4、调用
<script type="text/javascript" language="javascript"> $(document).ready(function () { var currentPage = 1; var pageCount = 10; pageBtnCallBack(currentPage, pageCount); }); var pageBtnCallBack = function (currentPage, pageCount) { $("#pager").pager({ pageNum: currentPage, pageCount: pageCount, btnCallback: pageBtnCallBack }); $("#result").html("当前页码：[ " + currentPage + " ]"); }; </script>
通用分页（Jquery版）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。