记录项目中用的laypage分页代码

Posted 2020-09-05 低级知识传播者

最终才觉得，好记性不如烂笔头，毕竟已经不是刚毕业时候的巅峰了，精力有所下降，很多时候记不住东西。

 

参考url：http://www.layui.com/laypage/

直接上代码了

<script src="/assets/js/laypage/laypage.js"></script>

进入页面时，默认加载第一页；定时器每隔60秒取新数据：

    $(document).ready(function () {
        initPaganation();
        setInterval(function() {
            initPaganation();
    }, 60000);
    });

定义全局变量，保存当前页码：

    var pageConf = {
        currentPage: 1,
        pageSize: 10
    };

    function initPaganation() {
        var filter = getQueryAccount();

        var tableForSubTraderSearchArrays = $("#tableForSubTraderSearch input");

        var filter_stockCode = tableForSubTraderSearchArrays.eq(0).val();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/*.do",
            data: {
                currentPage: pageConf.currentPage,
                pageSize: pageConf.pageSize,
                filter_subAccountNo: filter.checkedSubAccountId,
                filter_stockCode: filter_stockCode,
                isCalcSubTraders: filter.isCalcSubTraders
            },
            success: function (data) {
                hideLoading();
                if (data.state == 2) {
                    return;
                }

                var totalSize = data.size;
                var totalPage;
                if (totalSize % pageConf.pageSize == 0) {
                    totalPage = totalSize / pageConf.pageSize;
                } else {
                    totalPage = totalSize / pageConf.pageSize + 1;
                }
                laypage({
                    cont: $("#paganation"), //容器。值支持id名、原生dom对象，jquery对象,
                    pages: totalPage, //总页数
                    curr:pageConf.currentPage,//当跳转到其他页后，全局变量被修改，这边就能根据之前的页码保证刷新后依然还是之前的那一页；比如刷新前停在第二页，那么刷新后仍能保持在第二页
                    skip: true, //是否开启跳页
                    skin: ‘#AF0000‘,
                    groups: 5, //连续显示分页数
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
                            pageConf.currentPage = obj.curr;
//                            debugger
                            searchList(pageConf.currentPage, pageConf.pageSize);
                        }
                    }
                });
                responseHandle(data);
            }

        });
    }

    function searchList(currentPage, pageSize) {
//        showLoading();
        var filter = getQueryAccount();
        var arrays = $("#tableForSubTraderSearch input");

        var filter_stockCode = arrays.eq(0).val();
        var filter_deadlineStartTime = arrays.eq(1).val();
        var filter_deadlineEndTime = arrays.eq(2).val();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/*.do",//此处的请求路径和上面的是一样的
            data: {
                currentPage: currentPage,
                pageSize: pageSize,
                filter_subAccountNo: filter.checkedSubAccountId,
                filter_stockCode: filter_stockCode,
                isCalcSubTraders: filter.isCalcSubTraders
            },
            success: responseHandle
        });

    }

    function responseHandle(data) {
        if (data.state != 0) {
            $(".s-tab-table  tr:not(:first)").html("");
            return;
        }
　　　　//process data
    }