二、分页查询的前台代码

思路:
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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354

推荐阅读更多精彩内容