Web手动分页之前端分页

最新推荐文章于 2025-01-20 12:09:21 发布

想飞的猩猩

最新推荐文章于 2025-01-20 12:09:21 发布

阅读量316

点赞数

分类专栏： JavaWeb java 前端基础文章标签： java 开发语言 jquery

本文链接：https://blog.youkuaiyun.com/f346867698/article/details/120978809

版权

java 同时被 3 个专栏收录

26 篇文章

订阅专栏

JavaWeb

4 篇文章

订阅专栏

前端基础

3 篇文章

订阅专栏

在html页面进行分类
1.实体类

import java.util.Date;

public class Employee {
    private  int id;
    private String name;
    private Date birthday;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Employee(int id, String name, Date birthday) {
        this.id = id;
        this.name = name;
        this.birthday = birthday;
    }

    public Employee(Date birthday) {
        this.birthday = birthday;
    }

    public Employee() {
    }

    @Override
    public String toString() {
        return "Employee{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", birthday='" + birthday + '\'' +
                '}';
    }
}

2.Servlet

import com.alibaba.fastjson.JSON;
import com.fasterxml.jackson.databind.ObjectMapper;

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.util.ArrayList;
import java.util.List;
import java.util.Map;

@WebServlet("/EmployeeListServlet")
public class EmployeeListServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	       response.setContentType("application/json;charset=utf-8");
           EmployeeService employeeService=new EmployeeService();
           List<Employee> employees = employeeService.getAll();

           ObjectMapper mapper=new ObjectMapper();
           String data = mapper.writeValueAsString(employees);

           System.out.println(data);
           response.getWriter().write(data);
               }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

3 Service层由于是前端分页，所以查询全部数据就可以了方法就一个

public  List<Employee> getAll(){
        Employeedao employeedao=new Employeedao();
        return employeedao.getAll();
    }

4.Dao层方法页很简单，查询全部就可以了，就一个方法

//查询满足条件的总记录数，前端分页用
    public List<Employee> getAll(){

        List<Employee> list=new ArrayList<Employee>();
        PreparedStatement pstmt=null;
        ResultSet result=null;
        JDBCUtils jdbc=new JDBCUtils();
        Connection conn=jdbc.connect();
        try {
            String sql="SELECT * from tbl_employee WHERE birthday>'1990-01-01' ";
            pstmt = conn.prepareStatement(sql);
            result = pstmt.executeQuery();
            while (result.next()){
                Employee employee = new Employee();
                employee.setId(result.getInt(1));
                employee.setName(result.getString(2));
                employee.setBirthday(result.getDate(3));
                list.add(employee);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            jdbc.close(conn, pstmt, result);
        }
        return list;

    }

.5.前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<table >

</table>
<input type="button" id="prePage" value="上一页" >
<input type="button" id="nextPage" value="下一页" >
当前:<span id="currentPage"> </span>页
共<span id="totalPage"> </span>页
共 <span id="total"></span>条记录

</body>
<script>
    var  currentPage=1; //默认当前页是第一页
    var totalPage,total
    function show(c,data) { //展示全部数据
        for(var i=(c-1)*10;i<c*10;i++){
            $("#t1").after("<tr><th>"+data[i].id+"</th><th>"+data[i].name+"</th><th>"+data[i].birthday+"</th></tr>")
        }
    }
    function hideButton(currenpage,totalpage){
        if(currenpage<=1){ //当前页是第一页，隐藏上一页按钮
            $("#prePage").hide()

        }else if(currenpage>=totalpage){ //当前页大于等于总页数，隐藏下一页按钮
            $("#nextPage").hide()
        }else{
            $("#prePage").show()
            $("#nextPage").show()
        }
    }
    $(function () { //页面一加载执行
        hideButton(currentPage,totalPage)
        $.ajax({
            url:"/EmployeeListServlet",
            type: "GET",
            datatype:"json",
            success: function (data){
                 totalPage=data.length%10==0?data.length/10:Math.ceil(data.length/10)  //总页数，这里默认了每页显示10条数据
                 total=data.length
                $("#currentPage").text(currentPage)
                $("#totalPage").text(totalPage)
                $("#total").text(total)
                $("table").after("<tr id='t1'><th>id：</th><th>姓名：</th><th>生日：</th></tr>")
                show(currentPage,data)
            }
        })

    });

    $("#prePage").click(function () {
        currentPage=currentPage-1  //当前页减一
        hideButton(currentPage,totalPage)
        if(currentPage<1){
            currentPage=1
        }
        $("#currentPage").text(currentPage)
        $("#totalPage").text(totalPage)
        $("#total").text(total)
        $.ajax({
            url:"/EmployeeListServlet",
            type: "POST",
            success: function (data) {
                $("tr").empty()
                $("table").after("<tr id='t1'><th>id：</th><th>姓名：</th><th>生日：</th></tr>")
                show(currentPage,data)
            }
        })
    })
    $("#nextPage").click(function () {
        currentPage=currentPage+1; //点击下一页 当前页加一
        hideButton(currentPage,totalPage)
        if(currentPage>totalPage){
            currentPage=totalPage
        }
        $("#currentPage").text(currentPage)
        $("#totalPage").text(totalPage)
        $("#total").text(total)
        $.ajax({
            url:"/EmployeeListServlet",
            type: "POST",
            success: function (data) {
                $("tr").empty()
                $("table").after("<tr id='t1'><th>id：</th><th>姓名：</th><th>生日：</th></tr>")
                show(currentPage,data)

            }
        })
    })
</script>
</html>