表格分页实现
来源:互联网 发布:艾宾浩斯记忆软件 编辑:程序博客网 时间: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
阅读全文
1 0
- javascript实现表格分页
- 表格分页实现
- js实现表格分页
- ADF实现表格分页效果
- 手动实现表格分页功能
- Extjs4+struts2+hibernate3实现分页表格
- 利用jquery,java实现表格动态分页
- Android GridView 实现SQLite分页表格
- 使用Jquery实现表格动态分页
- 前端实现一个简单的表格分页
- pc端表格分页的简单实现
- 利用bootstarp-table实现ajax分页表格
- 表格分页
- 表格分页
- 表格分页
- 表格分页
- 用jscript处理repeater生成的表格, 实现分页打印
- 使用thead,tbody,tfoot来实现表格的分页打印
- JNI开发
- 二叉堆
- 常见异常
- iOS平台下闪退原因汇总(一):"Ran out of trampolines of type 0/1/2" 运行时间错误
- 思维的局限
- 表格分页实现
- 第六次上机实验
- 关键字explicit
- mysql的记录
- 数据结构四双向链表
- 关于实训周记
- android中通过GET方法接收数据并通过xml解析数据,POST方法向服务器提交数据
- HDOJ 1013
- codeforces 808A Lucky Year