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(',')); }) }) })
- 上一篇 »easyui-datagrid的分页功能
- 下一篇 »php分页查询