js简单分页,只有上一页和下一页

/*制作分页
 *参数分别为,目标位置id,数据总数,当前页,每页显示条数,回调函数(即,点击分页按钮触发的方法)
 *其中class为pagebar_1和pagebar_2的区别是能上一页和下一页能否点击,以及颜色变化
*/
function getPageBar(targetId,total,currPage,rows,func){
	var totalPage=Math.ceil(total/rows);//总页数
	var prePageBar='';
	var nextPageBar='';
	if(currPage==1){
		prePageBar='<div class="pagebar_2"><</div>';
	}else{
		prePageBar='<div class="pagebar_1" οnclick="prePage('+func+','+currPage+','+rows+');"><</div>';
	}
	if(currPage==totalPage){
		nextPageBar='<div class="pagebar_2">></div>';
	}else{
		nextPageBar='<div class="pagebar_1" οnclick="nextPage('+func+','+currPage+','+rows+');">></div>';
	}
	
	$("#"+targetId).html(prePageBar+nextPageBar);
}

//上一页
function prePage(func,currPage,rows){
	func(currPage-1,rows);
}
//下一页
function nextPage(func,currPage,rows){
	func(currPage+1,rows);
}

//在ajax返回数据成功之后,调用方法getPageBar,比如:
function zxscwj(page,rows){
	$.ajax({
		type : 'get',
		url : '',
		data:{
			page:page,
			rows:rows
		},
		success : function(data) {
				//其他操作省略
				var total=data.result.total;
				getPageBar("pageBar_zxwj",total,page,rows,'zxscwj');
			
		}
	});
}
图片如图:
  • 2
    点赞
  • 5
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 像素格子 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值