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