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" onclick="prePage('+func+','+currPage+','+rows+');"><</div>';
	}
	if(currPage==totalPage){
		nextPageBar='<div class="pagebar_2">></div>';
	}else{
		nextPageBar='<div class="pagebar_1" onclick="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
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
动态分页可以使用 JavaScript 来实现,下面是一个简单的例子: HTML: ``` <div id="pagination"></div> ``` JavaScript: ``` var currentPage = 1; // 当前页码 var totalPage = 20; // 总页数 function generatePagination() { var pagination = document.getElementById("pagination"); var html = ""; // 上一页 if (currentPage > 1) { html += "<a href='javascript:void(0)' onclick='goToPage(" + (currentPage - 1) + ")'>上一页</a>"; } // 五页 var startPage = currentPage - 2; var endPage = currentPage + 2; if (startPage < 1) { endPage += 1 - startPage; startPage = 1; } if (endPage > totalPage) { startPage -= endPage - totalPage; endPage = totalPage; } for (var i = startPage; i <= endPage; i++) { if (i == currentPage) { html += "<span>" + i + "</span>"; } else { html += "<a href='javascript:void(0)' onclick='goToPage(" + i + ")'>" + i + "</a>"; } } // 下一页 if (currentPage < totalPage) { html += "<a href='javascript:void(0)' onclick='goToPage(" + (currentPage + 1) + ")'>下一页</a>"; } pagination.innerHTML = html; } function goToPage(page) { currentPage = page; generatePagination(); } generatePagination(); ``` 这个例子中,我们首先定义了当前页码 `currentPage` 和总页数 `totalPage`。然后,我们定义了一个 `generatePagination()` 函数,用来生成分页。在这个函数中,我们首先生成上一页按钮,如果当前页不是第一页的话。然后,我们计算出需要显示的五页的页码,用一个循环生成这些页码。最后,我们生成下一页按钮,如果当前页不是最后一页的话。当用户点击上一页、下一页或者某个页码时,我们会调用 `goToPage()` 函数,这个函数会更新当前页码,再重新生成分页
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值