首页 > 代码库 > 工作笔记——前端分页数据回显
工作笔记——前端分页数据回显
//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(‘‘); }) }); })
工作笔记——前端分页数据回显
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。