工作笔记——前端分页数据回显
//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(''); }) }); })
感谢您的阅读,如果文中有任何技术上的错误或不妥,烦请留言指出,我会尽快更正。