客户需求：
当市场活动主页面加载完成之后,显示所有数据的第一页;
用户在市场活动主页面填写查询条件,点击"查询"按钮,显示所有符合条件的数据的第一页，保持每页显示条数不变
实现翻页功能.
*在市场活动主页面,显示市场活动列表和记录的总条数
*默认每页显示条数:10
开发该功能需要的知识点
1.函数：如果一段用来完成特定功能的代码到处出现，可以封装成函数。
函数的参数：在编写函数的过程中，如果有一个或者多个数据无法确定，可以把这些数据定义成函数的参数(形参)，将来由函数的调用者来传递参数的具体的值(实参)。
2.分页查询插件：bs_pagination
前端插件的使用步骤：
1,引入开发包：
2,创建容器:<div>
3,当容器加载完成之后，对容器调用工具函数:
3.演示分页查询市场活动的过程：
1,queryActivityByConditionForPage(1,10)
|->把pageNo,pageSize和查询条件一起发送到后台，查询数据
|->data
|->activityList：遍历list，显示列表
|->totalRows:调用工具函数，显示翻页信息
2,当用户切换页号或者每页显示条数时：pageNo,pageSize
|->翻页信息会自动变化
|->手动刷新列表：
|->把pageNo,pageSize和查询条件一起发送到后台，查询数据
|->data
|->activityList：遍历list，显示列表
|->totalRows:调用工具函数，显示翻页信息
功能开发介绍：
1.首先引入bootstarp框架中的bs_pagination 文件，
css文件：
<link href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
js文件：
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
localization文件：
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
localization文件对bs_pagination中的js文件，做了一些修改，把一些英文显示更改成为了中文显示
localization文件
/**
* bs_pagination simple localization - ENGLISH
*
* DO NOT CHANGE this file, as it will be overwritten in next update.
* To use different values, write and use a similar structure js file.
*
*/
var rsc_bs_pag = {
go_to_page_title: '跳转到',
rows_per_page_title: '每页显示',
current_page_label: '页',
current_page_abbr_label: 'p.',
total_pages_label: 'of',
total_pages_abbr_label: '/',
total_rows_label: 'of',
rows_info_records: '记录',
go_top_text: '首页',
go_prev_text: '上一页',
go_next_text: '下一页',
go_last_text: '尾页'
};2.设置容器div，把它放在table表的下方，在同一个div容器中，如果不放在同一个div容器中会导致两个div之间的间距过大，影响美观。
3.编写js代码调用bs_pagination函数
首先确定该js语句调用的位置，应该在ajax传输时的success函数中，该ajax又被封装在queryActivityByConditionForPage(pageNo,pageSize)方法中
当其他地方需要该方法时，直接调用queryActivityByConditionForPage(pageNo,pageSize)方法，
如下在入口函数中调用该方法
在$("#saveCreateActivityBtn").click按钮单击事件的success中调用该方法
详细Js代码
<script type="text/javascript">
$(function () {
//给“创建”按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给保存按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startTime").val();
var endDate=$("#create-endTime").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-describe").val());
//表单验证
if (owner==""){
alert("所有者不能为空!");
return;
}
if (name==""){
alert("名称不能为空!");
return;
}
if (startDate!="" && endDate!=""){
//使用字符串的大小代替日期大小
if (endDate<startDate){
alert("结束日期不能比开始日期小!");
return;
}
}
var regExp=/^(([1-9]\d*)|0)$/;
if (!regExp.test(cost)){
alert("成本只能是非负整数！");
return;
}
//发送请求
$.ajax({
url:"workbench/activity/saveCreateActivity.do",
type:'post',
data:{
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
dataType:'json',
success:function (data) {
if (data.code=="1"){
//关闭模态窗口
$("#createActivityModal").modal("hide");
//刷新市场活动列，显示第一页数据，保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
}else {
//提示信息
alert(data.message);
//模态窗口不关闭
$("#createActivityModal").modal("show");
}
}
});
});
//当容器加载完成之后，对容器调用工具函数
$(".mydate").datetimepicker({
language:'zh-CN',//语言
format:'yyyy-mm-dd',//日期的格式
minView:'month',//可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//选择完日期后自动关闭日历
todayBtn:true,//设置是否显示今天的按钮
clearBtn:true//设置是否显示清空按钮
});
//当市场活动主页面加载完成后，查询所有数据的第一页，以及所有数据的总条数,默认每页显示10条
queryActivityByConditionForPage(1,10);
//给查询按钮添加单击事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
});
});
function queryActivityByConditionForPage(pageNo,pageSize){
//收集参数
var name=$("#query-name").val();
var owner =$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
type: 'post',
data: {
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
dataType: 'json',
success:function (data) {
//显示总条数
// $("#totalRowsB").html(data.totalRows);
//显示市场活动的列表
//遍历activityList,拼接所有的行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="<tr class=\"active\">";
htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\" /></td>";
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
$("#tBody").html(htmlStr);
//计算总页数
var totalPages=1;
if (data.totalRows%pageSize==0){
totalPages=data.totalRows/pageSize;
}else {
totalPages=parseInt(data.totalRows/pageSize)+1;
}
//对容器调用bs_pagination工具函数，显示翻页信息
$("#demo_pag1").bs_pagination({
currentPage:pageNo,//当前页号，相当于pageNo
rowsPerPage:pageSize,//每页显示行数，相当于pageSize
totalRows:data.totalRows,//总条数
totalPages:totalPages,//总页数
visiblePageLinks:10,//最多可以显示的卡片数
onChangePage:function (event,pageObj) {
queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
}
});
}
});
}
</script>activity的index.jsp页面的详细代码
<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<base href="<%=basePath%>">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>
<script type="text/javascript">
$(function () {
//给“创建”按钮添加单击事件
$("#createActivityBtn").click(function () {
//初始化工作
$("#createActivityForm").get(0).reset();
//弹出创建市场活动的模态窗口
$("#createActivityModal").modal("show");
});
//给保存按钮添加单击事件
$("#saveCreateActivityBtn").click(function () {
//收集参数
var owner=$("#create-marketActivityOwner").val();
var name=$.trim($("#create-marketActivityName").val());
var startDate=$("#create-startTime").val();
var endDate=$("#create-endTime").val();
var cost=$.trim($("#create-cost").val());
var description=$.trim($("#create-describe").val());
//表单验证
if (owner==""){
alert("所有者不能为空!");
return;
}
if (name==""){
alert("名称不能为空!");
return;
}
if (startDate!="" && endDate!=""){
//使用字符串的大小代替日期大小
if (endDate<startDate){
alert("结束日期不能比开始日期小!");
return;
}
}
var regExp=/^(([1-9]\d*)|0)$/;
if (!regExp.test(cost)){
alert("成本只能是非负整数！");
return;
}
//发送请求
$.ajax({
url:"workbench/activity/saveCreateActivity.do",
type:'post',
data:{
owner:owner,
name:name,
startDate:startDate,
endDate:endDate,
cost:cost,
description:description
},
dataType:'json',
success:function (data) {
if (data.code=="1"){
//关闭模态窗口
$("#createActivityModal").modal("hide");
//刷新市场活动列，显示第一页数据，保持每页显示条数不变
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
}else {
//提示信息
alert(data.message);
//模态窗口不关闭
$("#createActivityModal").modal("show");
}
}
});
});
//当容器加载完成之后，对容器调用工具函数
$(".mydate").datetimepicker({
language:'zh-CN',//语言
format:'yyyy-mm-dd',//日期的格式
minView:'month',//可以选择的最小视图
initialDate:new Date(),//初始化显示的日期
autoclose:true,//选择完日期后自动关闭日历
todayBtn:true,//设置是否显示今天的按钮
clearBtn:true//设置是否显示清空按钮
});
//当市场活动主页面加载完成后，查询所有数据的第一页，以及所有数据的总条数,默认每页显示10条
queryActivityByConditionForPage(1,10);
//给查询按钮添加单击事件
$("#queryActivityBtn").click(function () {
//查询所有符合条件数据的第一页以及所有符合条件数据的总条数
queryActivityByConditionForPage(1,$("#demo_pag1").bs_pagination("getOption","rowsPerPage"));
});
});
function queryActivityByConditionForPage(pageNo,pageSize){
//收集参数
var name=$("#query-name").val();
var owner =$("#query-owner").val();
var startDate=$("#query-startDate").val();
var endDate=$("#query-endDate").val();
//发送请求
$.ajax({
url:'workbench/activity/queryActivityByConditionForPage.do',
type: 'post',
data: {
name:name,
owner:owner,
startDate:startDate,
endDate:endDate,
pageNo:pageNo,
pageSize:pageSize
},
dataType: 'json',
success:function (data) {
//显示总条数
// $("#totalRowsB").html(data.totalRows);
//显示市场活动的列表
//遍历activityList,拼接所有的行数据
var htmlStr="";
$.each(data.activityList,function (index,obj) {
htmlStr+="<tr class=\"active\">";
htmlStr+="<td><input type=\"checkbox\" value=\""+obj.id+"\" /></td>";
htmlStr+="<td><a style=\"text-decoration: none; cursor: pointer;\" onclick=\"window.location.href='detail.html';\">"+obj.name+"</a></td>";
htmlStr+="<td>"+obj.owner+"</td>";
htmlStr+="<td>"+obj.startDate+"</td>";
htmlStr+="<td>"+obj.endDate+"</td>";
htmlStr+="</tr>";
});
$("#tBody").html(htmlStr);
//计算总页数
var totalPages=1;
if (data.totalRows%pageSize==0){
totalPages=data.totalRows/pageSize;
}else {
totalPages=parseInt(data.totalRows/pageSize)+1;
}
//对容器调用bs_pagination工具函数，显示翻页信息
$("#demo_pag1").bs_pagination({
currentPage:pageNo,//当前页号，相当于pageNo
rowsPerPage:pageSize,//每页显示行数，相当于pageSize
totalRows:data.totalRows,//总条数
totalPages:totalPages,//总页数
visiblePageLinks:10,//最多可以显示的卡片数
onChangePage:function (event,pageObj) {
queryActivityByConditionForPage(pageObj.currentPage,pageObj.rowsPerPage);
}
});
}
});
}
</script>
</head>
<body>
<!-- 创建市场活动的模态窗口 -->
<div class="modal fade" id="createActivityModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
</div>
<div class="modal-body">
<form id="createActivityForm" class="form-horizontal" role="form">
<div class="form-group">
<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="create-marketActivityOwner">
<c:forEach items="${requestScope.userList}" var="user">
<option value=${user.id}>${user.name}</option>
</c:forEach>
</select>
</div>
<label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-marketActivityName">
</div>
</div>
<div class="form-group">
<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" id="create-startTime" readonly>
</div>
<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control mydate" id="create-endTime" readonly>
</div>
</div>
<div class="form-group">
<label for="create-cost" class="col-sm-2 control-label">成本</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="create-cost">
</div>
</div>
<div class="form-group">
<label for="create-describe" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="create-describe"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveCreateActivityBtn">保存</button>
</div>
</div>
</div>
</div>
<!-- 修改市场活动的模态窗口 -->
<div class="modal fade" id="editActivityModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<select class="form-control" id="edit-marketActivityOwner">
<c:forEach items="${requestScope.userList}" var="user">
<option value="user.id">${user.name}</option>
</c:forEach>
</select>
</div>
<label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-marketActivityName" value="发传单">
</div>
</div>
<div class="form-group">
<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-startTime" value="2020-10-10">
</div>
<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-endTime" value="2020-10-20">
</div>
</div>
<div class="form-group">
<label for="edit-cost" class="col-sm-2 control-label">成本</label>
<div class="col-sm-10" style="width: 300px;">
<input type="text" class="form-control" id="edit-cost" value="5,000">
</div>
</div>
<div class="form-group">
<label for="edit-describe" class="col-sm-2 control-label">描述</label>
<div class="col-sm-10" style="width: 81%;">
<textarea class="form-control" rows="3" id="edit-describe">市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">更新</button>
</div>
</div>
</div>
</div>
<!-- 导入市场活动的模态窗口 -->
<div class="modal fade" id="importActivityModal" role="dialog">
<div class="modal-dialog" role="document" style="width: 85%;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">导入市场活动</h4>
</div>
<div class="modal-body" style="height: 350px;">
<div style="position: relative;top: 20px; left: 50px;">
请选择要上传的文件：<small style="color: gray;">[仅支持.xls]</small>
</div>
<div style="position: relative;top: 40px; left: 50px;">
<input type="file" id="activityFile">
</div>
<div style="position: relative; width: 400px; height: 320px; left: 45% ; top: -40px;" >
<h3>重要提示</h3>
<ul>
<li>操作仅针对Excel，仅支持后缀名为XLS的文件。</li>
<li>给定文件的第一行将视为字段名。</li>
<li>请确认您的文件大小不超过5MB。</li>
<li>日期值以文本形式保存，必须符合yyyy-MM-dd格式。</li>
<li>日期时间以文本形式保存，必须符合yyyy-MM-dd HH:mm:ss的格式。</li>
<li>默认情况下，字符编码是UTF-8 (统一码)，请确保您导入的文件使用的是正确的字符编码方式。</li>
<li>建议您在导入真实数据之前用测试文件测试文件导入功能。</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button id="importActivityBtn" type="button" class="btn btn-primary">导入</button>
</div>
</div>
</div>
</div>
<div>
<div style="position: relative; left: 10px; top: -10px;">
<div class="page-header">
<h3>市场活动列表</h3>
</div>
</div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
<div class="btn-toolbar" role="toolbar" style="height: 80px;">
<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">名称</div>
<input class="form-control" type="text" id="query-name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">所有者</div>
<input class="form-control" type="text" id="query-owner">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">开始日期</div>
<input class="form-control" type="text" id="query-startDate">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">结束日期</div>
<input class="form-control" type="text" id="query-endDate">
</div>
</div>
<button type="button" class="btn btn-default" id="queryActivityBtn">查询</button>
</form>
</div>
<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
<div class="btn-group" style="position: relative; top: 18%;">
<button type="button" class="btn btn-primary" id="createActivityBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#editActivityModal"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
<button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
</div>
<div class="btn-group" style="position: relative; top: 18%;">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#importActivityModal" ><span class="glyphicon glyphicon-import"></span> 上传列表数据（导入）</button>
<button id="exportActivityAllBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（批量导出）</button>
<button id="exportActivityXzBtn" type="button" class="btn btn-default"><span class="glyphicon glyphicon-export"></span> 下载列表数据（选择导出）</button>
</div>
</div>
<div style="position: relative;top: 10px;">
<table class="table table-hover">
<thead>
<tr style="color: #B3B3B3;">
<td><input type="checkbox" /></td>
<td>名称</td>
<td>所有者</td>
<td>开始日期</td>
<td>结束日期</td>
</tr>
</thead>
<tbody id="tBody">
</tbody>
</table>
<div id="demo_pag1"></div>
</div>
</div>
</div>
</body>
</html>功能测试：
首次进入页面，默认每页10条数据
设置每页显示数据为1条，点击回车键，5条数据被分为了5页
设置每页显示2条，5条数据被分为了3页
创建新数据后，保持当前每页显示条数不变，并且把新添加的数据显示在第一页，并且页码跳转到第一页
点击查询时，不更改当前设置每页显示的数据数
点击查询时，名称中包含市场的有3条数据
查询所有者是李四的数据信息
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
