通用分页（Jquery版）

浏览数：32 / 时间：2015年06月09日

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>