jsp réalise la fonction de pagination des pages supérieures et inférieures

J'ai été occupé avec les examens finaux et la recherche de stages il y a quelque temps, donc je n'ai pas blogué depuis longtemps.

J'ai travaillé sur un petit projet pendant cette période, qui comprenait deux points de connaissances sur le tournage de pages et l'éditeur de texte enrichi Ueditor. Je n'ai pas encore joué très profondément à Ueditor et je prévois d'écrire un blog après avoir joué. avec cela profondément.

Pour implémenter la fonction de tournage de page, il vous suffit de définir un pageIndex, puis de charger des données via pageIndex à chaque fois que la page est chargée.

Ensuite, nous pouvons configurer une zone de saisie cachée pour transmettre le pageIndex à la page suivante.

Lorsque l'on clique sur la page précédente, changez la valeur de pageIndex via la méthode js, puis soumettez le formulaire

Sans plus tarder, regardez le code, le code est relativement clair. .

Voici le code de 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 réalise la fonction de pagination des pages supérieures et inférieures" >
</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>

Rendu

Après avoir tourné la page : pageIndex=1

Après avoir tourné la page : pageIndex=2

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!