/**
* @description :分页处理插件,此插件依赖于jquery,commonObj
*
*/
(function($) {
var constant = {
footDivStr : '<div class="pages">共 <span class="pages"></span> 页 <span class="totalSize"></span> 条,第 <input type="number" value="1" class="page"/> 页 <a href="javascript:void(0)"class="pages_btn">Go</a><a href="javascript:void(0)"class="pages_btn ">首页</a><a href="javascript:void(0)"class="pages_btn">上一页</a><a href="javascript:void(0)"class="pages_btn">下一页</a><a href="javascript:void(0)"class="pages_btn">末页</a></div>',
footDivStr1 : '<div class="pages">共 <span id="pageNo_se" class="pages"></span> 页 <span class="totalSize"></span> 条,第 <input type="number" class="page" value="1"> 页 <button class="pages_btn">Go</button> <button class="pages_btn">首页</button> <button class="pages_btn">上一页</button> <button class="pages_btn">下一页</button> <button class="pages_btn">末页</button></div>',
formatterTypeStr : "<input name='page_formatter_type' type='{0}' value='{1}'/>"
};
var pageCommonObj = {};
var isNum = function (str) {
var p = /^\d+$/;
return p.exec(str);
};
function l(msg){
console.log(msg);
};
function reFresh(pageParams,$table){
var queryParams = {};
queryParams.page = pageParams.page;
queryParams.rows = pageParams.rows;
if(pageParams.queryParams){
for(var k in pageParams.queryParams){
queryParams[k] = pageParams.queryParams[k];
}
}
var $tbody = $table.find("tbody");
var $theadThs = $table.find("thead th");
var $pageFoot = $table.next();
var $pages = $pageFoot.find(".pages");//里层的pages,非外边的
var $totalSize = $pageFoot.find(".totalSize");
var $page = $pageFoot.find(".page");
var $pageBtn = $pageFoot.find(".pages_btn");
var thLength = $theadThs.length;
myajax(pageParams.url,queryParams,function(resp){
if(resp.status == 0){
var data = resp.data;
var totalSize = data.totalSize;
if(pageParams.rows < totalSize){
$pageFoot.show();
}else{
$pageFoot.hide();
}
$pages.text(data.pages);
$totalSize.text(totalSize);
function getValidPage(page){
if(page == 0){
page = 1;
}else if(page > data.totalSize){
page = data.totalSize;
}
return page;
}
$page.val(data.page).unbind().keydown(function(event){
var $this = $(this);
if(event.keyCode == 13){ //绑定回车
var val = $this.val();
var numVal = 1;
if(isNum(val)){
numVal = parseInt(val,10);
}
$this.val(numVal);
$pageBtn.filter(":eq(0)").trigger("click");
}
});
$pageBtn.unbind().click(function(){
var index = $pageBtn.index($(this));
var page = 1;
switch (index) {
case 0:
page = parseInt($page.val(),10);
break;
case 1:
page = 1;
break;
case 2:
page = data.page-1;
break;
case 3:
page = data.page+1;
break;
case 4:
page = data.pages;
break;
}
pageParams.page = getValidPage(page);
reFresh(pageParams,$table);
});
$tbody.empty();
$theadThs.filter("[isHidden]").hide();
$theadThs.filter("[formatter_type]").empty().each(function(){
var $this = $(this);
var index = $this.index();
var formatterType = $this.attr("formatter_type");
$(commonObj.format(constant.formatterTypeStr,formatterType,-1)).click(function(){
var $thCheckedbox = $(this);
if(formatterType == "checkbox"){
$tbody.find("tr").each(function(){
$(this).find("td:eq("+index+") input[type='"+formatterType+"']").prop("checked",$thCheckedbox.prop("checked"));
});
}
}).appendTo($this);
});
$.each(data.results,function(i,e){
var trStr = "<tr>";
for(var m=0;m<thLength;m++){
trStr += "<td></td>";
}
trStr += "</tr>";
var $appendTr = $(trStr);
$tbody.append($appendTr);
$theadThs.each(function(){
var $this = $(this);
var index = $this.index();
var $td = $appendTr.find("td:eq("+index+")");
var isHidden = $this.attr("isHidden");
isHidden && $td.hide();
var fieldName = $this.attr("field_name");
var formatter = $this.attr("formatter");
var formatterType = $this.attr("formatter_type");
var htmlStr = e[fieldName];
if(formatter && pageParams[formatter]){
htmlStr = pageParams[formatter](e[fieldName],e,$td);
}else if(formatterType){
htmlStr = commonObj.format(constant.formatterTypeStr,formatterType,e.id);
}
$td.html(htmlStr);
});
pageParams.afterAddTr && pageParams.afterAddTr($appendTr,e);
});//end each
pageParams.callBackFunc && pageParams.callBackFunc(data);
}
});
};//end refresh
var outterObj = {
getPageParam : function($pageTable){
return $pageTable.data("pageParams");
}
};
$.extend($.fn, {
showPage : function(options) {
var $table = $(this);
var pageParams = !options?$table.data("pageParams"):{
page:1,
rows:10
};
$.extend(pageParams, options);
if($table.find("tbody").length == 0){
$table.append("<tbody></tbody>");
}
if($table.next().filter(".pages").length == 0){
var $footDiv = $(constant.footDivStr);
if(pageParams.footType == 1){
$footDiv = $(constant.footDivStr1)
}
$table.after($footDiv);
}
$table.data("pageParams",pageParams);
var $each = this.each(function(){
reFresh(pageParams,$table);
});
this.getPageParam = outterObj.getPageParam;
return $each;
}
});
})(jQuery);
分页插件
最新推荐文章于 2023-06-02 17:33:19 发布