zoukankan      html  css  js  c++  java
  • 记录项目中用的laypage分页代码

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

    参考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
    }
  • 相关阅读:
    Android开发:关于WebView
    PHP+JQUEY+AJAX实现分页
    Bootstrap入门(二)栅格
    BootStrap入门教程 (一)
    mac 终端命令
    没有功能需求设计文档?对不起,拒绝开发!
    React 入门教程
    Webpack+React+ES6开发模式入门指南
    webpack2.0+ vue2.0
    一个小时学会jQuery
  • 原文地址:https://www.cnblogs.com/grey-wolf/p/6593375.html
Copyright © 2011-2022 走看看