表格分页实现

来源:互联网 发布:艾宾浩斯记忆软件 编辑:程序博客网 时间:2024/06/05 18:25

1.后台controller层分页控制:

标有(设置)处需要更改为显示表格内容,标有(可设置) 可以根据需要设置;

//分页控制实现@RequestMapping(value="/queryByPage")private String queryByPage(WarnIndex warnindex,Model model,HttpServletRequest request){List<WarnIndex> list=wis.queryAll();//表内容(设置)List<WarnIndex> listTab=new ArrayList<WarnIndex>();int page=Integer.parseInt(request.getParameter("page")); //当前页号int row=Integer.parseInt(request.getParameter("row"));; //每页行数int end=5; //显示页码长度(可设置)int mid=(int) Math.floor(end/2); //中间位数,向下取整int length=list.size(); //总条数int sum=(int)Math.ceil(length/(row*1.0)); //总页数if(sum==0){//表格为空时设置page=0page=0;}//取行信息int k=page*row;if(k>length){for(int i=k-row;i<length;i++){listTab.add(list.get(i));}}else{for(int i=k-row;i<k&&k>0;i++){listTab.add(list.get(i));}}int p1=page-mid;int p2=page+mid;//取页信息if (end>sum) {p1=1;p2=sum;}else if (p1<=0) {p1=1;p2=end;}else if(p2>sum){p1=sum-end+1;p2=sum;}model.addAttribute("listTab",listTab);model.addAttribute("p1",p1);model.addAttribute("p2",p2);model.addAttribute("page",page);model.addAttribute("row",row);model.addAttribute("length",length);model.addAttribute("sum",sum);return "jkyj/warnIndexList";//返回页面(设置)}

2.前台jsp使用C标签实现分页:

c标签库需引入:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

css引入:

<link href="../css/bootstrap/bootstrap.css" type="text/css" rel="stylesheet" />

js引入:

<script src="../js/jquery-3.1.1.min.js"></script><script src="../js/bootstrap.min.js"></script>

jsp分页实现,标有(设置)处需要更改为显示表格内容;

<table id="tab" class="table table-striped">    <thead>        <tr>            <th>ID</th>            <th>监控字段名</th>            <th>监控档案名 </th>            <th>预警规则</th>            <th>备注</th>            <th>操作</th></tr>    </thead>    <tbody style="text-align:center">        <c:choose>            <c:when test="${length!=0}">                <c:forEach items="${listTab}" var="items" varStatus="status">                    <!-- 表格信息(设置) -->                    <tr>                        <td>${page*row-row+status.index+1}</td>                        <td>${items.warnindexItem}</td>                        <td>${items.warnindexSub}</td>                        <td>${items.warnindexRule}</td>                        <td>${items.remark}</td>                        <td>                            <a href="../warnindex/form?id=${items.warnindexId}">修改</a>                            <a href="../warnindex/delById?id=${items.warnindexId}">删除</a></td>                    </tr>                </c:forEach>            </c:when>        </c:choose>    </tbody></table><!-- 分页:页面底部显示--><div class="pagination pagination-centered pagination-small">    <span>${length}条 共${sum}页  </span>    <ul id="page">        <!-- 首页-->        <c:choose>            <c:when test="${length!=0&&page!=1}">                <li>                    <a href="/ssm/warnindex/queryByPage?page=1&row=${row}">首页</a></li>            </c:when>        </c:choose>        <!-- 上一页 -->        <c:choose>            <c:when test="${length!=0&&(page-1)>0}">                <li>                    <a href="/ssm/warnindex/queryByPage?page=${page-1}&row=${row}">上一页</a></li>            </c:when>        </c:choose>        <!-- 中间页 -->        <c:choose>            <c:when test="${length!=0}">                <c:forEach begin="${p1}" end="${p2}" var="i">                    <c:choose>                        <c:when test="${i==page}">                            <li class="active">                                <a href="/ssm/warnindex/queryByPage?page=${i}&row=${row}">${i}</a></li>                        </c:when>                        <c:otherwise>                            <li>                                <a href="/ssm/warnindex/queryByPage?page=${i}&row=${row}">${i}</a></li>                        </c:otherwise>                    </c:choose>                </c:forEach>            </c:when>        </c:choose>        <!-- 下一页 -->        <c:choose>            <c:when test="${length!=0&&(page+1)<=sum}">                <li>                    <a href="/ssm/warnindex/queryByPage?page=${page+1}&row=${row}">下一页</a></li>            </c:when>        </c:choose>        <!-- 下一页 -->        <c:choose>            <c:when test="${length!=0&&page!=sum}">                <li>                    <a href="/ssm/warnindex/queryByPage?page=${sum}&row=${row}">尾页</a></li>            </c:when>        </c:choose>    </ul>       <!-- 页数设置 -->    <select id="row" name="flag" style="width:55px;height: 26px;margin-bottom: 6px;">        <c:forEach begin="5" end="20" step="5" var="i">            <c:choose>                <c:when test="${row==i}">                    <option selected="selected" value="${i}">${i}</option></c:when>                <c:otherwise>                    <option value="${i}">${i}</option></c:otherwise>            </c:choose>        </c:forEach>    </select>    <span>条/页</span></div><!-- end分页 -->

js实现每页显示条数响应:

<script>$("#row").change(function() {location.href='/ssm/warnindex/queryByPage?page=1&row='+$("#row").val();});</script>

3.首次跳转路径设置:

url路径为controller层对应分页函数路径,初始页数page不需要更改,每页显示条数row可根据需要更改,初始值为10;
/ssm/warnindex/queryByPage?page=1&row=10


原创粉丝点击