動手編寫插件-javascript分頁插件

原來公司用的報表分頁插件是C#編寫的服務器插件，須要先後臺交互，並且不支持ajax。

通過一段時間折騰，我編寫了一個輕便的jquery分頁插件，支持ajax。下面是插件代碼

/*
插件名稱：報表分頁
做者：Keven

調用方法：
    1.在html報表下面增長<div class="pageInfo"></div>
    2. javascript代碼 $(".pageInfo").PageInit();
    3.定義函數setResult，把json數據賦值到表格中
參數：
    url：數據請求地址
Ajax數據格式：
    json格式；須要返回分頁數據，格式："Page":{"TotalCount":"7","PageSize":"20"}
*/

; (function ($) {
    var PageNumber = 1;
    var PageSize = 1;
    var MaxPage = 1;
    var RequestUrl;

    //外部接口函數
    $.fn.extend({
        'PageInit': function (op) {
            if (op != undefined) {
                if (op.url != undefined) {
                    RequestUrl = op.url;
                }
                if (op.PageSize != undefined) {
                    PageSize = op.PageSize;
                }
            }
            if ($(this).html() == "") {
                var divLink = $('<div class="pageLink fl"></div>');
                with (divLink) {
                    append('<a href="#" class="PageFirst">首頁</a>');
                    append('<a href="#" class="PagePre">上一頁</a>');
                    append('<input type="number" class="PageNumber" value="1"/>');
                    append('<a href="#" class="PageNext">下一頁</a>');
                    append('<a href="#" class="PageLast">尾頁</a>');
                    append('<a href="#" class="PageGoto">跳轉</a>');
                    find('a').before('<span class="split-left">[</span>');
                    find('a').after('<span class="split-right">]</span>');
                }
                $(this).append(divLink);
                $(this).append('<div class="page" style="float:right;margin-right:5px;">第<label class="PageNumber red"<label/>頁<span class="split">|</span>共<label class="MaxPage red"<label/>頁<span class="split">|</span>共<label class="TotalCount red"></label>條記錄</div>');
            }
            InitEvent();
            Search(1);//首次加載時查詢
        }
    });
    $.extend({
        'GetPageNumber': function () {
            return PageNumber;
        },
        'SetPageNumber': function (pagenumber) {
            PageNumber = pagenumber;
            Search();
        }
    });

    //經過Ajax獲取後臺JSON數據
    function Search() {
        if (RequestUrl == undefined) {
            return;
        }
        var vData = 'pageNumber=' + PageNumber + "&" + $('#form1').serialize();
        if (PageSize > 1) {
            vData += "&PageSize=" + PageSize;
        }
        $.ajax({
            type: 'POST',
            dataType: "text",
            ContentType: "application/json; charset=utf-8",
            url: RequestUrl,
            data: vData,
            success: function (result, status, xhr) {
                result = eval("(" + result + ")");
                //頁碼信息
                $('input.PageNumber').val($.GetPageNumber());
                PageSize = result.Page.PageSize;
                TotalCount = result.Page.TotalCount;
                MaxPage = Math.ceil(TotalCount / PageSize);
                $('.TotalCount').text(TotalCount);
                $('.MaxPage').text(MaxPage);
                $('label.PageNumber').text(PageNumber);
                //表格信息
                setResult(result);
            },
            error: function (err, A, B) {
            }
        });
    };

    //初始化事件
    function InitEvent() {
        //點擊【首頁】
        $('.PageFirst').on('click', function () {
            PageNumber = 1;
            Search();
        });
        //點擊【上一頁】
        $('.PagePre').on('click', function () {
            if (PageNumber > 1) {
                PageNumber -= 1;
                Search();
            }
        });
        //點擊【下一頁】
        $('.PageNext').on('click', function () {
            if (PageNumber < MaxPage) {
                PageNumber += 1;
                Search();
            }
        });
        //點擊【末頁】
        $('.PageLast').on('click', function () {
            PageNumber = MaxPage;
            Search();
        });
        //點擊【跳轉】
        $('.PageGoto').on('click', function () {
            var p = $('input.PageNumber').val();
            if (!isNaN(p) && p!="") {
                PageNumber = parseInt(p);
                Search();
            }
        });
    };

})(jQuery);

View Code

 

首先須要在報表下面編寫一個div

<div class="pageInfo"></div>

用到的CSS：

.pageInfo {
    margin-top: 3px;
}

    .pageInfo .PageNumber {
        width: 80px;
        vertical-align: middle;
    }

.split-left {
    margin-left: 5px;
}

.split-right {
    margin-right: 5px;
}

.split {
    margin: 10px;
}

.pageInfo a {
    text-decoration: none;
    font-size: 12px;
    margin: 2px;
}
.hidden {
    display:none;
}
.fl {
    float:left;
    display:inline;
}
.fr {
    float:right;
    display:inline;
}

View Code

 

而後在js代碼中調用

$(function(){

            $(".pageInfo").PageInit({ url: '../BLL/GetReportData.ashx' });

});

上效果圖：