検索

ホームページ  >  記事  >  ウェブフロントエンド  >  jspは上位ページと下位ページのページング機能を実現します

jspは上位ページと下位ページのページング機能を実現します

巴扎黑
巴扎黑オリジナル
2017-07-19 15:19:062254ブラウズ

少し前から最終試験とインターンシップ探しで忙しかったので、長い間ブログを書いていませんでした。

私はこの期間中に、ページめくりとリッチ テキスト エディター Ueditor に関する 2 つの知識ポイントを含む小さなプロジェクトに取り組みました。Ueditor についてはまだあまり深く遊んでいないので、深く遊んでからブログを書く予定です。 。

ページめくり機能を実装するには、pageIndex を設定し、ページが読み込まれるたびに pageIndex を通じてデータを読み込むだけです。

次に、pageIndex を次のページに渡すための非表示の入力ボックスを設定できます。

前のページをクリックすると、js メソッドを通じて pageIndex の値を変更し、フォームを送信します

これ以上苦労することなく、コードを見てください。コードは比較的明確です。

これはindex.jspのコードです。

index.jsp

<%@page import="Bean.DBBean"%><%@page import="Entity.Record"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!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>NoteBook of Eric Wu</title><link rel="stylesheet" href="css/basic.css?1.1.11"><link rel="stylesheet" href="css/index.css?1.1.11"></head><body><%int allRecord=0;//总的记录条数,不包含查询后的int totalRecord=0;//总的记录条数,包含查询后的int totalPage=1;//总的页面数，包含查询后的int pageIndex=1;//当前页面号，用于控制页面翻转，默认为1
    List<Record> records=null;
    DBBean db=new DBBean();
    allRecord=db.getRecordCount();
    totalRecord=db.getRecordCount();
    totalPage=(totalRecord-1)/10+1;if(request.getParameter("pageIndex")!=null){//不是第一次加载//要做下数据类型转换
        pageIndex=Integer.valueOf(request.getParameter("pageIndex"));if(request.getParameter("keyword")!=null){String keyword=request.getParameter("keyword");
            records=db.getRecords(pageIndex,keyword);//获取查询内容一页的事件记录集,共10条
            totalRecord=db.getRecordCount(keyword);
            totalPage=(totalRecord-1)/10+1;
        }else{
            records=db.getRecords(pageIndex);//获取一页的事件记录集,共10条
        }
    }else{//第一次加载
        records=db.getRecords(pageIndex);//获取一页的事件记录集,共10条
    }
    session.setAttribute("records", records);//便于后面使用%><div id="home"><div id="header"><div id="WebTitle"><div class="maintitle"><a href="index.jsp" target="_blank">NoteBook of Eric Wu</a></div><div class="subtitle">The palest ink is better than the best memory !</div></div><div id="navigator"><ul id="navList"><li><a href="index.jsp">首页</a></li><li><a href="add.jsp">新增</a></li><li><a href="change.jsp">修改</a></li>   <li><a href="delete.jsp">删除</a></li></ul><div id="Stats">记录-<%=allRecord %></div><!--end: Stats 状态--></div><!-- end: navigator 导航栏 --></div><!-- end: header 头部 --><div id="main">   <div id="content">   <form id="searchForm" name="searchForm" action="index.jsp"  method="get">   <input type="hidden" name="pageIndex" id="pageIndex"  value="1"><div id="search"><div class="center"></div><input type="text" class="search" id="keyword" name="keyword" placeholder="请输入要查询的记录"><img src="img/search.png" onclick="searchKeyword();" class="button"></div></form>   <table><tr><th width="10%">序号</th><th width="60%">标题</th><th width="30%">时间</th></tr><%int count=0;if(records!=null){for(Record r: records){
                            count++;%><tr><td class="center"><%= count %></td><td><a href="content.jsp?recordId=<%= r.getId() %>"  target="_blank"><%= r.getTitle() %></a></td><td class="center"><%= r.getTime() %></td></tr><%    
                        }
                    }%> <tr class="alt" ><td class="center" colspan="3">共<%= totalRecord %>条记录   共<%= totalPage %>页   每页10条   当前第<%= pageIndex %>页   <a href="javascript:void(0);" class="turnPage" onclick="turnTopPage()">上一页</a>   <a href="javascript:void(0);" class="turnPage" onclick="turnBottomPage()">下一页</a>   </td></tr>   </table></div><!-- end: content 内容 --></div><!-- end: main 主要部分 --><div id="footer">     
        Copyright &copy;2017 汕大-吴广林</div><!-- end: footer底部--></div><!-- end: home 自定义的最大容器 --></body><script type="text/javascript">var pageIndex=<%=pageIndex %>;var totalPage=<%=totalPage %>;
    console.log(pageIndex);//上一页function turnTopPage(){if(pageIndex==1){return;
        }else{
            document.getElementById("pageIndex").value=pageIndex-1;
            document.getElementById("searchForm").submit();
        }
    }//下一页function turnBottomPage(){if(pageIndex>=totalPage){    return;
           }else{
           document.getElementById("pageIndex").value=pageIndex+1;
           document.getElementById("searchForm").submit();
           }
    }function searchKeyword(){
        document.getElementById("pageIndex").value=1;
        document.getElementById("searchForm").submit();
    }</script></html>

レンダリング

ページをめくった後:pageIndex=1

ページをめくった後:pageIndex=2

以上がjspは上位ページと下位ページのページング機能を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Webフロントエンドの開発仕様概要次の記事：Webフロントエンドの開発仕様概要

関連記事

続きを見る