精华内容
下载资源
问答
  • ant design pro默认分页显示修改

    万次阅读 2020-12-14 16:43:05
    做表格分页的时候,使用的是ant design pro ,分页器是封装好的,但是公司要求要与之前的公司产品看齐,他们用的比较老,因此需要重写分页器(我的项目要修改的不多,只需要修改分页前面的显示文字就行),以下列出...

    做表格分页的时候,使用的是ant design pro ,分页器是封装好的,但是公司要求要与之前的公司产品看齐,他们用的比较老,因此需要重写分页器(我的项目要修改的不多,只需要修改分页前面的显示文字就行),以下列出全部重写以及总数显示重写

    1、分页整体修改:

    itemRender(page, type, originalElement) {
                                    if (type === "page") {
                                      return <a href={`/galleries/${page}`}>{page}</a>;
                                    } else if (type === "prev") {
                                      return <a href={`/galleries/${this.currentPage - 1}`}>上一页</a>;
                                    } else if (type === "next") {
                                      return <a href={`/galleries/${this.currentPage + 1}`}>下一页</a>;
                                    }
                                  }
    

    2、总数显示重写

    2.1 ant design pro 默认是这样的:

    在这里插入图片描述
    2.2 但是公司之前的产品是这样的:

    在这里插入图片描述
    2.3 因此只需要修改前面的显示方式便可以了,重写代码:

    showTotal: total => { return <span><span className="pagination">{total}</span></span> },
    
    

    2.4 中间的显示样式:

    .pagination{
      color:rgb(24,144,244);
      font-weight: bold;
    }
    

    打完收工

    展开全文
  • JSP实现分页显示

    千次阅读 2019-05-16 23:29:07
    分页显示是针对数据库所进行的操作,分页技术主要有3种 1、使用游标定位,丢弃不属于页面的数据 这是最简单的分页显示实现技术,在每个页面查询得到所有的数据行,使用游标定位到结果集,读取现实数据,这种操作...

    分页显示是针对数据库所进行的操作,分页技术主要有3种

    • 1、使用游标定位,丢弃不属于页面的数据
      这是最简单的分页显示实现技术,在每个页面查询得到所有的数据行,使用游标定位到结果集,读取现实数据,这种操作浪费大量内存资源,适用于数据量较少的查询
    • 2、使用缓存结果集,一次查询所有数据
      将查询结果存在Httpsession或状态bean中,翻页的时候从缓存中取出一页显示,可以节省数据库连接资源,但用户有可能看到的是过期数据,并且如果数据量非常大时第一次遍历查询会需要很多时间
    • 3、使用数据库提供的定位集的SQL语句,返回特定行的数据
      在用户的分页查询请求中,将获取的查询请求的行范围作为参数,生成SQL语句,然后每一次请求获得数据库连接对象执行SQL语句,返回查询结果,最后释放所有的数据库访问资源

    分页显示的JavaBean实现

    1、SQL Sever数据库的分页查询语句
    从数据库表中的第m条记录开始取n条记录,利用top关键字进行查询,如果既有top又有order by,从排序好的结果中选择

    select * from (
    select top n*from(
    select top(m+n-1)*from 表名称 order by 主键 desc) t1) t2 order by 主键 asc
    

    2、Oracle数据库的分页语句
    可以使用rownum来限制结果集的大小和起始位置,从数据库表中的第m条记录开始查询n条记录

      select * from (
      select rownum r,t1.* from 表名称 t1 where rownum < m+n) t2
      where t2.r >= 10
    

    3、MySQL数据库的分页语句
    从数据库表中的第m条记录开始查询n条记录

    select * from 表名称 limit m-1,m
    

    以MySQL数据库为例,介绍一个通用的分页显示类,任何用到分页显示的页面都可以调用这个类,新建splitPage.java

    package jsp.test;
    
    
    import java.sql.*;
    import java.util.*;
    
    public class splitPage {
    
    //定义数据库连接对象和结果集对象
    private Connection con = null;
    private Statement stmt = null;
    private ResultSet rs = null;
    private ResultSetMetaData rsmd = null;
    //定义SQL查询语句
    private String sqlStr;
    //总记录数目
    private int rowCount = 0;
    //所分的逻辑页数
    private int pageCount = 0;
    //每页显示的记录数目
    private int pageSize = 0;
    //设置参考值
    public void setCon(Connection con){
    	this.con = con;
    	if(this.con == null){
    		System.out.println("failure to get a connection");
    	}
    	else{
    		System.out.println("success to get a connection");
    	}
    }
    //初始化,获取数据表中的信息
    public void initialize(String sqlStr,int pageSize,int ipage){
    	
    	int irows = pageSize*(ipage-1);
    	this.sqlStr = sqlStr;
    	this.pageSize = pageSize;
    	
    	try{
    		stmt = this.con.createStatement();
    		rs = stmt.executeQuery(this.sqlStr);
    		
    		if(rs != null){
    			
    			rs.last();
    			this.rowCount = rs.getRow();
    			rs.first();
    			this.pageCount = (this.rowCount - 1)/this.pageSize + 1;
    		}
    		this.sqlStr = sqlStr+"  limit  " + irows + ","+pageSize;
    		stmt = this.con.createStatement();
    		rs = stmt.executeQuery(this.sqlStr);
    		rsmd = rs.getMetaData();
    		
    	}
    	catch (SQLException e) {
    		
    		System.out.println(e.toString());
    		// TODO: handle exception
    	}
    		}
    //将显示结果存到Vector集合类中
    public Vector getPage(){
    	Vector vData = new Vector();
    	
    	try{
    		
    		if(rs != null){
    			
    			while(rs.next())
    			{
    				String[] sData = new String[6];
    				
    				for(int j=0;j<rsmd.getColumnCount();j++){
    					
    					sData[j] = rs.getString(j+1);
    				}
    				vData.addElement(sData);
    			}
    		}
    		rs.close();
    		stmt.close();
    		
    		
    	}
    	catch (SQLException e) {
    		
    		// TODO: handle exception
    		System.out.println(e.toString());
    	}
    	return vData;
    }
    //获得页面总数
    public int getPageCount(){
    	
    	return this.pageCount;
    }
    //获取表中记录总数
    public int getRowCount(){
    	
    	return this.rowCount;
    	
    }
    }
    

    然后新建word_list_javabean.jsp

    <%@ page language="java" contentType="text/html;charset=gbk"%>
    <%@ page import="java.sql.*" %>
    <%@ page import="java.io.*" %>
    <%@ page import="java.util.*" %>
    <%@ page import="jsp.test.*" %>
    <jsp:useBean id="pages" scope="page" class="jsp.test.splitPage"/>
    <%!
    	//每页显示的记录数
    	int pageSize = 3;
    	String sqlStr = "";
    	//当前页
    	int showPage = 1;
    	String userName = "root";
    	String userPassword="123456";
    	//数据库的url
    	String url="jdbc:mysql://localhost:3306/ch10?useUnicode=true&characterEncoding = gb2312";
    	//定义连接对象
    	Connection dbcon;
    	 %>
    	 <%
    	 try{
    	 //加载驱动程序
    	 Class.forName("com.mysql.jdbc.Driver");
    	 //获得数据库连接对象
    	 dbcon = DriverManager.getConnection(url,userName,userPassword);
    	 }
    	 catch(SQLException ex){
    	 
     	System.out.println(ex.toString());
     	}
     	catch(ClassNotFoundException ex){
     	
     	System.out.println(ex.toString());
     	}
     	//给page中参数con赋值
     	pages.setCon(dbcon);
     	sqlStr = "select * from words order by WordsId";
     	//查询数据表
     	String strPage = null;
     	//获取目的界面
     	strPage = request.getParameter("showPage");
     	if(strPage == null){
     	showPage = 1;
     	}
     	else{
     	
     		try{
     			showPage=Integer.parseInt(strPage);
     			}
     			catch(NumberFormatException e){
     			
     			showPage = 1;
     			}
     			if(showPage<1){
     			
     			showPage=1;
     	}
     	}
     	pages.initialize(sqlStr,pageSize,showPage);
     	//获取要显示的命令集
    	 	Vector vData = pages.getPage();
    	 	
    	  %>
    
    <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        
        <title>分页显示</title>
    	
      </head>
      
      <body bgcolor="#fff" text="#00000">
      <h1 align = center>留言本</h1>
      <div align = center>
      <table border="1" cellspacing="0" cellpadding="0" width="80%">
      		<tr>
      			<th width="20%">编号</th>
      			<th width="50%">留言标题</th>
      			<th width="30%">留言时间</th>
      		</tr>
      		
      		<%
      			for(int i = 0;i <vData.size();i++){
      				//显示数据
      				String[] sData=(String[])vData.get(i);
      			 %>  
        <tr>
        	<td><%=sData[0]%></td>
        	<td align=left><%=sData[1] %></td>
        	<td align=left>
        	<%
    			//显示留言时间,省去时间串中的“.”后面的字符
    			String str_WordsTime = sData[3];
    			if(str_WordsTime.indexOf(".")>-1)
    			{
    			str_WordsTime=str_WordsTime.substring(0,str_WordsTime.indexOf("."));
    			}
    			out.println(str_WordsTime);
    			
        	 %>
        	 </td>
        </tr>
        <%
        } %>
        	</table>
    	    	<form action="word_list_javabean.jsp" method="get" target="_self">
    	    	共<font color = red><%=pages.getRowCount()%></font>条&nbsp;
    	    	<%=pageSize%>条/页&nbsp;
    	    	第<font color = red><%=showPage%></font>页/共
    	    	<font color = red><%=pages.getPageCount()%></font>页&nbsp;
    	    	<a href="word_list_javabean.jsp?showPage=1"target="_self">[首页]</a>&nbsp;
    	    	<%
    	    		//判断“上一页”链接是否要显示
    	    		if(showPage>1){
    	    		
    	    	 %>
    	    			<a
    	    				href="word_list_javabean.jsp?showPage
    	    				=<%=showPage-1%>"target="_self">[上一页]
    	    			</a>&nbsp;
    	    				
    	    				<%
    	    				}else{ 
    	    				%>
    	    					[上一页]
    	    	
    	    	<%
        	} 
        	//判断下一页链接是否要显示
    			if(showPage<pages.getPageCount())
    			{    	
        	%>
        	
        	<a 
        		href="word_list_javabean.jsp?showPage=<%=showPage+1 %>"
        		 target="_self">[下一页]</a>
        		&nbsp;
        	
        	<%
        	}else{
        	 %>
        	 [下一页]&nbsp;
        	 <%
        	 } 
        	 %>
        	 <a href="word_list_javabean.jsp?showPage=<%=pages.getPageCount()%>"
        	 	target="_self">[尾页]</a>&nbsp;
        	 	
        	 	转到
        	 	<select name = "showPage">
        	 	<%
        	 		for(int x = 1;x <= pages.getPageCount();x++){
        	 		
        	 	 %>
        	 	 <option value="<%=x %>"<%if(showPage==x)
        	 	 		out.println("selected");%>>
        	 	 		<%=x %></option>
        	 	 		<%
        	 	 		}
        	 	 		 %>
        	 	 </select>
        	 	 页&nbsp;
        	 	 <input type="submit" name="go" value="提交"/>
        	 	 
        	</form>
        	<%
        	//关闭数据库连接
        	dbcon.close();
        	 %>
        	
        </div>
      </body>
    </html>
    

    word_list_javabean.jsp页面将SQL查询语句和每页要显示的信息数量传递给分类显示类中的方法,然后获得当前页面所要显示的数据的集合,最后将这些数据显示到页面上

    最后来看一下运行效果
    在这里插入图片描述

    展开全文
  • jquery分页显示

    千次阅读 2016-06-27 21:30:43
    我们在显示文章列表的时候,通常需要分页显示。 一种方式是通过SQL查询的limit进行分页,即只查询该页面的数据。 另外一种方式是查询出所有的数据,传递给前段,然后用jquery控制只显示我们想看到的分页。html代码...

    我们在显示文章列表的时候,通常需要分页显示。
    一种方式是通过SQL查询的limit进行分页,即只查询该页面的数据。
    另外一种方式是查询出所有的数据,传递给前段,然后用jquery控制只显示我们想看到的分页。

    html代码

    <div class="am-g">
        <div class="am-u-sm-12" id="listTag">
    
        </div>
    
    </div>

    js代码

    $(function(){
            showPage(1);
        });
        function showPage(page){
            $.ajax({
                type:"GET",
                url:"<{$urlParent}>/newsManageList?cid=all",
                dataType:"json",
                success:function(data){
                    var newsTotalNum = data.length;  //新闻记录的总条数
                    var pageNum = Math.ceil(newsTotalNum/<{$newsPageNum}>); //分页的总页数
                    var content = ' <form class="am-form" id="listContainer">' +
                            '<table class="am-table am-table-striped am-table-hover table-main" id="newsList">' +
                            '<thead>' +
                            '<tr>' +
                            '<th class="table-id">ID</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-author am-hide-sm-only">作者</th><th class="table-date am-hide-sm-only">修改日期</th><th class="table-set">操作</th> ' +
                            '</tr>' +
                            '</thead>' +
                            '<tbody>';
                   for(var i=((page-1)*<{$newsPageNum}>);i<(page*<{$newsPageNum}>)&&i<newsTotalNum;i++){
                       content += '<tr>' +
                               '<td>'+(i+1)+'</td>' +
                               '<td><a href="#">'+data[i].title+'</a></td>'+
                               '<td>'+data[i].name+'</td>' +
                               '<td class="am-hide-sm-only">'+data[i].author+'</td>' +
                               '<td class="am-hide-sm-only">'+data[i].time+'</td>' +
                               '<td>' +
                               '<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs">' +
                               '<a href="<{$urlParent}>/newsUpdate?id='+data[i].id+'>" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</a> ' +
                               '<a href="<{$urlParent}>/newsDel?id='+data[i].id+'>" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</a> ' +
                               '</div></div>' +
                               '</td>' +
                               '</tr>';
                   }
                    content += '</tbody></table>' +
                            '<div class="am-cf">' +
                            '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
                            '<div class="am-fr">' +
                            '<ul class="am-pagination" id="page">';
                    //判断前面是否还有页面
                    if(page == 1){
                        content += '<li class="am-disabled"><a href="#">«</a></li>';
                    }else{
                        content += '<li><a href="javascript:showPage('+(page-1)+')">«</a></li>';
                    }
                    for(var i=1;i<=pageNum;i++){
                        if(i == page){
                            content += '<li class="am-active"><a href="javascript:showPage('+i+')">'+i+'</a></li>';
                        }else{
                            content += '<li><a href="javascript:showPage('+i+')">'+i+'</a></li>';
                        }
                    }
                    //判断后面是否还有页面
                    if(page == pageNum){
                        content += '<li class="am-disabled"><a href="#">»</a></li>';
                    }else{
                        content += '<li><a href="javascript:showPage('+(page+1)+')">»</a></li>';
                    }
                    content += '</ul>' +
                               '</div>' +
                               '</div><hr>' +
                               '</form>';
                    $("#listTag").empty();
                    $("#listTag").append(content);
                }
            });
        }

    显示效果:
    这里写图片描述

    展开全文
  • JSP分页显示数据

    万次阅读 多人点赞 2017-01-20 16:35:09
    最近在做一个小程序,用到了JSP的分页。虽然只是最简单的分页,但是还是花了我不少时间。这看似简单的功能,实现起来还是稍微有点麻烦。实现分页功能,需要知道数据的总个数,每页应该有多少条数据,以及当前页码。...

    最近在做一个小程序,用到了JSP的分页。虽然只是最简单的分页,但是还是花了我不少时间。这看似简单的功能,实现起来还是稍微有点麻烦。实现分页功能,需要知道数据的总个数,每页应该有多少条数据,以及当前页码。假如总共有300条数据,每页20条,那么应该就有15页;假设有301条数据,每页20条,这时候就需要16页。因此,总页数可以这样计算:总页数=数据总数%每页条数==0?数据总数/每页条数:数据总数/每页条数+1。为了能显示当前页的数据,我们需要知道当前页码,然后根据当前页码计算应该显示哪些数据。因此,我们还需要一个参数来跟踪当前页码。

    知道了这些,就可以开始分页的实现了。

    简单分页

    首先来看看最简单的分页。我们先不考虑数据库如何分页,假设现在我们直接获取到了所有数据,只考虑如何将这些数据分页。

    后端代码

    首先我们需要一个实体类,其他方法已省略。

    public class User {
        private int id;
        private String name;
        private String password;
        private LocalDate birthday;
    }
    

    然后需要一个数据访问层的接口:

    public interface UserRepository {
        List<User> listAll();
    }
    

    然后我们来实现这个接口,作为我们的数据源。

    public class MemoryUserRepository implements UserRepository {
        public static final int COUNTS = 302;
    
        @Override
        public List<User> listAll() {
            List<User> users = new ArrayList<>();
            for (int i = 0; i < COUNTS; ++i) {
                User user = new User();
                user.setId(i + 1);
                user.setName("用户" + i + 1);
                user.setPassword("12345" + i);
                user.setBirthday(LocalDate.now());
                users.add(user);
            }
            return users;
        }
    }
    

    然后我们需要一个Servlet,来计算总页数等这些分页相关的变量,然后将分页信息传递给JSP。这个分页非常简单,实际上是利用了List接口的subList方法来切分数据,而这个方法需要接受子列的起始索引和结束索引组成的闭开区间,所以我们需要计算本页起始用户序号和本页末尾用户序号的下一个。如果数据有零头,不够一整页,那么我们就需要判断一下末尾序号是否超过了列表的大小。

    @WebServlet(name = "ListAllServlet", urlPatterns = {"/list"})
    public class ListAllServlet extends HttpServlet {
        private List<User> users;
        private UserRepository repository;
    
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String p = req.getParameter("page");
            int page;
            try {
                //当前页数
                page = Integer.valueOf(p);
            } catch (NumberFormatException e) {
                page = 1;
            }
            //用户总数
            int totalUsers = users.size();
            //每页用户数
            int usersPerPage = 20;
            //总页数
            int totalPages = totalUsers % usersPerPage == 0 ? totalUsers / usersPerPage : totalUsers / usersPerPage + 1;
            //本页起始用户序号
            int beginIndex = (page - 1) * usersPerPage;
            //本页末尾用户序号的下一个
            int endIndex = beginIndex + usersPerPage;
            if (endIndex > totalUsers)
                endIndex = totalUsers;
            req.setAttribute("totalUsers", totalUsers);
            req.setAttribute("usersPerPage", usersPerPage);
            req.setAttribute("totalPages", totalPages);
            req.setAttribute("beginIndex", beginIndex);
            req.setAttribute("endIndex", endIndex);
            req.setAttribute("page", page);
            req.setAttribute("users", users);
            req.getRequestDispatcher("list.jsp").forward(req, resp);
        }
    
        @Override
        public void init() throws ServletException {
            repository = new MemoryUserRepository();
            users = repository.listAll();
        }
    }
    

    上面这个Servlet中的list.jsp就是我们具体显示的页面了。下面我们要做的就是处理前端了。

    前端代码

    分页组件

    首先来看看前端如何分页。我在这里用的前端框架是Bootstrap,它也提供了一个分页组件pagination,只需要在页面中添加如下一段代码。

    <nav>
      <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
      </ul>
    </nav>
    

    当然,这段代码是静态的,我们要让它产生动态的行为,就需要放到JSP中进行处理。

    JSP代码

    下面是我的JSP代码。我用了JSTL来做JSP的扩展,因此在项目中还需要添加JSTL的包。为了简洁,我将一些不相关的代码写在了其它JSP中,然后包含进来。_header.jsp是引入Bootstrap的一些代码。_navbar.jsp_footer.jsp则是可选的导航条和页脚,没有也罢。

    然后是一堆<c:set>,设置了我们分页要使用的一些变量。currentPageUsers这个变量做了实际的分页工作。

    然后,我用了一个表格来显示当前页的数据。用到了JSTL的<c:forEach>标签。

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@page pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <title>简单分页</title>
        <%@include file="_header.jsp" %>
    </head>
    <body>
    <%@include file="_navbar.jsp" %>
    <div class="container">
    
        <c:set var="totalUsers" value="${requestScope.totalUsers}"/>
        <c:set var="usersPerPage" value="${requestScope.usersPerPage}"/>
        <c:set var="totalPages" value="${requestScope.totalPages}"/>
        <c:set var="beginIndex" value="${requestScope.beginIndex}"/>
        <c:set var="endIndex" value="${requestScope.endIndex}"/>
        <c:set var="page" value="${requestScope.page}"/>
        <c:set var="currentPageUsers" value="${requestScope.users.subList(beginIndex,endIndex)}"/>
        <p>用户总数:${totalUsers}</p>
        <p>每页用户数:${usersPerPage}</p>
        <p>总页数:${totalPages}</p>
        <p>当前页:${page}</p>
    
        <table class="table table-hover table-responsive table-striped table-bordered">
            <thead>
            <tr>
                <td>用户编号</td>
                <td>姓名</td>
                <td>密码</td>
                <td>生日</td>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="user" items="${currentPageUsers}">
                <tr>
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.password}</td>
                    <td>${user.birthday}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    
        <hr>
    
        <div class="text-center">
            <nav>
                <ul class="pagination">
                    <li><a href="<c:url value="/list?page=1"/>">首页</a></li>
                    <li><a href="<c:url value="/list?page=${page-1>1?page-1:1}"/>">&laquo;</a></li>
    
                    <c:forEach begin="1" end="${totalPages}" varStatus="loop">
                        <c:set var="active" value="${loop.index==page?'active':''}"/>
                        <li class="${active}"><a
                                href="<c:url value="/list?page=${loop.index}"/>">${loop.index}</a>
                        </li>
                    </c:forEach>
                    <li>
                        <a href="<c:url value="/list?page=${page+1<totalPages?page+1:totalPages}"/>">&raquo;</a>
                    </li>
                    <li><a href="<c:url value="/list?page=${totalPages}"/>">尾页</a></li>
                </ul>
            </nav>
        </div>
    
    
    </div>
    
    <%@include file="_footer.jsp" %>
    </body>
    </html>
    

    表格最后就是我们动态化的Bootstrap分页。首页、尾页、上一页、下一页都是固定的,不管有多少页都必须显示的。然后又用了一个<c:forEach>标签循环列出所有页。如果某页和当前页页码相同,还为这页添加了active类,让其高亮显示。这些分页链接最后需要跟一个page参数,表明要查看的是哪一页。

    最后的显示效果如下:

    显示效果

    数据库分页

    上面仅仅使用一个列表简单演示了最基本的分页。下面来看看数据库分页。大部分数据库都支持结果的分页。这里我用MySQL数据库,它支持如下的分页语句:SELECT * FROM 表名 LIMIT m, n,m是起始数据,n是偏移量。假如我们要前20条数据,就需要SELECT * FROM 表名 LIMIT 0, 20,如果我们需要第二页(21-40条),就需要SELECT * FROM 表名 LIMIT 20, 20

    建立数据库

    确定数据库分页方式之后,我们就可以实现数据库分页了。首先需要一个数据库表。我还定义了两个存储过程,一个存储过程用于添加初始数据,另一个存储过程用于获取用户总数。

    DROP DATABASE IF EXISTS page;
    CREATE DATABASE page;
    USE page;
    CREATE TABLE user (
      id       INT AUTO_INCREMENT PRIMARY KEY,
      name     VARCHAR(255) NOT NULL,
      password VARCHAR(255) NOT NULL,
      birthday DATETIME
    );
    DELIMITER //
    CREATE PROCEDURE init_user(IN count INT)
      BEGIN
        DECLARE i INT;
        SET i = 1;
        WHILE i <= count DO
          INSERT INTO user (name, password, birthday) VALUES (concat('用户', i), concat('123456', i), now());
          SET i = i + 1;
        END WHILE;
      END//
    DELIMITER ;
    CALL init_user(202);
    
    DELIMITER //
    CREATE PROCEDURE user_counts(OUT count INT)
      BEGIN
        SELECT count(id)
        INTO count
        FROM user;
      END//
    DELIMITER ;
    
    

    后端代码

    我们需要一个支持分页的接口:

    public interface PageableUserRepository extends UserRepository {
        List<User> listAllOf(int startIndex, int offset);
        int counts();
    }
    
    

    相应的需要一个数据访问层的实现。由于用到了存储过程,这里还使用了JDBC的CallableStatement来调用存储过程。

    public class DataBaseUserRepository implements PageableUserRepository {
        private Connection connection;
        private static final String url = "jdbc:mysql://localhost:3306/page";
        private static final String username = "root";
        private static final String password = "12345678";
    
        public DataBaseUserRepository() {
            try {
                Class.forName("com.mysql.jdbc.Driver");
                connection = DriverManager.getConnection(url, username, password);
            } catch (SQLException | ClassNotFoundException e) {
                throw new RuntimeException(e);
            }
        }
    
        @Override
        public List<User> listAll() {
            List<User> users = new ArrayList<>();
            try (PreparedStatement statement = connection.prepareStatement("SELECT id,name,password,birthday FROM user ")) {
                ResultSet rs = statement.executeQuery();
                while (rs.next()) {
                    User user = new User();
                    user.setId(rs.getInt(1));
                    user.setName(rs.getString(2));
                    user.setPassword(rs.getString(3));
                    user.setBirthday(rs.getObject(4, LocalDate.class));
                    users.add(user);
                }
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
            return users;
        }
    
        @Override
        public List<User> listAllOf(int startIndex, int offset) {
            List<User> users = new ArrayList<>();
            try (PreparedStatement statement = connection.prepareStatement("SELECT id,name,password,birthday FROM user LIMIT ?,?")) {
                statement.setInt(1, startIndex);
                statement.setInt(2, offset);
                ResultSet rs = statement.executeQuery();
                while (rs.next()) {
                    User user = new User();
                    user.setId(rs.getInt(1));
                    user.setName(rs.getString(2));
                    user.setPassword(rs.getString(3));
                    user.setBirthday(rs.getObject(4, LocalDate.class));
                    users.add(user);
                }
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
            return users;
        }
    
        @Override
        public int counts() {
            try (CallableStatement statement = connection.prepareCall("CALL user_counts(?)")) {
                statement.registerOutParameter(1, Types.INTEGER);
                statement.execute();
                return statement.getInt(1);
            } catch (SQLException e) {
                throw new RuntimeException(e);
            }
        }
    }
    

    最后我们需要一个Servlet,计算相应的变量并执行分页。和前面的例子相比,这里计算出分页范围之后,直接调用List<User> users = repository.listAllOf(beginIndex, usersPerPage),在取出数据的时候就进行了分页。所以效率等各方面都优于前面的一次性获取所有数据,然后在前端执行分页的方式。

    @WebServlet(name = "PageableListServlet", urlPatterns = {"/pageableList"})
    public class PageableListServlet extends HttpServlet {
        private PageableUserRepository repository;
    
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String p = req.getParameter("page");
            int page;
            try {
                //当前页数
                page = Integer.valueOf(p);
            } catch (NumberFormatException e) {
                page = 1;
            }
            //用户总数
            int totalUsers = repository.counts();
            //每页用户数
            int usersPerPage = 20;
            //总页数
            int totalPages = totalUsers % usersPerPage == 0 ? totalUsers / usersPerPage : totalUsers / usersPerPage + 1;
            //本页起始用户序号
            int beginIndex = (page - 1) * usersPerPage;
            List<User> users = repository.listAllOf(beginIndex, usersPerPage);
            req.setAttribute("totalPages", totalPages);
            req.setAttribute("page", page);
            req.setAttribute("users", users);
            req.getRequestDispatcher("pageableList.jsp").forward(req, resp);
        }
    
        @Override
        public void init() throws ServletException {
            repository = new DataBaseUserRepository();
        }
    }
    

    分页组件

    本来这篇文章老早以前就写完不管了,没想到有同学还关注了这个问题,并在评论区提问能不能封装一下。所以我们来分析一下分页组件应该是什么样的,首先总页数和每页有多少数据应该是预先提供的,然后就可以计算出有多少页,在给出一个当前页码,就可以得出当前页应该显示的数据了。

    辅助类

    把上面的逻辑综合一下,在稍加整理,就有了下面的简单的分页辅助类。这个类用到了lombok帮忙自动生成Getter和Setter,没用过的同学可以研究一下。这个辅助类的用法很简单,首先实例化一个对象,然后用setter设置总页数和每页用户数,然后剩余信息都可以通过Getter获得。

    @Data
    @NoArgsConstructor
    public class PaginationHelper {
      // 数据总数
      private int totalCount;
      // 每页数据数
      private int countPerPage;
    
      public int getPageCount() {
        return totalCount % countPerPage == 0 ? totalCount / countPerPage : totalCount / countPerPage + 1;
      }
    
      /**
       * 页数以1开始
       *
       * @param currentPage
       * @return
       */
      public int getCurrentPageStart(int currentPage) {
        if (currentPage < 1 || currentPage > getTotalCount()) {
          throw new RuntimeException("页数错误");
        }
        return (currentPage - 1) * countPerPage;
      }
    
      public int getCurrentPageEnd(int currentPage) {
        if (currentPage < 1 || currentPage > getTotalCount()) {
          throw new RuntimeException("页数错误");
        }
        // 三元运算符
        return getCurrentPageStart(currentPage) + countPerPage > totalCount ?
                totalCount : getCurrentPageStart(currentPage) + countPerPage;
      }
    }
    

    有了辅助类,Servlet代码就简单多了。这个Servlet功能和前面的差不多,只不过增加了一个修改每页用户数的功能。

    @WebServlet(name = "pageServlet", urlPatterns = {"/page"})
    public class PageServlet extends HttpServlet {
      private List<User> users;
      private UserRepository repository;
      private PaginationHelper pagination;
      private int countPerPage;
    
      @Override
      public void init() throws ServletException {
        repository = new MemoryUserRepository();
        users = repository.listAll();
        pagination = new PaginationHelper();
        countPerPage = 20;
      }
    
      @Override
      protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 当前页数
        int page;
        try {
          page = Integer.valueOf(req.getParameter("page"));
        } catch (NumberFormatException e) {
          page = 1;
        }
        try {
          if (req.getParameter("countPerPage") != null)
            countPerPage = Integer.valueOf(req.getParameter("countPerPage"));
        } catch (NumberFormatException e) {
          countPerPage = 20;
        }
        // 设置用户总数
        pagination.setTotalCount(users.size());
        // 设置每页用户数
        pagination.setCountPerPage(countPerPage);
    
        req.setAttribute("pagination", pagination);
        req.setAttribute("users", users.subList(pagination.getCurrentPageStart(page), pagination.getCurrentPageEnd(page)));
        req.setAttribute("page", page);
        req.getRequestDispatcher("page.jsp").forward(req, resp);
      }
    }
    
    

    前端代码

    两年以后,Bootstrap 4也出来了,另外一些类库也更新了,因此这里我也一并做了更新,前面的文章内容没啥变动, 但是代码已经改成Bootstrap 4的风格了,主要看代码就好。

    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@page pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <title>分页</title>
        <%@include file="_header.jsp" %>
    </head>
    <body>
    <%@include file="_navbar.jsp" %>
    <div class="container" role="main">
    
        <c:set var="users" value="${requestScope.users}"/>
        <c:set var="pagination" value="${requestScope.pagination}"/>
        <c:set var="page" value="${requestScope.page}"/>
        <c:set var="totalPages" value="${pagination.getPageCount()}"/>
        <div class="row justify-content-center">
            <div class="col-md-8">
                <form action="<c:url value="/page"/>" method="get">
                    <p>用户总数:${pagination.getTotalCount()},每页用户数:<input name="countPerPage" type="text"
                                                                       value="${pagination.getCountPerPage()}"/>(<input
                            type="submit" value="修改"/>),总页数:${pagination.getPageCount()},当前页:${page}</p>
                </form>
    
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-md-8 table-responsive">
                <table class="table table-hover table-striped table-bordered table-sm">
                    <thead>
                    <tr>
                        <td>用户编号</td>
                        <td>姓名</td>
                        <td>密码</td>
                        <td>生日</td>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach var="user" items="${users}">
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.name}</td>
                            <td>${user.password}</td>
                            <td>${user.birthday}</td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    
    
        <div class="row justify-content-center">
            <div>
                <nav>
                    <ul class="pagination">
                        <li class="page-item"><a class="page-link" href="<c:url value="/page?page=1"/>">首页</a></li>
                        <li class="page-item"><a class="page-link" href="<c:url value="/page?page=${page-1>1?page-1:1}"/>">&laquo;</a>
                        </li>
    
                        <c:forEach begin="1" end="${totalPages}" varStatus="loop">
                            <c:set var="active" value="${loop.index==page?'active':''}"/>
                            <li class="page-item ${active}">
                                <a class="page-link" href="<c:url value="/page?page=${loop.index}"/>">${loop.index}</a>
                            </li>
                        </c:forEach>
                        <li class="page-item">
                            <a class="page-link" href="<c:url value="/page?page=${page+1<totalPages?page+1:totalPages}"/>">&raquo;</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="<c:url value="/page?page=${totalPages}"/>">尾页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    
    </div>
    
    <%@include file="_footer.jsp" %>
    </body>
    </html>
    
    

    网页截图如下。输入不同的每页用户数,就可以看到不同数量的分页效果了。
    截图

    隐藏多余页数

    最后一个问题就是隐藏多余的页数了,数据量太多的话,底下几百页的页码没法看。当然这个问题没有什么具体的解决方案,因为仔细观察的话,你会发现基本上很多网站的分页都还不一样。而且这也是一个前端的问题,在JSP里面就能处理。

    我这里使用的方案是:显示首页和尾页,显示上一页和下一页,显示当前页,其余页使用省略号代替。具体逻辑如下:

    • 判断当前页和首页的距离,如果是0,则不显示首页;
    • 判断当前页和首页的距离,如果是1,则显示首页,不显示前一个省略号;
    • 判断当前页和首页的距离,如果大于2,则显示首页和前一个省略号;
    • 显示当前页;
    • 逻辑类似前一段,判断当前页和末页的距离,决定是否显示末页和后一个省略号。

    JSP代码如下,需要对上面5种情况都判断一下:

        <div class="row justify-content-center">
            <div>
                <nav>
                    <ul class="pagination">
                        <li class="page-item ${page==1?'disabled':''}"><a class="page-link"
                                                                          href="<c:url value="/page?page=${page-1>1?page-1:1}"/>">上一页</a>
                        </li>
                        <c:if test="${page!=1}">
                            <li class="page-item">
                                <a class="page-link" href="<c:url value="/page?page=1"/>">1</a>
                            </li>
                        </c:if>
                        <c:if test="${page>2}">
                            <li class="page-item disabled">
                                <a class="page-link">...</a>
                            </li>
                        </c:if>
                        <li class="page-item active">
                            <a class="page-link" href="<c:url value="/page?page=${page}"/>">${page}</a>
                        </li>
                        <c:if test="${totalPages-page>1}">
                            <li class="page-item disabled">
                                <a class="page-link">...</a>
                            </li>
                        </c:if>
                        <c:if test="${page!=totalPages}">
                            <li class="page-item">
                                <a class="page-link" href="<c:url value="/page?page=${totalPages}"/>">${totalPages}</a>
                            </li>
                        </c:if>
    
                        <li class="page-item ${page==totalPages?'disabled':''}">
                            <a class="page-link" href="<c:url value="/page?page=${page+1<totalPages?page+1:totalPages}"/>">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    

    下面是实际页面效果,大家可以自行调整每页显示数来查看分页效果,当然如果有需要的话也可以自己额外处理。

    分页效果

    以上就是JSP分页的简单例子。第一个例子显示了最基本的分页。第二个例子利用了数据库的分页功能,在取出数据的时候就对数据进行分页。第三个例子增加了每页显示数和隐藏多余分页的代码。前端框架用的是Bootstrap 4。

    代码我上传到了码云,有兴趣的同学们可以看看。项目有两个分支,主分支是用gradle整理的代码,推荐会用gradle的同学;webapp分支是普通的Java Web项目格式,可用Intellij IDEA打开,如果要用Eclipse的话可能需要在Eclipse中添加一个项目然后将几个部分代码复制进去。代码中由于使用了Lombok,所以还需要额外安装IDE插件,并修改设置支持Lombok。

    另外原来User类用的是java.util.Date,现在改为Java 8的java.time.LocalDate,如果没有Java 8的话需要修改成原来的样子,可以查看最前几次提交来修改。总的来说,还是Gradle通用性更好一点,推荐大家学习一下。

    展开全文
  • 今天刚刚学习了分页技术,但是我写的代码是死的,好多处用到分页的地方只能重复写,而且有一处我是先分页显示列表数据,上面有个查询框,点击查询后再分页显示查询后的数据,第一步已经写好了,但是因为我写的太烂,...
  • java list分页显示 假分页

    千次阅读 2016-11-04 13:55:12
    本代码片段为将获取到的list集合进行分页显示: //分页 int totalcount=mapList.size(); int pagecount=0; int m=totalcount%pagesize; if (m>0) { pagecount=totalcount/pagesize+1; } else { pagecount=...
  • 分页显示算法

    千次阅读 2016-07-26 16:36:16
    分页算法应该在以后的开发中会经常用到。这里记录一下:分页算法使用的底层实现是limit关键字。 public ArrayList<User> listUsers(int pagenow,int count) { int start=(pagenow-1)*count; String sql="select * ...
  • 使用后端分页显示

    千次阅读 2019-11-23 10:55:32
    碰到了这样一个需求,分页显示数据。之前没做过,于是就上网查。找到了三种方法: 纯js实现分页:优点:方便。缺点:实时性差,当后台数据变化时,不能实时更新。并且当数据量较大,会导致前端页面十分缓慢。 查询...
  • ListView分页显示

    千次阅读 2013-10-27 21:25:28
    当ListView要显示的数据过多时,为了更快的响应用户,这个时候ListView进行分页显示再合适不过了。  ListView分页显示数据的原理其实很简单,当用户滑到ListView最后一项时,通知异步线程进行加载下一页的数据,...
  • 关于数据分页显示

    千次阅读 2019-05-01 22:49:58
    一般来说我们进行分页显示数据时是利用上一页、下一页以及首页末页来进行请求接口然后进行局部刷新,这次分享的一个基础的功能接口实现,通过页面的点击上下按钮来进行数据的传递,或者是现在越来越多的前后端分离的...
  • JavaWeb前端分页显示方法

    万次阅读 2016-06-24 15:44:35
    在前端中我们总会遇到显示数据的问题,正常情况分页显示是必须的,这个时候我们不能仅仅在前端进行分页,在前端其实做起分页是很困难的,着就要求我们在后台拿数据的时候就要把分页数据准备好,在前端我们只需要将...
  • 用window.showModalDialog打开的窗口不能分页显示是怎么回事?
  • Django 实现分页显示

    千次阅读 2017-07-02 17:09:14
    从数据库取出数据,根据事先定义的每页显示的数量,进行分页计算,得到页数,构造html,返回给前端解析显示。 后端python操作代码 #操作数据库进行分页 page = common.try_int(page, 1) perpage = 5 #每页显示的...
  • 1.商品分类搜索分页显示,控制器里如下: 模板里如下: 2.商品分页显示所有,控制器里如下: 模板里如下: 到此就OK了;
  • AngularJS实现分页显示

    万次阅读 2015-03-22 05:20:54
    AngularJS的内建$location服务,以及利用$location服务的setter函数,实现前端分页显示的效果。
  • Winform分页控件之纯分页显示处理

    千次阅读 2018-08-15 16:39:50
    在之前介绍的Winform分页控件中,都以分页控件+显示表格控件作为一个整体性的控件,不可分开,这样做的目的是可以实现更多的操作,集成更多丰富的特性,减少我们开发的工作量,这种情况虽然适用于大多数的情
  • jqGrid分页显示用法

    千次阅读 2017-09-14 09:48:34
    /****************jqGrid分页显示用法****************/ //jsp页面 //加载列表 function loadUsertable(colName, colModel) { $("#data-source").jqGrid({ datatype: "json",  mtype:'post',
  • Flask分页显示数据

    万次阅读 2016-05-06 10:06:42
    在做网页的过程中,随着展示的数据增多,如果要在一页中显示全部内容,浏览速度会变...这一问题的解决方法是分页显示数据,进行片段式渲染。 在页面中渲染数据 app/main/views.py @main.route('/userManage_admin',
  • Java Web分页显示实现思路

    万次阅读 多人点赞 2018-07-18 21:47:11
    从数据库中将所有数据查询出来,分页显示在前端页面上,每页显示若干条数据,并实现"首页","上一页","下一页","尾页","跳转至指定页码","显示当前页码...
  • jsp实现分页显示记录

    千次阅读 热门讨论 2013-12-22 20:30:37
    这是随便在一个新闻的留言页面截的图,假如留言条数太多,那整个页面得排好长好长,这就直接给用户造成了麻烦、不舒服的感受,所以,解决这个问题,通常采用分页显示的方法。 要把页面显示方式设计成这样的方式,...
  • 商品的分页显示

    千次阅读 2018-05-25 20:00:11
    第一次进去得显示第一页 &lt;a href="...分页显示&lt;/a&gt; PageProductServlet: public void doGet(HttpServletRequest request, HttpServletResponse response) throw...
  • Java swing实现分页显示代码

    千次阅读 2017-07-10 22:22:09
    Java swing实现分页显示 效果如下:   代码:   package com.zp.test1; import java.util.ArrayList; import java.util.List; publ
  • Java如何做到分页显示

    千次阅读 2017-08-04 13:39:49
    分页查询
  • AspNetPager 分页显示

    千次阅读 2011-08-27 20:03:12
    论,添加评论是没问题的,但是查看评论稍微有点难度,在牛腩视频中的分页是假分页,他是把所有的评论都加载到 页面中,这样就给页面带来了很大的压力,并且查询上也是很大的工作量,所以我们就
  • List集合分页显示

    千次阅读 2018-08-21 15:48:21
    List集合分页显示 package com.mshc.util; import java.util.Arrays; import java.util.Collections; import java.util.List; /** * @author svs: * @version 创建时间:2016-12-16 下午02:28:23 * 类说明 ...
  • 同时也有逻辑分页方式,就是一次交互,后台把所有的所有页面数据一起发过来,前端自己分页显示。虽交互简单,但也不没了实时性,不提倡。 解决方法 物理分页,交互核心对象Page package xyz.cglzwz.bean; import ...
  • echarts图例分页显示

    千次阅读 2017-09-29 17:25:27
    最近在使用echarts插件做饼图的时候遇到了一些问题,就是在数据种类很多的时候,图例会撑破画面或是覆盖在饼图上显示,这样就会造成画面布局被打乱,体验是非常差的。 最后结合一系列资料查找总结出了一个简单明了的...
  • layui分页显示不出来

    千次阅读 2019-10-22 14:42:27
    显示分页: 原因: 后台传回来的数据没有count值 解决: 从数据库查出count 分页效果:
  • LayUI table分页显示问题

    千次阅读 2019-12-25 09:34:00
    LayUI table分页把后端数据全部显示,没有分页的问题 首先我的理解的是,我把全部数据传回前端LayUI table就会帮我分页,但结果不是这样。其实分页的工作还是在后端,当使用table通过URL请求数据时,同时还会携带...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 272,568
精华内容 109,027
关键字:

分页显示是什么