datagrid分页

最新推荐文章于 2024-08-23 16:26:38 发布

chuyuan9699

最新推荐文章于 2024-08-23 16:26:38 发布

阅读量124

点赞数

文章标签： javascript json ViewUI

原文链接：https://my.oschina.net/u/3601306/blog/1530171

版权

本文详细介绍了如何在前端和后端实现分页功能，包括使用JavaScript和Ajax进行数据请求和处理，展示了如何通过Easyui插件在前端展示分页，并在后端处理分页逻辑，确保数据的有效性和页面加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台分页： `<script type="text/javascript">

var page=1;
var rows=20;
$(function(){
	var dg = $('#id');
	var opts = dg.datagrid('options');
	var pager = dg.datagrid('getPager');
	pager.pagination({
		pageList : [ 20, 30, 50 ],//这里是每页显示的条数
		onSelectPage : function(pageNum, pageSize) {
			page = pageNum;
			rows = pageSize;
			getprodata(page,rows);
		}//这里获取底部分页栏的当前页和每页显示的条数
	}); 
	getprodata(page,rows);	
	
function getprodata(page,rows){
	$.ajax({
		type:"post",
		url:"",//对应的路径
		dataType:"json",
		data:{"page":page,"rows":rows},
		async:false,
		cache:false,
		success:function(msg){
			var bdzdata=eval(msg).rows;
			var total=eval(msg).total;
			dataOption = {
					total : total,
					rows : bdzdata
				}//后台将数据拼成total，和rows的jeson格式
			$("#tablebdz").datagrid("loadData",dataOption);
			
		}
		
	});
	
}

</script>`

前台分页：```

转载于:https://my.oschina.net/u/3601306/blog/1530171