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 >'
                                             +'<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(','));
                        })
                    })
  })