zoukankan      html  css  js  c++  java
  • 前端开发

    由于国内关于myPagination插件的文档并不多,由于参照官方给的文档一直出现问题,
    所以自己摸索出了一种新的食用方法。

    定义全局变量和默认搜索条件

            var searchJson = {};
            //默认的搜索条件
            searchJson.voucherDate = " , ";
            searchJson.sortTag = "sortTime";
            searchJson.pageNumber = 1;
            searchJson.pageSize = 10;
    
            var pagin = new myPagination({
                id: 'pagination',
                curPage:1, //初始页码
                pageTotal: 5,     //总页数
                pageAmount: 10,     //每页多少条
                dataTotal: 50,      //总共多少条数据
                showPageTotalFlag:true, //是否显示数据统计
                showSkipInputFlag:true, //是否支持跳转
                getPage: function (page) {//获取当前页数
                    searchJson.pageNumber = page;
                    getTotalList(JSON.stringify(searchJson));
                }
            });
    

    ajax请求数据并渲染

            //ajax获取要显示的数据
            function getTotalList(json){
                $.ajax({
                    type: "POST",
                    contentType: 'application/json;charset=utf-8',
                    url: "url",
                    data: json,
                    success: function(data){
                        //关闭弹出框
                        $("#searchDiv").find("div.dropdown-menu").hide();
                        var msg = JSON.parse(data);
                        if (msg.message == "查询成功") {//将查询到的数据渲染到页面
                            var totalData = msg.code;
                            var suns = msg.data;
                            var $div = $("#voucherList").empty();
                            $.each(suns,function(index,item){...});//省略渲染数据的代码
                            pagin.pageTotal = Math.ceil(totalData/10);
                            pagin.dataTotal = totalData;
                            pagin.init();
                        }
                });
            }
    
    

    最重要的是最后一行代码:

    pagin.init();
    

    初始化,即让上面两行修改的总页数和总条数参数生效

    搜索按钮点击事件

                //弹出搜索框
                $(".dropdown-menu").click(function (e) {
                    var type = $(e.target).attr("id");
                    if(type === "inputZhaiYao"){
                        $("#InfoKemu").hide();
                        e.stopPropagation();
                    }
                    else if(type === "inputKemu"){
                        $("#InfoZhaiYao").hide();
                        e.stopPropagation();
                    }
                    else if(type === "searchBtn"){//搜索按钮
                        var time1 = $("#sele-month1").val();
                        var time2 = $("#sele-month2").val();
                        var sortTag = $("#frm").find("input[name='sort']:checked").val();
                        var pageNumber = $()
                        searchJson.voucherDate = time1+" , "+time2;
                        searchJson.sortTag = sortTag;
                        searchJson.pageNumber = 1;
                        searchJson.pageSize = 10;
                        $("#searchDiv").removeClass("open");
                        $("#searchDiv").find("div.dropdown-menu").hide();
                        $("#InfoZhaiYao").hide();
                        $("#InfoKemu").hide();
                        //渲染数据
                        getTotalList(JSON.stringify(jsonData));
                        e.stopPropagation();
                    }
                    else{
                        $("#InfoZhaiYao").hide();
                        $("#InfoKemu").hide();
                        e.stopPropagation();
                    }
    
                });
    

    参考文档:
    myPagination插件

  • 相关阅读:
    robotframework-ride1.7.3.1更新安装
    批量删除新浪微博
    Redis
    GET和POST两种基本请求方法的区别
    selenium2自动化测试实战--基于Python语言
    同步/异步/阻塞/非阻塞/BIO/NIO/AIO
    HTTP抓包实战
    LCT模板(BZOJ2631)
    树链剖分模板(BZOJ3083)
    凸包(BZOJ1069)
  • 原文地址:https://www.cnblogs.com/zhangnianlei/p/12239268.html
Copyright © 2011-2022 走看看