首页 > 代码库 > 工作笔记——前端分页数据回显

工作笔记——前端分页数据回显

//Modalfunction Modal(obj){    var that = this;        that.ref = "";        that.obj = obj;        that.init();}Modal.prototype = {    init:function(){        var that = this;            jQuery(‘.modal-head i[role="close-modal"],[role="btncancel"],[role="btnok"]‘).click(function (){                $(this).parents(‘.modal‘).removeClass(‘modal-in‘);                $(‘body‘).removeClass(‘modal-open‘);                console.log(new Date().getTime())            });            jQuery(‘[data-toggle="modal"]‘).click(function(e){                   e.preventDefault();                   that.ref = jQuery(this).attr(‘href‘);                   if(that.obj == that.ref ){                        that.showModal();                   }                              })    },    showModal:function(callback){        var that = this;           jQuery(that.obj).addClass(‘modal-in‘);           jQuery(‘body‘).addClass(‘modal-open‘);           if(callback!=="" && callback!==undefined && jQuery.isFunction(callback)){                callback();           }    },    closeModal:function(callback){        var that = this;           jQuery(that.obj).removeClass(‘modal-in‘);           jQuery(‘body‘).removeClass(‘modal-open‘);           if(callback!=="" && callback!==undefined && jQuery.isFunction(callback)){              callback();           }    }}jQuery(function(){		  var pages = null;	  var clickedPage = false;	  var curPage = null;	  var selectedVal = [];	  	  	  	  function renderData(){		  var url =contextPath+"/admin/query_goods.htm",		      data = http://www.mamicode.com/arguments[0],"post",	             url:url,	             data:data,	             async:false,	             success:function(data){	            	 data = http://www.mamicode.com/JSON.parse(data);"‘+item.id+‘">‘		                                     +‘<td align="center"><label class="s-checkbox"><input type="checkbox" class="custom-checkbox" /><span></span></label></td>‘		                                     +‘<td align="center">‘+item.id+‘</td>‘		                                     +‘<td align="center">‘+item.goods_name+‘</td>‘		                                     +‘<td align="center">‘+item.net_content+‘</td>‘		                                     +‘<td align="center">‘+item.store_price+‘</td>‘		                                     ‘</tr>‘;		                             		                     })		                     jQuery(‘.fshop_table.coupon-list tbody‘).html(html);		                     		                 }	                	 else if(data[0].goods_info.length==0){	                		 jQuery(‘.fshop_table.coupon-list tbody‘).html(‘‘);	                	 }	                 }	                 	                 	                 //没有点击分页按钮时就以这种方式渲染page	                 if(!status){		                 var pageContent = ‘‘;		                 for(var i=0;i<data[1].Pages;i++){		                	 if(data[1].CurrentPage==(i+1)){	                             pageContent +=‘<li class="s-page-bage active"><span >‘+data[1].CurrentPage+‘</span></li>‘;	                         }		                	 else{		                		 pageContent +=‘<li class="s-page-bage"><span >‘+(i+1)+‘</span></li>‘;		                	 }   	                	 		                 }		                 jQuery(‘.s-goodslist-pages ul‘).html(pageContent);		                 var width = parseInt(jQuery(‘.s-page-bage span‘).width())+15;	                         jQuery(‘.s-goodslist-pages ul‘).css(‘width‘,width*(data[1].Pages));	                 }   	             },	             error:function(e){	                 console.debug(‘加载商品数据出错:‘+e)	             }	         })	  }	  	  function renderPages(curPage){		   if((curPage-2)>0 && (curPage+2) < pages){              pageContent =‘<li class="s-page-bage"><span >‘+(curPage-2)+‘</span></li>‘                              +‘<li class="s-page-bage"><span >‘+(curPage-1)+‘</span></li>‘                              +‘<li class="s-page-bage active"><span >‘+(curPage)+‘</span></li>‘                              +‘<li class="s-page-bage"><span >‘+(curPage+1)+‘</span></li>‘                              +‘<li class="s-page-bage "><span >‘+(curPage+2)+‘</span></li>‘;              jQuery(‘.s-goodslist-pages ul‘).html(pageContent);          }          else if(curPage==(pages-2)){              pageContent =‘<li class="s-page-bage"><span >‘+(pages-4)+‘</span></li>‘                              +‘<li class="s-page-bage"><span >‘+(pages-3)+‘</span></li>‘                              +‘<li class="s-page-bage active"><span >‘+(pages-2)+‘</span></li>‘                              +‘<li class="s-page-bage"><span >‘+(pages-1)+‘</span></li>‘                              +‘<li class="s-page-bage"><span >‘+(pages)+‘</span></li>‘;              jQuery(‘.s-goodslist-pages ul‘).html(pageContent);          }          else if(curPage==(pages-1)){        	  pageContent =‘<li class="s-page-bage"><span >‘+(pages-4)+‘</span></li>‘				              +‘<li class="s-page-bage"><span >‘+(pages-3)+‘</span></li>‘				              +‘<li class="s-page-bage"><span >‘+(pages-2)+‘</span></li>‘				              +‘<li class="s-page-bage active"><span >‘+(pages-1)+‘</span></li>‘				              +‘<li class="s-page-bage"><span >‘+(pages)+‘</span></li>‘;				jQuery(‘.s-goodslist-pages ul‘).html(pageContent);          }          else if(curPage==2){        	  pageContent =‘<li class="s-page-bage"><span>‘+1+‘</span></li>‘				              +‘<li class="s-page-bage  active"><span >‘+2+‘</span></li>‘				              +‘<li class="s-page-bage"><span >‘+3+‘</span></li>‘				              +‘<li class="s-page-bage"><span >‘+4+‘</span></li>‘				              +‘<li class="s-page-bage"><span >‘+5+‘</span></li>‘;				jQuery(‘.s-goodslist-pages ul‘).html(pageContent);          }          	  }	  	  function loadData(){		  		  		  renderData();	  }	  	  loadData();	  	  //分页	  jQuery(‘.s-page-bage‘).live(‘click‘,function(){		      var curPage = parseInt(jQuery(this).find(‘span‘).text()),		      		      		          goodsClass = jQuery(‘#goods_class‘).val(),		          storeName = jQuery(‘#store_name‘).val(),		          goodsBrand = jQuery(‘#goods_brand‘).val(),		      		          goodsName = jQuery(‘#goods_name‘).val(),		          pageContent = null,		          data = http://www.mamicode.com/{goods_class:goodsClass,store_name:storeName,goods_brand:goodsBrand,goods_name:goodsName,currentPage:curPage};		         		          "checkbox"]‘).prop(‘checked‘,true);             		 }             	 })              })	  })	  	        jQuery(‘#coupon-list tbody tr‘).live(‘click‘,function(){    	     	 	      var checkedContent = jQuery(‘#coupon-list tbody‘).find(‘tr input[type="checkbox"]:checked‘); 	          if(checkedContent.length>0){	        	  //插入数据	        	  jQuery.each(checkedContent,function(i,item){		        	  var id = jQuery(item).parents(‘tr‘).attr(‘id‘);		        	  if(selectedVal.length>0 && selectedVal.join(‘,‘).indexOf(id)>-1){		        		  return true 		        	  }		        	  else{	        		  		        		  selectedVal.push(jQuery(item).parents(‘tr‘).attr(‘id‘));		        	  }	        	  		        	    	  		          });	          }	          if(!jQuery(this).find(‘input[type="checkbox"]‘).is(‘:checked‘)){	        	  //删除取消的选择        		  var id = jQuery(this).attr(‘id‘);        		  if(selectedVal.length>0 && selectedVal.join(‘,‘).indexOf(id)>-1){        			  var curIndex = jQuery.inArray(id,selectedVal);        			      selectedVal.splice(curIndex,1);	        	  }	        	  	          }	                })	  	  //查询	  jQuery(‘#s-search-goods-list‘).live(‘click‘,function(){          var goodsClass = jQuery(‘#goods_class‘).val(),              storeName = jQuery(‘#store_name‘).val(),              goodsBrand = jQuery(‘#goods_brand‘).val(),                            goodsName = jQuery(‘#goods_name‘).val(),                          data = http://www.mamicode.com/{goods_class:goodsClass,store_name:storeName,goods_brand:goodsBrand,goods_name:goodsName,currentPage:curPage};          "close-modal"]‘).click(function (){			  modalCouponGoods.closeModal(function(){				  jQuery(‘#selectedVal‘).val(‘‘);			  })          });  })

  

工作笔记——前端分页数据回显