javascript笔记——前端实现分页和查询

//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;
	  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 && 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);
	                 }
	                 //没有点击分页按钮时就以这种方式渲染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 = {goods_class:goodsClass,store_name:storeName,goods_brand:goodsBrand,goods_name:goodsName,currentPage:curPage};
		          clickedPage = true;
	          jQuery(this).addClass('active').siblings().removeClass('active');
		      renderData(data,clickedPage);
		      renderPages(curPage);
	  })

	  //查询
	  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(){
		    	var checkedContent = jQuery('#coupon-list tbody').find('tr input[type="checkbox"]:checked');
		    	var selectedVal = [];
		    	modalCouponGoods.closeModal(function(){
		    		jQuery.each(checkedContent,function(i,item){
		    			selectedVal.push(jQuery(item).parents('tr').attr('id'));
		    		})
		    		jQuery('#selectedVal').val(selectedVal.join(','));
		    	})
		    })
  })