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

  

上一篇:MySQL数据库双机热备份


下一篇:string.Split函数