分页插件

/**
 * @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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值