商城项目分页PageHelper和JQuery实现
// 按照姓名模糊查询用户
var currentPageNum = 1;
var resultCopy;
var nameLikeCopy;
$('#search_name_btn').click(function () {
// 获取文本框中值
var username = $('#search_name_btn').parents('span').siblings('input').val();
if (username.trim() == '') {
alert('请输入要查询的用户姓名');
return;
}
if (username.trim() == 'null') {
alert('输入不合法');
return;
}
var nameLike = username.trim();
nameLikeCopy = nameLike;
//清空之前模糊查寻出来的用户，不然会出现内容追加问题
$('#table_div_nameLike tbody').html('');
$.ajax({
url: 'user/1/' + nameLike,
type: 'GET',
success: function (result) {
resultCopy = result;
if (result.message == '成功') {
$('#table_div_nameLike').show(); //显示模糊查询table
$('#table_div_all').hide(); //隐藏包含所有员工的div
$('#page_break_div').hide(); //隐藏分页工具栏
// 遍历Json对象属性中的List
for (var index = 0; index < result.data.list.length; index++) {
var consumer = result.data.list;
//把true和false转化为是和否
var isRememberMe = consumer[index].rememberme;
if (isRememberMe == true) {
isRememberMe = "是";
} else {
isRememberMe = "否";
}
var date = timeFormat(new Date(consumer[index].createTime).getTime()); //格式化日期
var consumerInfo = '<tr>' + '<td>' + '<input type="checkbox" id="is_checked_box_${userList.id}">' + '</td>' +
'<td id="user_id_nameLike">' + consumer[index].id + '</td>' + '<td id="user_name_nameLike">' + consumer[index].username + '</td>' +
'<td id="user_phone_nameLike">' + consumer[index].phone + '</td><td id="user_email_nameLike">' + consumer[index].email + '</td><td id="user_street_nameLike">' +
consumer[index].street + '</td><td id="user_rememberMe_nameLike">' + isRememberMe + '</td><td id="user_createDate_nameLike">' + date + '</td>' +
'<td><button class="btn btn-primary btn-sm editBtn_nameLike" data-toggle="modal" data-target="#editModal_nameLike">编辑</button>\n' +
' <button class="btn btn-danger btn-sm deleteBtn_nameLike" id="delete_btn_nameLike">删除</button></td>'
+ '</tr>';
$(consumerInfo).appendTo('#table_div_nameLike tbody');
}
//生成分页工具栏
var pageBreakTool = "当前第" + result.data.pageNum + "页,共" + result.data.pages + "页,共" + result.data.total + "条记录  ";
if (result.data.total > 8) {
if (result.data.pageNum > 1 && result.data.pageNum != result.data.pages) {
var preAndNextLink = "<a class='prePageClass' href='#'>上一页</a>" + " " + "<a class='nextPageClass' href='#'>下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike'); //向div中追加内容
}
else if(result.data.pageNum == result.data.pages){
var preAndNextLink = "<a class='prePageClass' href='#'>上一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike');
}
else {
var preAndNextLink = "<a class='nextPageClass' href='#'>下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike');
}
}
else {
// var preAndNextLink = "<a href='#'>上一页</a>" + " " + "<a href='#' >下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
// $(preAndNextLink).appendTo('#page_break_nameLike');
}
} else {
alert(result.message);
}
}, error: function () {
alert("系统内部发生错误，请联系管理员");
}
});
});
// 模糊查询分页--上一页
$(document).on('click', '.prePageClass', function () {
//清空之前模糊查寻出来的用户，不然会出现内容追加问题
$('#table_div_nameLike tbody').html('');
var prePageNum = currentPageNum - 1;
currentPageNum--;
$.ajax({
url: 'user/' + prePageNum + '/' + nameLikeCopy,
type: 'GET',
success: function (result) {
if (result.message == '成功') {
$('#table_div_nameLike').show(); //显示模糊查询table
$('#table_div_all').hide(); //隐藏包含所有员工的div
$('#page_break_div').hide(); //隐藏分页工具栏
// 遍历Json对象属性中的List
for (var index = 0; index < resultCopy.data.list.length; index++) {
var consumer = resultCopy.data.list;
//把true和false转化为是和否
var isRememberMe = consumer[index].rememberme;
if (isRememberMe == true) {
isRememberMe = "是";
} else {
isRememberMe = "否";
}
var date = timeFormat(new Date(consumer[index].createTime).getTime()); //格式化日期
var consumerInfo = '<tr>' + '<td>' + '<input type="checkbox" id="is_checked_box_${userList.id}">' + '</td>' +
'<td id="user_id_nameLike">' + consumer[index].id + '</td>' + '<td id="user_name_nameLike">' + consumer[index].username + '</td>' +
'<td id="user_phone_nameLike">' + consumer[index].phone + '</td><td id="user_email_nameLike">' + consumer[index].email + '</td><td id="user_street_nameLike">' +
consumer[index].street + '</td><td id="user_rememberMe_nameLike">' + isRememberMe + '</td><td id="user_createDate_nameLike">' + date + '</td>' +
'<td><button class="btn btn-primary btn-sm editBtn_nameLike" data-toggle="modal" data-target="#editModal_nameLike">编辑</button>\n' +
' <button class="btn btn-danger btn-sm deleteBtn_nameLike" id="delete_btn_nameLike">删除</button></td>'
+ '</tr>';
$(consumerInfo).appendTo('#table_div_nameLike tbody');
}
//生成分页工具栏
var pageBreakTool = "当前第" + resultCopy.data.pageNum + "页,共" + resultCopy.data.pages + "页,共" + resultCopy.data.total + "条记录  ";
if (resultCopy.data.total > 8) {
if (result.data.pageNum > 1 && result.data.pageNum != result.data.pages) {
var preAndNextLink = "<a class='prePageClass' href='#'>上一页</a>" + " " + "<a class='nextPageClass' href='#'>下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike'); //向div中追加内容
}
else if(result.data.pageNum == result.data.pages){
var preAndNextLink = "<a class='prePageClass' href='#'>上一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike');
}
else {
var preAndNextLink = "<a class='nextPageClass' href='#'>下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike');
}
}
else {
// var preAndNextLink = "<a href='#'>上一页</a>" + " " + "<a href='#' >下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
// $(preAndNextLink).appendTo('#page_break_nameLike');
}
} else {
alert(result.message);
}
}, error: function () {
alert("系统内部发生错误，请联系管理员");
}
});
});
// 模糊查询分页--下一页
$(document).on('click', '.nextPageClass', function () {
//清空之前模糊查寻出来的用户，不然会出现内容追加问题
$('#table_div_nameLike tbody').html('');
var nextPageNum = resultCopy.data.pageNum + 1;
currentPageNum++;
$.ajax({
url: 'user/' + nextPageNum+ '/' + nameLikeCopy ,
type: 'GET',
success: function (result) {
if (result.message == '成功') {
$('#table_div_nameLike').show(); //显示模糊查询table
$('#table_div_all').hide(); //隐藏包含所有员工的div
$('#page_break_div').hide(); //隐藏分页工具栏
// 遍历Json对象属性中的List
for (var index = 0; index < result.data.list.length; index++) {
var consumer = result.data.list;
//把true和false转化为是和否
var isRememberMe = consumer[index].rememberme;
if (isRememberMe == true) {
isRememberMe = "是";
} else {
isRememberMe = "否";
}
var date = timeFormat(new Date(consumer[index].createTime).getTime()); //格式化日期
var consumerInfo = '<tr>' + '<td>' + '<input type="checkbox" id="is_checked_box_${userList.id}">' + '</td>' +
'<td id="user_id_nameLike">' + consumer[index].id + '</td>' + '<td id="user_name_nameLike">' + consumer[index].username + '</td>' +
'<td id="user_phone_nameLike">' + consumer[index].phone + '</td><td id="user_email_nameLike">' + consumer[index].email + '</td><td id="user_street_nameLike">' +
consumer[index].street + '</td><td id="user_rememberMe_nameLike">' + isRememberMe + '</td><td id="user_createDate_nameLike">' + date + '</td>' +
'<td><button class="btn btn-primary btn-sm editBtn_nameLike" data-toggle="modal" data-target="#editModal_nameLike">编辑</button>\n' +
' <button class="btn btn-danger btn-sm deleteBtn_nameLike" id="delete_btn_nameLike">删除</button></td>'
+ '</tr>';
$(consumerInfo).appendTo('#table_div_nameLike tbody');
}
//生成分页工具栏
var pageBreakTool = "当前第" + result.data.pageNum + "页,共" + result.data.pages + "页,共" + result.data.total + "条记录  ";
if (result.data.total > 8) {
if (result.data.pageNum > 1 && result.data.pageNum != result.data.pages) {
var preAndNextLink = "<a class='prePageClass' href='#'>上一页</a>" + " " + "<a class='nextPageClass' href='#'>下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike'); //向div中追加内容
}
else if(result.data.pageNum == result.data.pages){
var preAndNextLink = "<a class='prePageClass' href='#'>上一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike');
}
else {
var preAndNextLink = "<a class='nextPageClass' href='#'>下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
$(preAndNextLink).appendTo('#page_break_nameLike');
}
}
else {
// var preAndNextLink = "<a href='#'>上一页</a>" + " " + "<a href='#' >下一页</a>";
$('#page_break_nameLike').html(pageBreakTool);
// $(preAndNextLink).appendTo('#page_break_nameLike');
}
} else {
alert(result.message);
}
}, error: function () {
alert("系统内部发生错误，请联系管理员");
}
});
});
//在Jquery里格式化Date日期时间数据
function timeFormat(time) {
var datetime = new Date();
datetime.setTime(time);
var year = datetime.getFullYear();
var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
// var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
// var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
// var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
return year + "-" + month + "-" + date; // 时分秒：+" "+hour+":"+minute+":"+second
}
// 模糊查询，点击编辑按钮数据进行回显(为动态生成的dom元素绑定事件)
var userId, userName, userPhone, userEmail, userAddress;
$(document).on('click', '.editBtn_nameLike', function () {
var userID = $(this).parents('tr').children('#user_id_nameLike').text();
userId = userID;
//姓名回显
var username = $(this).parents('tr').children('#user_name_nameLike').text();
$('#username_id').val(username);
userName = username;
//电话号
var phone = $(this).parents('tr').children('#user_phone_nameLike').text();
$('#phone_id').val(phone);
userPhone = phone;
//email
var email = $(this).parents('tr').children('#user_email_nameLike').text();
$('#email_id').val(email);
userEmail = email;
//地址
var address = $(this).parents('tr').children('#user_street_nameLike').text();
$('#address_id').val(address);
userAddress = address;
});
Java用的是PageHelper分页插件,自己都不知道自己怎么做出来的,而且有大量的代码冗余。。。上面的代码，是对模糊查询出来的数据进行分页的。效果图如下：
扫一扫
1312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
