首页 > 其他 > 详细

分页功能开发

时间:2020-01-08 21:04:39      阅读:86      评论:0      收藏:0      [点我收藏+]

在开发过程中一些数据的显示较多的时候,需要使用分页来进行多数据的显示处理。像后台管理中的数据管理。

 

分页开发的知识点:

  (1)数据库操作:

   获取数据表中总数据条数:select count(*) from 数据表;

   获取限制返回数据条数信息:select * from 数据表 limit ?,? ;

   注意:limit第一个参数:起始条数下标。第二个参数:需要查询的条数

 

  (2)需要的页面数据:

   当前页,总页数,总条数,每页条数,

 

  (3)逻辑计算:

   起始条数下标 = (当前页 - 1) * 每页条数

   总页数 = (总条数%每页条数) == 0 ? 总条数/每页条数 : 总条数/每页条数 + 1

 

  基本步骤:

  1、创建页面类 (Page)

public class Page {

    private int currentPage; //当前页
    private int totalPage;     //总页数
    private int totalNum;    //总条数
    private int pageCount = 3;  //每页条数 (就是每页显示的数据条数)
    
       //补全get、set方法   
}

 

  2、创建两个操作数据库数据的方法

  这里不作具体的代码操作了。一个是获取数据表中数据的总条数。一个是带参的限制返回条数。

public int getCount();//返回数据表中的总条数
public ResultSet getLimitBooks(int pagestart,int pagesize);//限制返回条数

//使用了JDBC直接操作数据库信息

 

  3、创建一个servlet,用来模拟请求操作

@WebServlet("/textPage")
public class textPage extends HttpServlet {
    
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
           
               //定义的操作数据库的类。
        connectMysql connectMysql = new connectMysql();
        
        //获取用户想要跳转的页数
        String page = request.getParameter("page");
        int currentPage = 0;
        
        if(page == null) { //判断一开始的时候
            currentPage = 1;
        }else {
            currentPage = Integer.parseInt(page);
        }
        

        //获取数据库的总条数
        int count = connectMysql.getCount();
        
        //分页bean
        Page pageBean = new Page();
        pageBean.setCurrentPage(currentPage);//设置当前页数
        pageBean.setTotalNum(count);//设置总条数
        
        //计算总页数
        int totalPage = (count % pageBean.getPageCount()) == 0 ? count/pageBean.getPageCount() : count/pageBean.getPageCount()+1;
        
        pageBean.setTotalPage(totalPage); //设置总页数
        
        //求起始条数     起始条数下标 = (当前页 - 1) * 每页条数
        int pagestart = (currentPage - 1) * pageBean.getPageCount();
        
        //显示条数获取信息        (接收的是“起始条数下标”、“需要展示的条数”)
        ResultSet books = connectMysql.getLimitBooks(pagestart, pageBean.getPageCount());
        
        
        request.setAttribute("books", books);
        request.setAttribute("pageBean", pageBean);        
        request.getRequestDispatcher("index.jsp").forward(request, response);
    }

} 

 

  4、第一种:jsp分页页面

  效果图:技术分享图片

技术分享图片
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ page import="java.sql.ResultSet"%>
<%@ page import="util.Page"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
</head>
<body>
    
    <!-- 获取前面servlet中的数据 -->
    <%
        ResultSet result = (ResultSet) request.getAttribute("books");
        Page pages = (Page)request.getAttribute("pageBean");
    %>

    <table align="center" border="1">
        <tr>
            <td>id</td>
            <td>名称</td>
            <td>介绍</td>
        </tr>

        <%while (result.next()) {%>
        <tr>
            <td><%=result.getInt("id")%></td>
            <td><%=result.getString("name")%></td>
            <td><%=result.getString("decride")%></td>
        </tr>
        
        <%}%>
    
    </table>
    
    <!-- 分页设置 -->
    <div style="text-align: center;margin-top: 10px;">
        <a href="/text/textPage?page=1">首页</a>
        <a href="/text/textPage?page=<%=pages.getCurrentPage() <= 1 ? pages.getCurrentPage() : pages.getCurrentPage()-1 %>">上一页</a>
        <a href="/text/textPage?page=<%=pages.getCurrentPage() >= pages.getTotalPage() ? pages.getTotalPage() : pages.getCurrentPage()+1 %>">下一页</a>
        <a href="/text/textPage?page=<%=pages.getTotalPage() %>">尾页</a>
        一共<%=pages.getTotalPage() %>页,当前<%=pages.getCurrentPage() %></div>

</body>
</html>
View Code

 

  5、第二种jsp分页页面

  效果图:技术分享图片

<div style="text-align: center;margin-top: 10px;">
    
        <a href="/text/textPage?page=<%=pages.getCurrentPage() <= 1 ? pages.getCurrentPage() : pages.getCurrentPage()-1 %>">上一页</a>
        <%
            for(int i = 1; i <= pages.getTotalPage(); i++){%>
                
                [<a href="/text/textPage?page=<%=i %>"><%=i %></a>]
            
        <% }%>
        <a href="/text/textPage?page=<%=pages.getCurrentPage() >= pages.getTotalPage() ? pages.getTotalPage() : pages.getCurrentPage()+1 %>">下一页</a>
    </div>

 

  6、第三种jsp分页页面

  效果图:技术分享图片

<div style="text-align: center;margin-top: 10px;">
        <select onchange="location.replace(‘/text/textPage?page=‘+this.value);">
            <%
            for(int i = 1; i <= pages.getTotalPage(); i++){
            if(pages.getCurrentPage() == i){
            %>
                <option value="<%=i %>" selected="selected"><%=i %></option>
            <% }else{%>
            
                <option value="<%=i %>"><%=i %></option>
            <%}}%>
        </select>
        一共<%=pages.getTotalPage() %>页,当前<%=pages.getCurrentPage() %></div>

 

  7、第四种jsp分页页面

  效果图:技术分享图片

<div style="text-align: center;margin-top: 10px;">
        
            <input type="text" id ="page" onchange="pagechange()"/>
            一共<%=pages.getTotalPage() %>页,当前<%=pages.getCurrentPage() %></div>
    
    <script type="text/javascript">
        function pagechange(){
            
            var page = document.getElementById("page");
            
            if(page.value > <%=pages.getTotalPage() %> || page.value < 1 ){
                alert("请输入正确的页数!");
            }else{
                window.location.href="/text/textPage?page="+page.value;
            }
        }
    </script>

 

 

  基本的一些分页的种类。具体的逻辑是这样。

分页功能开发

原文:https://www.cnblogs.com/huangcan1688/p/12162995.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!