美文网首页
二、分页查询的前台代码

二、分页查询的前台代码

作者: lifeline张 | 来源:发表于2018-07-15 15:06 被阅读0次

思路:
1、我其实只有一个页面,每次点击上一页或者下一页的时候,我都是个超链接,超链接的url还是我本页的地址,但是在超链接之中传参数过来,这个参数就是当前的页码。

<a href="newsDetailList.jsp?pageIndex=1">首页</a>
                <a href="newsDetailList.jsp?pageIndex=<%=pageIndex-1 %>">上一页</a>
                <a href="newsDetailList.jsp?pageIndex=<%=pageIndex+1 %>">下一页</a>
                <a href="newsDetailList.jsp?pageIndex=<%=totalPage%>">最后一页</a>

2、在知道页面容量和总数据量的前提下,我只要有当前的页码,我就知道该显示哪些信息,我就能去数据库里面把相应的数据调出来。所以每次点击换页的时候其实就是重新定义这三个数据,而页面容量是写死的,总数据量可以每次都去数据库查询,当前页码是传过来的,我都可以拿得到。
3、在上一步的过程中,因为当前页码是传过来的,但是如果是第一次访问呢?没有传当前页码过来怎么办?所以需要加一个判断,如果传过来的当前页码为空,那就赋值为1,表示这次访问我显示的是首页。

<%
                      // 当前页码不能写死,不然根本没法跳转
                      String currentPage = request.getParameter("pageIndex");
                      // 分页查询并显示
                      if (currentPage == null || currentPage.equals("")){
                      // 代表用户首次访问页面
                          currentPage = "1";
                      }
                      int pageIndex = Integer.parseInt(currentPage);
                      // 获取新闻总数量
                      int totalCount = newsService.getTotalCount();
                      // 每页显示几条新闻,页面容量
                      int pageSize = 2;

4、在上述的基础上,还有一个bug,因为每次我点击换页的时候都是超链接,而超链接里面传出去的陀值是当前代码加一或者减一,因为我并对这个数值进行判断,所以如果这个数值小于1或者大于页面总数量的时候,是不会出错的。会出现下面这种情况:


image.png

为了避免这种情况,需要对页码进行控制:

 if (pageIndex < 1) {
       pageIndex = 1;
} else if (pageIndex > totalPage) {
        pageIndex = totalPage;
}

5、出现上述问题的原因在于明明都到了第一页了,依然还显示首页和上一页操作按钮,最后一页同理。所以这个地方可以改进一下。

<ul class="page-num-ul clearfix">
                <li>共<%=totalCount %>条记录&nbsp;&nbsp; <%=pageIndex %>/<%=totalPage %>页</li>
                <%
                    if (pageIndex >1) {
                 %>
                <a href="newsDetailList.jsp?pageIndex=1">首页</a>
                <a href="newsDetailList.jsp?pageIndex=<%=pageIndex-1 %>">上一页</a>
                <%} if (pageIndex < totalPage)  {%>
                <a href="newsDetailList.jsp?pageIndex=<%=pageIndex+1 %>">下一页</a>
                <a href="newsDetailList.jsp?pageIndex=<%=totalPage%>">最后一页</a>&nbsp;&nbsp;
                <%} %>
            </ul>

代码如下:

<%@page import="cn.kgc.util.PageSupport"%>
<%@page import="cn.kgc.pojo.News"%>
<%@page import="java.util.List"%>
<%@page import="cn.kgc.Service.implement.NewsServiceImpl"%>
<%@page import="cn.kgc.Service.NewsService"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%--动态包含无法使用,页面报错,newsService无法使用 <jsp:include page="../common/common.jsp" /> --%>
<%@include file="../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
<style type="text/css">
<!--

-->
</style>
<script>
    function addNews(){
        window.location="newsDetailCreateSimple.jsp";
    }
</script>
</head>

<body>

