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

//Modal
function 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 = arguments[0],
		      status = arguments[1];
		  jQuery.ajax({
	             type:"post",
	             url:url,
	             data:data,
	             async:false,
	             success:function(data){
	            	 data = JSON.parse(data);
	                 pages = data[1].Pages;
	                 curPage = data[1].CurrentPage;
	                 console.log(data[1].Pages);
	                 if(data){
	                	 if(data[0].goods_info.length>0){
		                     var html = '';
		                     jQuery.each(data[0].goods_info,function(i,item){
		                           html += '<tr id="'+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>=4 && 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>=4 && 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 = {goods_class:goodsClass,store_name:storeName,goods_brand:goodsBrand,goods_name:goodsName,currentPage:curPage};		         		          
		          clickedPage = true;
		          console.log('点击翻页时已有的数据'+selectedVal)
	              jQuery(this).addClass('active').siblings().removeClass('active');

			      renderData(data,clickedPage);		      
			      renderPages(curPage);
	      //数据回显	      
              var tr = jQuery('.fshop_table.coupon-list tbody tr');
              jQuery.each(selectedVal,function(i,item){
             	 jQuery.each(tr,function(j,info){
             		 if(jQuery(info).attr('id')==item){
             			 jQuery(info).find('input[type="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 //相当于continue 如果需要用到break则使用 return false 退出当前的循环
		        	  }
		        	  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 = {goods_class:goodsClass,store_name:storeName,goods_brand:goodsBrand,goods_name:goodsName,currentPage:curPage};          
              renderData(data,clickedPage);
              renderPages(curPage);
      })
      
    //确认选择的商品
	  var modalCouponGoods = new Modal('#showCouponList');
		  jQuery('#selectGoodsOk').click(function(){		    	
		    	modalCouponGoods.closeModal(function(){		    					    		    		    				    		
		    		jQuery('#selectedVal').val(selectedVal.join(','));
		    	})
		    });
  
		  jQuery('.modal-head i[role="close-modal"]').click(function (){
			  modalCouponGoods.closeModal(function(){
				  jQuery('#selectedVal').val('');
			  })
          });
  })