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

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

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

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

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

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

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

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

index.jsp

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><meta><title>NoteBook of Eric Wu</title><link><link> 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>
<div>
<div>
<div><a>NoteBook of Eric Wu</a></div>
<div>The palest ink is better than the best memory !</div>
</div>
<div>
<ul>
<li><a>首页</a></li>
<li><a>新增</a></li>
<li><a>修改</a></li>   <li><a>删除</a></li>
</ul>
<div>记录-</div>
<!--end: Stats 状态-->
</div>
<!-- end: navigator 导航栏 -->
</div>
<!-- end: header 头部 --><div>   <div>   <form>   <input><div>
<div></div>
<input><img  class="button lazy" src="/static/imghwm/default1.png" data-src="img/search.png" alt="jspは上位ページと下位ページのページング機能を実現します" >
</div>
</form>   <table>
<tr>
<th>序号</th>
<th>标题</th>
<th>时间</th>
</tr>
<tr>
<td></td>
<td><a>"  target="_blank"></a></td>
<td></td>
</tr> <tr><td>共条记录   共页   每页10条   当前第页   <a>上一页</a>   <a>下一页</a>   </td></tr>   </table>
</div>
<!-- end: content 内容 -->
</div>
<!-- end: main 主要部分 --><div>     
        Copyright ©2017 汕大-吴广林</div>
<!-- end: footer底部-->
</div><!-- end: home 自定义的最大容器 --><script>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>

レンダリング

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

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

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