改造后的Controller层：实现分页与数据获取-优快云博客

改造之前的controller层（详情看上一篇）

package com.csi.controller;

import com.alibaba.fastjson.JSON;
import com.csi.dao.StudentDao;
import com.csi.dao.impl.StudentDaoImpl;
import com.csi.domain.PageInfo;
import com.csi.domain.Student;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.SQLException;

@WebServlet("/ListController")
public class ListController extends HttpServlet {
    @Override
    /**
     * 分页
     */
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置编码格式
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        //设置返回结果是application/json格式
        resp.setContentType("application/json;charset=utf-8");
        PrintWriter out = resp.getWriter();
        String cno=req.getParameter("currentPage");
        int currentPage = 1;
        if (cno!=null){
            currentPage = Integer.valueOf(cno);
        }
        PageInfo<Student>pageInfo =new PageInfo<>();
        pageInfo.setCurrentPage(currentPage);
        pageInfo.setPerPage(2);
        StudentDao studentDao =new StudentDaoImpl();
        try {
           pageInfo =  studentDao.list(pageInfo);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        String jsonString = JSON.toJSONString(pageInfo);
        out.println(jsonString);

    }
}

index.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous">
    </script>
    <script type="text/javascript">$
    $(function () {
        fenye(1);
    });

    function fenye(currentPage) {
        // $.ajax({
        //     type: "get",
        //     url: "/ListController",
        //     success:function (msg) {
        //         var trTag="";
        //         $(msg.list).each(function (index,student){
        //        trTag+="<tr><td>"+student.id+"</td><td>"+student.name+"</td><td>"+student.telephone+"</td></tr>";
        //         });
        //         $("table").append(trTag);
        //     }
        //
        // });

        // alert("/ListController?currentPage=" + currentPage + "");
        $.get("/ListController?currentPage=" + currentPage, function (msg) {
            $("table").empty();
            var trTag = "";
            $(msg.list).each(function (index, student) {
                trTag += "<tr><td>" + student.id + "</td><td>" + student.name + "</td><td>" + student.telephone + "</td></tr>";
            })
            $("table").append(trTag);
            // alert(trTag);
            $("table").nextAll().remove();
            // alert("<a href='javascript:void(0);' onclick='fenye(" + msg.previewPage + ")' class='previewPage'>上一页</a>");
            var page="<a href='javascript:void(0);' onclick='fenye(" + msg.previewPage + ")' class='previewPage'>上一页</a>";
            for (let i = 1; i < msg.totalPage+1; i++) {
                //1 2 3 4 5
               page+= "<a href='javascript:void(0);' onclick='fenye("+i+")'>"+i+"</a>";
            }
            page+="<a href='javascript:void(0);' onclick='fenye("+msg.nextPage+")'>下一页</a>";
            $(".row").append(page);
        });

        // function fenye(currentPage){
        //     $.get("ListController?currentPage="+currentPage,function (msg) {
        //         $(msg.list).each(function (index,student) {
        //
        //         })
        //     })
        // }

    }
    </script>

</head>
<body>
<div class="container">
    <div class="row">
        <table>

        </table>
        <div id="demo">

        </div>


    </div>
</div>



</body>
</html>

student.json

{
  "currentPage": 1,
  "list": [
    {
      "id": 1,
      "name": "lisi",
      "telephone": "12"
    },
    {
      "id": 2,
      "name": "lis2",
      "telephone": "22"
    }
  ],
  "nextPage": 2,
  "perPage": 2,
  "previewPage": 1,
  "totalPage": 5,
  "totalRecords": 10
}