ajax+servlet+mysql表格分页

本文介绍了如何使用AJAX异步请求Servlet来实现MySQL数据库中的表格数据分页展示。当页面加载时,自动显示第一页数据,通过$(document).ready()触发。分页功能通过调整页码参数page,利用JQuery.ajax()与Servlet交互,Servlet根据页码执行分页查询(例如:`select * from user order by id asc limit ?, ?`)。同时,后台计算总数据数、当前页码和总页码,将结果返回并更新页面。" 81042191,7652532,Python数据分析实战:第五章神经网络预测销量,"['Python', '数据分析', '机器学习', 'Keras', '神经网络']

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

分页,就是利用ajax异步获取servlet中查询的数据,但是数据是分页返回的(即每次查询返回一页数据)。效果大概是这个模样:

每次打开网页都会自动显示第一页的数据,也就是当$(document).ready()。

因为是根据页码page显示数据,上一页下一页只是判断页码是否超过界限,然后page-1或page+1,所以我写了一个函数,下面是js代码:

function ajaxPage(num) {
	$.ajax({
		type: "post",
		url: "servlet/UserFindPagingServlet",
		data: {
			page: num,
			department: departmentValue,
			position: positionValue
		},
		dataType: "json",
		success: function(result) {
			$("#sumdata").html(result.sumdata);
			$("#nowpage").html(result.nowpage);
			$("#sumpage").html(result.sumpage);
			$("#mainTable").empty();
			$("#mainTable").append(
					"<tr><td>id</td><td>姓名</td><td>性别</td><td>手机</td><td>部门</td><td>职位</td><td></td></tr>"
			);
			$.each(result.list, function(i) {
				
				$("#mainTable").append(
						"<tr><td>"+result.list[i].id+"</td><td>"+result.list[i].username+"</td><td>"+result.list[i].sex+"</td>"
						+"<td>"+result.list[i].phone+"</td><td>"+result.list[i].department+"</td><td>"
						+result.list[i].position+"</td><td><input type=\"checkbox\" name=\"deleteId\" value="+result.list[i].id+"></td></tr>"
				);
			});
		}
	});
}

$(document).ready(function(){
	ajaxPage(1);

        $("#btn_firstpage").click(function() {
		ajaxPage(1);
	});
	
	$("#btn_previouspage").click(function() {
		if($("#nowpage").html() != 1) {
			ajaxPage((parseInt($("#nowpage").html()) - 1));
		}
	});
	
	$("#btn_nextpage").click(function() {
		var now_page = parseInt($("#nowpage").html());
		var sum_page = parseInt($("#sumpage").html());
		if(now_page < sum_page) {
			ajaxPage((now_page + 1));
		}
	});
	
	$("#btn_lastpage").click(function() {
		ajaxPage($("#sumpage").html());
	});
}

首先显示第一页的内容,发page=1通过JQuery.ajax()发送到servlet然后接收返回的result,当然也通过后台查找到的数据设置好总数据数、当前页码、总页码,然后把数据append。下面是servlet中的doPost()代码:

public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
		
		String department = request.getParameter("department");
		String position = request.getParameter("position");
		String page = request.getParameter("page");
		
		System.out.println("department: " + department + "  position : " + position);
		
		StaticMethod.find(department, position, page, out);
		
	}

department和position是用于分部门和职位查询用的。由于增删改之后都需要调用select重新查找数据,所以我单独写了一个StaticMethod类,下面是StaticMethod中的find()方法代码(只列出最简单的全查询):

public static void find(String department, String position, String page, PrintWriter out) {
			List<UserBean> list = UserPagingDAO.findAll(page);
			List<UserBean> listnum = UserPagingDAO.findAll();
			int sumdata = listnum.size();
			int nowpage = Integer.parseInt(page);
			int sumpage = sumdata / 10 + 1;
			
			
			/*JSONArray json = JSONArray.fromObject(list);
			JSONObject jsonobject = JSONObject.fromObject(json);*/
			JSONObject jsonobject=new JSONObject();
			jsonobject.put("sumdata", sumdata);
			jsonobject.put("nowpage", nowpage);
			jsonobject.put("sumpage", sumpage);
			jsonobject.put("list", list);
			out.print(jsonobject);
			out.flush();
			out.close();
}
最重要的关于数据库的分页查询了,我用的是mysql,sql语句如下:

select * from user order by id asc limit ? , ?;

第一个参数是从第几个开始,第二个参数是查询多少个数据。每次根据page更改就可以了。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值