带有2个分页联动效果的实现

使用场景

pagetwo.jpg

使用的插件方法等

1.分页插件是用的团队在线文档中的Mricode.Pagination
2.简单的上一页下一页的分页，实现不麻烦自己写了。
3.这里的测试数据是用rap系统的模拟的mock数据。

实现过程

1.重构比较简单,不做说明，有问题可以参考demo页面。
2.先现通过Mricode.Pagination实现底部的分页，

//分页 在ajax回调里面初始化分页
    function bulidPager(data, PageIndex, PageSize) {
        var total = data.Total;
        if ($("#pager").pagination()) {
            $("#pager").pagination('destroy');
        };
        $("#pager").pagination({
            total: total,
            pageSize: PageSize,
            pageIndex: PageIndex - 1,
            showInfo: true,
            showJump: true,
            noInfoText: "抱歉搜索到0条记录,请重新搜索!",
            infoFormat: "{start}到{end}条, 共{total}条数据 "
        });
        $("#pager").on("pageClicked", function(event, data) {
            getTabList(data.pageIndex + 1, data.pageSize);
            //分页按钮点击事件
        }).on("jumpClicked", function(event, data) {
            //跳转按钮点击事件
            getTabList(data.pageIndex + 1, data.pageSize);
        });
    };

3.顶部的简单分页实现，我这里自己写了个简单的没做封装处理，代码就不上了。
就是要注意这里的分页都要是动态append到到页面。

 function getTabList(PageIndex, PageSize) {
        if (PageIndex && PageSize >= 0) {
            para3.para.PageIndex = PageIndex;
            para3.para.PageSize = PageSize;
        } else {
            return false;
        }
        Util.ajax({
            url: MockUrl + 'CaseShow_Case_List',
            data: JSON.stringify(para3),
            success: function(data) {
                var total = data.Total,
                    num = Math.ceil(total / PageSize);
                html.push(M.render(tem4, data.InfoList));
                $('#result-ul').empty().prepend(html.join(''));
                html = [];
                if (num === 0) {
                    PageIndex = 0;
                }
                Util.pager(total, num, PageIndex);
                bulidPager(data, PageIndex, PageSize);
                var $pre = $('.prev-btn', $smallPage),
                    $next = $('.next-btn', $smallPage);
                if (num === 1) {
                    $pre.addClass('disabled');
                    $next.addClass('disabled');
                } else if (PageIndex === 1) {
                    $pre.addClass('disabled');
                    $next.removeClass('disabled');
                    nextClick(PageIndex, PageSize);
                } else if (PageIndex === num) {
                    $pre.removeClass('disabled');
                    $next.addClass('disabled');
                    preClick(PageIndex, PageSize);
                } else {
                    $pre.removeClass('disabled');
                    $next.removeClass('disabled');
                    nextClick(PageIndex, PageSize);
                    preClick(PageIndex, PageSize);
                }
            }
        });
    };

4.这里的主要的实现原理都是每次点击分页按钮的时候，都会重新进入ajax及分页方法，把分页的参数传入，他就会重新生成分页。即实现了所谓的两个分页联动。

具体的效果可以试试demo