前端开发 - 前端分页插件myPagination

由于国内关于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插件