前端分页
文章目录
- 前端分页
- 前言
- 一、后台的传入数据
- 二、前端页面准备步骤
- 1.准备一个div
- 2.在上方引入jquery.js文件
- 3.js代码
- 总结
前言
当后台通过写查询得到多条数据时，不在使用数据库分页，直接返回查询的全部数据，在前台直接通过前端js进行分页处理：
一、后台的传入数据
示例：
List list = forderService.selectList();
model.addAttribute(“list”, list);二、前端页面准备步骤
1.准备一个div
在这个div里面会放入一个table表格和一个小div(用来显示分页按钮，例如上一页，下一页，页码跳转等等)
代码如下（示例）：
<div class="well">
<table class="table">
<thead>
<tr>
<th>
订单编号
</th>
<th>
收货人
</th>
<th>
电话
</th>
<th>
备注
</th>
<th>
时间
</th>
<th>
金额
</th>
<th>
邮编
</th>
<th>
地址
</th>
<th>
状态
</th>
<th>
编辑
</th>
<th>
订单项
</th>
</tr>
</thead>
<tbody id="pageMain">
<c:forEach items="${list}" var="item">
<tr>
<td style="width:200px;">
${item.fid}
</td>
<td>
${item.name}
</td>
<td>
${item.phone}
</td>
<td>
${item.remark}
</td>
<td>
<fmt:formatDate value="${item.date}" pattern="yyyy-MM-dd"/>
</td>
<td>
${item.total}
</td>
<td>
${item.post}
</td>
<td>
${item.address}
</td>
<td>
<c:if test="${item.status=='0'}">
未付款
</c:if>
<c:if test="${item.status=='1'}">
已付款
</c:if>
<c:if test="${item.status=='-1'}">
无效
</c:if>
</td>
<td>
<a href="<%=basePath%>order/delete?fid=${item.fid}">删除</a>
</td>
<td>
<a href="<%=basePath%>sorder/listbyfid?fid=${item.fid}">查看订单项</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div id="pageBox">
<span class="btn btn-outline-secondary" id="prev">上一页</span>
<ul id="pageNav">
<a href="javascript:;" class="active">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
<a href="javascript:;">6</a>
<a href="javascript:;">7</a>
<a href="javascript:;">8</a>
</ul>
<span class="btn btn-outline-secondary" id="next">下一页</span>
<span id="curye"></span>
</div>
</div>2.在上方引入jquery.js文件
代码如下（示例）：
两种引入方式
第一种
<script src="<%=basePath%>jslib/jquery-1.7.2.min.js"
type="text/javascript"></script>第二种
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>3.js代码
<script type="text/javascript">
$(function() {
fenye2();
});
function fenye2() {
var tabPage;
tabPage({
pageMain: '#pageMain',
pageNav: '#pageNav',
pagePrev: '#prev',
pageNext: '#next',
curNum: 5,
/*每页显示的条数*/
activeClass: 'active',
/*高亮显示的class*/
ini: 0,
/*初始化显示的页面*/
curye:"#curye"
});
function tabPage(tabPage) {
var pageMain = $(tabPage.pageMain);
/*获取内容列表*/
var pageNav = $(tabPage.pageNav);
/*获取分页*/
var pagePrev = $(tabPage.pagePrev);
/*上一页*/
var pageNext = $(tabPage.pageNext);
/*下一页*/
var curye=$(tabPage.curye);
var curNum = tabPage.curNum;
/*每页显示数*/
var len = Math.ceil(pageMain.find("tr").length / curNum);
/*计算总页数*/
// console.log(len);
var pageList = '';
/*生成页码*/
var iNum = 0;
/*当前的索引值*/
for (var i = 0; i < len; i++) {
pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
}
pageNav.html(pageList);
curye.html("当前是第"+(iNum+1)+"页");
/*头一页加高亮显示*/
pageNav.find("a:first").addClass(tabPage.activeClass);
/*******标签页的点击事件*******/
pageNav.find("a").each(
function () {
$(this)
.click(
function () {
pageNav.find("a").removeClass(
tabPage.activeClass);
$(this).addClass(
tabPage.activeClass);
iNum = $(this).index();
curye.html("当前是第"+(iNum+1)+"页");
$(pageMain).find("tr").hide();
for (var i = ($(this).html() - 1)
* curNum; i < ($(this)
.html())
* curNum; i++) {
$(pageMain).find("tr").eq(i)
.show()
}
});
})
$(pageMain).find("tr").hide();
/************首页的显示*********/
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
/*下一页*/
pageNext.click(function () {
$(pageMain).find("tr").hide();
if (iNum == len - 1) {
alert('已经是最后一页');
for (var i = (len - 1) * curNum; i < len * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum++;
curye.html("当前是第"+(iNum+1)+"页");
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
// ini(iNum);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
});
/*上一页*/
pagePrev.click(function () {
$(pageMain).find("tr").hide();
if (iNum == 0) {
alert('当前是第一页');
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum--;
curye.html("当前是第"+(iNum+1)+"页");
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
})
}
}
</script>总结
完整的页面代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>订单列表</title>
<link rel="stylesheet" type="text/css"
href="<%=basePath%>jslib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>css/theme.css">
<link rel="stylesheet"
href="<%=basePath%>jslib/font-awesome/css/font-awesome.css">
<script src="<%=basePath%>jslib/jquery-1.7.2.min.js"
type="text/javascript"></script>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<%-- <link--%>
<%-- href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"--%>
<%-- rel="stylesheet">--%>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<%-- <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->--%>
<%-- <script--%>
<%-- src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
<script type="text/javascript">
$(function() {
fenye2();
});
function fenye2() {
var tabPage;
tabPage({
pageMain: '#pageMain',
pageNav: '#pageNav',
pagePrev: '#prev',
pageNext: '#next',
curNum: 5,
/*每页显示的条数*/
activeClass: 'active',
/*高亮显示的class*/
ini: 0,
/*初始化显示的页面*/
curye:"#curye"
});
function tabPage(tabPage) {
var pageMain = $(tabPage.pageMain);
/*获取内容列表*/
var pageNav = $(tabPage.pageNav);
/*获取分页*/
var pagePrev = $(tabPage.pagePrev);
/*上一页*/
var pageNext = $(tabPage.pageNext);
/*下一页*/
var curye=$(tabPage.curye);
var curNum = tabPage.curNum;
/*每页显示数*/
var len = Math.ceil(pageMain.find("tr").length / curNum);
/*计算总页数*/
// console.log(len);
var pageList = '';
/*生成页码*/
var iNum = 0;
/*当前的索引值*/
for (var i = 0; i < len; i++) {
pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
}
pageNav.html(pageList);
curye.html("当前是第"+(iNum+1)+"页");
/*头一页加高亮显示*/
pageNav.find("a:first").addClass(tabPage.activeClass);
/*******标签页的点击事件*******/
pageNav.find("a").each(
function () {
$(this)
.click(
function () {
pageNav.find("a").removeClass(
tabPage.activeClass);
$(this).addClass(
tabPage.activeClass);
iNum = $(this).index();
curye.html("当前是第"+(iNum+1)+"页");
$(pageMain).find("tr").hide();
for (var i = ($(this).html() - 1)
* curNum; i < ($(this)
.html())
* curNum; i++) {
$(pageMain).find("tr").eq(i)
.show()
}
});
})
$(pageMain).find("tr").hide();
/************首页的显示*********/
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
/*下一页*/
pageNext.click(function () {
$(pageMain).find("tr").hide();
if (iNum == len - 1) {
alert('已经是最后一页');
for (var i = (len - 1) * curNum; i < len * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum++;
curye.html("当前是第"+(iNum+1)+"页");
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
// ini(iNum);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
});
/*上一页*/
pagePrev.click(function () {
$(pageMain).find("tr").hide();
if (iNum == 0) {
alert('当前是第一页');
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum--;
curye.html("当前是第"+(iNum+1)+"页");
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
})
}
}
</script>
</head>
<body class="content1">
<div class="header">
<h1 class="page-title">
订单管理
</h1>
</div>
<ul class="breadcrumb">
<li>
<a href="<%=basePath%>/sys/welcome.jsp">Home</a>
<span class="divider">/</span>
</li>
<li class="active">
订单列表
</li>
</ul>
<div class="container-fluid">
<div class="row-fluid">
<div class="well">
<table class="table">
<thead>
<tr>
<th>
订单编号
</th>
<th>
收货人
</th>
<th>
电话
</th>
<th>
备注
</th>
<th>
时间
</th>
<th>
金额
</th>
<th>
邮编
</th>
<th>
地址
</th>
<th>
状态
</th>
<th>
编辑
</th>
<th>
订单项
</th>
</tr>
</thead>
<tbody id="pageMain">
<c:forEach items="${list}" var="item">
<tr>
<td style="width:200px;">
${item.fid}
</td>
<td>
${item.name}
</td>
<td>
${item.phone}
</td>
<td>
${item.remark}
</td>
<td>
<fmt:formatDate value="${item.date}" pattern="yyyy-MM-dd"/>
</td>
<td>
${item.total}
</td>
<td>
${item.post}
</td>
<td>
${item.address}
</td>
<td>
<c:if test="${item.status=='0'}">
未付款
</c:if>
<c:if test="${item.status=='1'}">
已付款
</c:if>
<c:if test="${item.status=='-1'}">
无效
</c:if>
</td>
<td>
<a href="<%=basePath%>order/delete?fid=${item.fid}">删除</a>
</td>
<td>
<a href="<%=basePath%>sorder/listbyfid?fid=${item.fid}">查看订单项</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div id="pageBox">
<span class="btn btn-outline-secondary" id="prev">上一页</span>
<ul id="pageNav">
<a href="javascript:;" class="active">1</a>
<a href="javascript:;">2</a>
<a href="javascript:;">3</a>
<a href="javascript:;">4</a>
<a href="javascript:;">5</a>
<a href="javascript:;">6</a>
<a href="javascript:;">7</a>
<a href="javascript:;">8</a>
</ul>
<span class="btn btn-outline-secondary" id="next">下一页</span>
<span id="curye"></span>
</div>
</div>
</div>
</div>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
