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

用到的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;

}