动手编写插件-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);

 

首先需要在报表下面编写一个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;
}

 

然后在js代码中调用

$(function(){

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

});

上效果图：