jstl+js+jsp 实现最简单的分页(附插件)
来源:互联网 发布:有淘宝账号怎么贷款 编辑:程序博客网 时间:2024/06/05 17:54
实现原理:页面一加载注入的list,是jsp页面通过jstl标签进行遍历在html元素中,我则通过控制html元素来使得被遍历的数组内容选择性的隐藏和显示,来实现分页。
插件下载地址
http://download.csdn.net/detail/xyl_ice/9826599
第一步:jsp页面中需要导入core jstl和function jstl 和下文提到的jq分页插件
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <link rel="stylesheet" type="text/css" href="/css/paging.css"> <script type="text/javascript" src="/js/jquery-1.11.2.js"></script> <script type="text/javascript" src="/js/query.js"></script> <script type="text/javascript" src="/js/paging.js"></script>
第二步:head中写如下方法
<script type="text/javascript"> function change(page) { <c:set var="totalPage" value="${fn:length(List)}" scope="session"/> <c:set var="perPage" value="2" scope="session"/> var begin =${perPage}*(page - 1); var end =${perPage}*(page - 1) + ${perPage}-1; for (var i = 0; i < (${totalPage}); i++) { if (i >= begin && i <= end) { document.getElementById(i).style.display = "block"; } else { document.getElementById(i).style.display = "none"; } } } </script>
第三步:找到想被分页的list集合,也就是下面想被分页的jstl中foreach遍历的集合,并且在foreach标签中使用varStatus定义一个变量 i 将html元素的id设置为 这个变量 i
(我所给的示例代码中使用的是dl 同理 div,table都可以,根据自己需求进行修改)
<c:if test="${!empty List}"> <c:forEach var="list" items="${List}" varStatus="i"> <dl id="${i.index}"> <!-- 省略中间遍历取值代码块--> </dl> </c:forEach></c:if>
第四步:设置工具条所展示的位置
<div id="pageTool" class="pages"></div>
第五步:导入工具条(说明:这里我下载了个jq的分页插件,因为自己写还需要写当页数过多变成。。。等问题,就没有自己写,直接使用的插件),是一段jq的方法
<script> $('#pageTool').Paging({ pagesize:${perPage}, count:${totalPage}, callback: function (page) { change(page); } });</script>
到这里 简单的用 js+jstl+jsp就实现分页功能了,谢谢先辈提供的jq分页插件
–声明,本人小白,如有不对,请及时提出,如有版权问题,及时告知,本人将删除此博文,谢谢大家观看。
0 0
- jstl+js+jsp 实现最简单的分页(附插件)
- 最简单的JSP分页实现!
- jsp+jstl实现分页
- 用JSTL的实现简单分页
- 利用纯JSTL,做最简单的分页
- 一个完全用JSTL实现的JSP分页方案
- jsp简单分页实现
- 如何用JSTL和EL来实现简单的分页
- jsp+oracle 实现简单的分页
- jsp分页标签的简单实现
- jsp+servlet实现的简单分页
- jsp+oracle实现简单的分页
- [JS 最简单简洁的插件] 对话框
- struts2实现最简单的分页技术
- 【java】实现最简单的分页布局
- 自已实现的简单jQuery分页插件
- mybatis分页插件的简单实现
- JSP分页技术实现 (附代码)
- html中submit和button的区别(总结)
- C# 生成时间戳, 并再转换为北京时间
- 网页手机横屏竖屏下字体在大小不一样?
- The ARM Computer Vision and Machine Learning library
- Git 版本控制与工作流
- jstl+js+jsp 实现最简单的分页(附插件)
- ubuntu系统安装anaconda3或者miniconda3运行指令,提示sudo:conda: command not found解决办法
- 管理系统中的简单分区和文件系统
- 浏览器加载解析渲染
- 校验身份证号码
- 禁止cookie,session还能继续作用
- 字节,字符及占用内存大小情况
- 基于STM32的rosserial_client的节点开发
- 创建淘宝网店