<!--主体-->
    <div class="main-content-right">
        <!--即时新闻-->
        <div class="main-text-box">
            <div class="main-text-box-tbg">
                <div class="main-text-box-bbg">
                    <form name ="searchForm" id="searchForm" action="/news/jsp/admin/newsDetailList.jsp" method="post">
                      <div>
                        新闻分类:
                            <select name="categoryId">
                                <option value="0">全部</option>
                                
                                    <option value='1' >国内</option>
                                
                                    <option value='2' >国际</option>
                                
                                    <option value='3' >娱乐</option>
                                
                                    <option value='4' >军事</option>
                                
                                    <option value='5' >财经</option>
                                
                                    <option value='6' >天气</option>
                                
                            </select>
                        新闻标题<input type="text" name="title" id="title" value=''/>
                            <button type="submit" class="page-btn">GO</button>
                            <button type="button" onclick="addNews();" class="page-btn">增加</button>
                            <input type="hidden" name="currentPageNo" value="1"/>
                            <input type="hidden" name="pageSize" value="10"/>
                            <input type="hidden" name="totalPageCount" value="2"/>
            </div>
            </form>
            <table cellpadding="1" cellspacing="1" class="admin-list">
                <thead >
                    <tr class="admin-list-head">
                        <th>新闻标题</th>
                        <th>作者</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <%
                      // 当前页码不能写死,不然根本没法跳转
                      String currentPage = request.getParameter("pageIndex");
                      // 分页查询并显示
                      if (currentPage == null || currentPage.equals("")){
                      // 代表用户首次访问页面
                          currentPage = "1";
                      } 
                      int pageIndex = Integer.parseInt(currentPage);
                      
                      // 获取新闻总数量
                      int totalCount = newsService.getTotalCount();
                      // 每页显示几条新闻,页面容量
                      int pageSize = 2;
                      
                     
                      // 获取总页数
                      PageSupport ps = new PageSupport();
                      ps.setCurrentPageNo(pageIndex);
                      ps.setPageSize(pageSize);
                      ps.setTotalCount(totalCount);
                      // 拿到总页数
                      int totalPage = ps.getTotalPageCount();
                      if (pageIndex < 1) {
                         pageIndex = 1;
                      } else if (pageIndex > totalPage) {
                         pageIndex = totalPage;
                      }
                        List<News> newsList = newsService.getPageNewsList(pageIndex, pageSize);
                        int i= 0;
                        for(News news:newsList){
                            i++;
                     %>
                    <tr <%if(i%2==0){ %>class="admin-list-td-h2"<%} %>>
                        <td><a href='newsDetailView.jsp?id=<%=news.getId()%>'><%=news.getTitle() %></a></td>
                        <td><%=news.getAuthor() %></td>
                        <td><%=news.getCreateDate() %></td>
                        <td><a href='adminNewsCreate.jsp?id=2'>修改</a>
                            <a href="javascript:if(confirm('确认是否删除此新闻?')) location='adminNewsDel.jsp?id=2'">删除</a>
                        </td>
                    </tr> 
                    <%} %>
                </tbody>
            </table>
           <div class="page-bar">
            <ul class="page-num-ul clearfix">
                <li>共<%=totalCount %>条记录&nbsp;&nbsp; <%=pageIndex %>/<%=totalPage %>页</li>
                <%
                    if (pageIndex >1) {
                 %>
                <a href="newsDetailList.jsp?pageIndex=1">首页</a>
                <a href="newsDetailList.jsp?pageIndex=<%=pageIndex-1 %>">上一页</a>
                <%} if (pageIndex < totalPage)  {%>
                <a href="newsDetailList.jsp?pageIndex=<%=pageIndex+1 %>">下一页</a>
                <a href="newsDetailList.jsp?pageIndex=<%=totalPage%>">最后一页</a>&nbsp;&nbsp;
                <%} %>
            </ul>
         <span class="page-go-form"><label>跳转至</label>
         <input type="text" name="inputPage" id="inputPage" class="page-key" />页
         <button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
        </span>
        </div> 
        </div>
       </div>
   </div>
   </div>
</body></html>

相关文章

网友评论

      本文标题:二、分页查询的前台代码

      本文链接:https://www.haomeiwen.com/subject/kryppftx.html