项目实战：分页功能实战

创业
2025-08-14 21:57:02

1、在index.html添加点击事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style/index.css"> <script src="script/axios.min.js"></script> <script src="script/index.js"></script> <script src="script/common.js"></script> </head> <body> <div id="div0"> <div id="div_title"> <p>欢迎使用水果库存系统</p> <div style="float: right;border: 0px solid red;margin-right:8%;margin-bottom: 4px"> <a href="add.html" style="text-decoration: none">添加新库存</a> </div> </div> <div id="div_fruit_table"> <table id="fruit_tbl"> <tr> <th class="w25">名称</th> <th class="w25">单价</th> <th class="w25">库存</th> <th>操作</th> </tr>  </table> </div> <div id="div_pagination"> <input type="button" class="btn" onclick="page('first')" value="首页"/> <input type="button" class="btn" onclick="page('pre')" value="上一页"/> <input type="button" class="btn" onclick="page('next')" value="下一页"/> <input type="button" class="btn" onclick="page('last')" value="尾页"/> </div> </div> </body> </html> 2、编写html.js 2.2、common.js function $(key){ if(key){ if(key.startsWith("#")){ key = key.substring(1) return document.getElementById(key) }else{ let nodeList = document.getElementsByName(key) return Array.from(nodeList) } } } window.onload=function(){ loadData(); } let pageNo = 1; let pageCount = 0; function page(str) { if (str) { if (str == "first") { pageNo = 1; }else if (str == "pre") { pageNo = pageNo - 1; }else if (str == "next") { pageNo = pageNo + 1; }else if (str == "last") { pageNo = pageCount; } if (pageNo > pageCount) { pageNo=pageCount } if (pageNo <= 0) { pageNo=1 } } loadData(pageNo) } loadData=function(pageNo=1){//pageNo这个参数有默认值，如果没有传值，则使用默认值 1 axios({ method: 'get', url: '/index', params: { pageNo: pageNo } }).then(response => { debugger let fruitList = response.data.data.list pageNo = response.data.data.pageNo pageCount = response.data.data.pageCount // 此处使用的是axios，那么响应回来的数据自动就是json， // 不需要再进行parse(如果是原始的ajax操作，那么一定需要parse) // let fruitArr = JSON.parse(fruitList) let fruitArr = fruitList; let fruitTbl = $("#fruit_tbl") //向表格中添加行之前，先删除原来的行 let rows=fruitTbl.rows for (let i = rows.length - 1; i >= 1; i--) { fruitTbl.deleteRow(i); } for (let i = 0; i < fruitArr.length; i++) { let tr = fruitTbl.insertRow(); let fnameTD = tr.insertCell(); let priceTD = tr.insertCell(); let fcountTD = tr.insertCell(); let operTD = tr.insertCell(); let fruit = fruitArr[i]; //fnameTD.innerText = fruit.fname fnameTD.innerHTML = '<a href="edit.html?fid=' + fruit.fid + '">' + fruit.fname + '</a>'; priceTD.innerText = fruit.price; fcountTD.innerText = fruit.fcount; operTD.innerHTML = "<img class=\"delImg\" src=\"imgs/del.png\" onclick=\"delFruit(" + fruit.fid + ")\"/>"; } }); } delFruit = function (fid) { if (window.confirm('是否确认删除？')) { axios({ method: 'get', url: 'del', params:{ fid: fid, } }).then(response=>{ if (response.data.flag) { window.location.reload(); } }); } }; 3、编写IndexServlet package com.csdn.fruit.servlet; import com.csdn.fruit.dao.FruitDao; import com.csdn.fruit.dao.impl.FruitDaoImpl; import com.csdn.fruit.dto.PageInfo; import com.csdn.fruit.dto.Result; import com.csdn.fruit.pojo.Fruit; import com.csdn.fruit.util.ResponseUtil; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.List; @WebServlet("/index") public class IndexServlet extends HttpServlet { private FruitDao fruitDao = new FruitDaoImpl(); @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { Integer pageNo = 1; String pageNoStr = req.getParameter("pageNo"); if (pageNoStr != null && !"".equals(pageNoStr)) { pageNo = Integer.parseInt(pageNoStr); } List<Fruit> fruitList = fruitDao.getFruitList(pageNo, 5); //总记录条数 Integer total = fruitDao.getRecordCount(); //计算总页数 //Integer pageSize = 5;//当前项目中，每页数据固定写死 5 条 //Integer pageCount = (total + pageSize - 1) / pageSize; PageInfo<Fruit> pageInfo = new PageInfo<>(fruitList, pageNo, total); Result result = Result.OK(pageInfo); ResponseUtil.print(resp, result); } }

标签：

项目实战：分页功能实战由讯客互联创业栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“项目实战：分页功能实战”

上一篇
LLM系列|26：阿里千问Qwen模型解读、本地部署

下一篇
【JVM】双亲委派机制、打破双亲委派机制