功能需求：
1.显示的数量【10、20、30】可以选择
2.实现上一页、下一页、页码的实现
功能实现
1.用户切换每页显示的条数，向后台发送请求
2.用户切换页码向后台发请求
代码实现
1.导入js
<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 rel="stylesheet" type="text/css" 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>2.在ajax
success: function (data) {
编写
//计算页码数
var totalPages = data.totalRows / pageSize;
if (data.totalRows % pageSize > 0) {
totalPages = parseInt(data.totalRows / pageSize) + 1;
}
// 调用页码翻页函数
$("#pagDiv").bs_pagination({
currentPage: pageNo,//当前页码数
rowsPerPage: pageSize,//每页显示条数
totalRows: data.totalRows,//总条数
totalPages: totalPages,//总页数
visiblePageLinks: 5,//最多显示的卡片数
showGoToPage: true,//显示“跳转到部分
showRowsPerPage: true,//每页显示条数
showRowsInfo: false,//是否显示记录的信息
//用户切换页码，触发函数，返回页码之后的pageNo和pageSize
onChangePage:function (event,pageObj) {
queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
}
});3.完整的js
<script type="text/javascript">
$(function () {
//1.创建---创建按钮单击事件
$("#createActivityBtn").click(function () {
// 初始化工作，加载一些js代码
// 重置form
$("#createActivityForm").get(0).reset();
// 弹出创建市场模态窗口
$("#createActivityModal").modal("show");
});
// 1.创建---保存按钮
$("#SaveCreateActivityBtn").click(function () {
// 一、发请求--1.收集参数(表单验证)--2.发送请求
//1.收集表单参数
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());
//1.表单验证
if (owner == "") {
alert("请输入所有者");
return;
}
if (name == "") {
alert("请输入名称");
return;
}
if (startDate == "") {
alert("请输入开始日期");
return;
}
if (endDate == "") {
alert("请输入结束日期");
return;
}
if (startDate > endDate) {
alert("结束日期不能比开始日期小");
return;
}
if (cost == "") {
alert("请输入成本");
return;
}
var regExp = /^(([1-9]\d*)|0)$/;
if (!regExp.test(cost)) {
alert("成本不能为负数");
return;
}
//2.发送请求
$.ajax({
url: 'workbench/activity/saveCreateActivity.do',
data: {
owner: owner,
name: name,
startDate: startDate,
endDate: endDate,
cost: cost,
description: description
},
type: 'post',
dataType: 'json',
//2.1 处理响应
success: function (data) {
if (data.code == "1") {// 成功
//1.关闭模态窗口
$("#createActivityModal").modal("hide");
//2. 刷新未做
queryActivityByConditionForPage(1, 10);
} else {
//提示
alert(data.message);
$("#createActivityModal").modal("show");
}
}
});
});
// 1.创建---日期js
$(".my-date").datetimepicker({
language: 'zh-CN',//语言
format: 'yyyy-mm-dd',//日期的格式
minView: 'month',//选择最小的视图
initialDate: new Date(),//初始化显示日期
autoclose: true,//选择后自动关闭
todayBtn: true,//显示今天的按钮
clearBtn: true//清空按钮
});
//2.查询。当市场活动主页面加载完成，查询所有数据的第一页和总条数
queryActivityByConditionForPage(1, 10);
//3.按条件查询
$("#queryActivityBtn").click(function () {
//按照条件查询
queryActivityByConditionForPage(1, 10);
});
});
function queryActivityByConditionForPage(pageNo, pageSize) {
//2.查询。当市场活动主页面加载完成，查询所有数据的第一页和总条数
//2.1收集查询的参数
var name = $("#query-name").val();
var owner = $("#query-owner").val();
var startDate = $("#query-startDate").val();
var endDate = $("#query-endDate").val();
// var pageNo = 1;//页码
// var pageSize = 10;//显示的数量
//2.2发送请求
$.ajax({
url: 'workbench/activity/queryActivityByConditionForPage.do',
data: {
name: name,
owner: owner,
startDate: startDate,
endDate: endDate,
pageNo: pageNo,
pageSize: pageSize
},
type: 'post',
dataType: 'json',
//2.3处理响应 data有两个数据，一个是数组，一个是int
success: function (data) {
// 总条数
$("#totalRowsB").text(data.totalRows);//把查询的数据放在totalRowsB的标签里
// 遍历数组列表activityList $.each(遍历的数组，回调函数(index遍历的下标,obj循环变量))
// 定义字符串，存放市场活动列表数据
var htmlStr = "";
$.each(data.activityList, function (index, obj) {
// obj和this都是取出的数组元素,htmlStr进行字符串拼接
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>
// text()显示文本信息不能有标签，html()可以有标签
$("#tBody").html(htmlStr);
//计算页码数
var totalPages = data.totalRows / pageSize;
if (data.totalRows % pageSize > 0) {
totalPages = parseInt(data.totalRows / pageSize) + 1;
}
// 调用页码翻页函数
$("#pagDiv").bs_pagination({
currentPage: pageNo,//当前页码数
rowsPerPage: pageSize,//每页显示条数
totalRows: data.totalRows,//总条数
totalPages: totalPages,//总页数
visiblePageLinks: 5,//最多显示的卡片数
showGoToPage: true,//显示“跳转到部分
showRowsPerPage: true,//每页显示条数
showRowsInfo: false,//是否显示记录的信息
//用户切换页码，触发函数，返回页码之后的pageNo和pageSize
onChangePage:function (event,pageObj) {
queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
}
});
}
});
}
</script>
2410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
