项目实战：分页功能实战

1、在index.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 = '' + fruit.fname + '';
            priceTD.innerText = fruit.price;
            fcountTD.innerText = fruit.fcount;
            operTD.innerHTML = "";
        }
    });
}

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 fruitList = fruitDao.getFruitList(pageNo, 5);

        //总记录条数
        Integer total = fruitDao.getRecordCount();

        //计算总页数
        //Integer pageSize = 5;//当前项目中，每页数据固定写死 5 条
        //Integer pageCount = (total + pageSize - 1) / pageSize;

        PageInfo pageInfo = new PageInfo<>(fruitList, pageNo, total);

        Result result = Result.OK(pageInfo);

        ResponseUtil.print(resp, result);
    }
}