求助！求助！！
node吧
全部回复
仅看楼主
level 1
张斌兵73 楼主
前端页面
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel='stylesheet' href='/stylesheets/frames.css' />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 从后端获取数据并更新select元素的选项
$(document).ready(function() {
$('select').on('mousedown', function() {
var selectId = $(this).attr('id'); // 获取select元素的id
$.ajax({
url: '/frames/search3',
type: 'GET',
data: { id: selectId },
success: function(data) {
var selectElement = $('#' + selectId);
selectElement.empty();
$.each(data, function(index, item) {
var option = $('<option></option>');
option.text(item);
option.val(item);
selectElement.append(option);
});
}
});
});
});
//点击页码标签将4个select选择项作为查询条件发给后台
$(document).ready(function() {
$('.submit-btn').click(function(e) {
e.preventDefault(); // 阻止浏览器默认行为，即导航到href的URL
var Scode = $('#Scode').val();
var Brand = $('#Brand').val();
var Breed = $('#Breed').val();
var Model = $('#Model').val();
var page = $(this).text(); // 获取页码
var data = {
Scode: Scode,
Brand: Brand,
Breed: Breed,
Model: Model,
page: page
};
$.ajax({
url: '/frames/search2',
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json; charset=utf-8',
success: function(response) {
mergedObject = response;
},
error: function(error) {
}
});
});
});
</script>
</head>
<body>
<div class="list1">
<form action="/frames/search2" method="post">
分类查找：简码:
<select type="string" name="Scode" id="Scode" style="width: 80px;">
<option value="<%= mergedObject.Scode %>"><%= mergedObject.Scode %></option>
</select>
品牌:
<select type="string" name="Brand" id="Brand" style="width: 80px;">
<option value="<%= mergedObject.Brand %>"><%= mergedObject.Brand %></option>
</select>
品种:
<select type="string" name="Breed" id="Breed" style="width: 80px;">
<option value="<%= mergedObject.Breed %>"><%= mergedObject.Breed %></option>
</select>
型号:
<select type="string" name="Model" id="Model" style="width: 80px;">
<option value="<%= mergedObject.Model %>"><%= mergedObject.Model %></option>
</select>
<input type="submit" name="" value="查询" class="submit">
</form>
</div>
<% if(mergedObject.total>0){ %>
<div class="list1">
<div class="row1">
<a>镜架品牌列表</a>
</div>
</div>
<div class="list">
<div class="row">
<span>简码</span>
<span>品牌</span>
<span>品种</span>
<span>型号</span>
<span>颜色</span>
<span>进价</span>
<span>售价</span>
<span>数量</span>
<span>下限</span>
<span>时间</span>
<span>
<a>操作</a>
</span>
</div>
<% mergedObject.list.map(function(item,index){ %>
<div class="row">
<span><%= item.Scode %></span>
<span><%= item.Brand %></span>
<span><%= item.Breed %></span>
<span><%= item.Model %></span>
<span><%= item.Color %></span>
<span><%= item.Pprice %></span>
<span><%= item.Price %></span>
<span><%= item.Number %></span>
<span><%= item.LowerLimit %></span>
<span><%= item.time %></span>
<span>
<a href="/framescrk?TimeId=<%=item.TimeId%>&page=<%=mergedObject.curPage%>">修改</a>
</span>
</div>
<% }) %>
<div class="pages">
<a>共<%= mergedObject.total %>条</a>
<% for(let i=1; i<=mergedObject.totalPage;i++){ %>
<a href="#" class="submit-btn"><%= i %></a>
<% } %>
</div>
</div>
<% } %>
</body>
</html>
后台路由
router.post('/search2', async function (req, res) {
const { Scode, Brand, Breed, Model } = req.body;
const query = {};
if (Scode) query.Scode = Scode;
if (Brand) query.Brand = Brand;
if (Breed) query.Breed = Breed;
if (Model) query.Model = Model;
try {
const docs = await FramesModel.find(query);
if (docs.length > 0) {
const UserName = req.session.UserName || '';
const page = req.body.page || 1;
const data = {
total: Math.ceil(docs.length), // 文档总条数
totalPage: Math.ceil(docs.length / 3), // 分页显示总页面数，这里假设每页显示3条记录
curPage: page,
list: [],
};
const sortedAndPaginatedDocs = await FramesModel.find(query).sort({ TimeId: -1 }).limit(3).skip((page - 1) * 3).exec();
sortedAndPaginatedDocs.forEach((ele) => {
ele['time'] = moment(ele.TimeId).format('YY-MM-DD HH:mm:ss');
});
data.list = sortedAndPaginatedDocs;
const mergedObject = { ...query, ...data };
console.log(mergedObject)
res.render('framescrk', { UserName, mergedObject}); //合并对象
} else {
res.sendStatus(404); // 返回404状态码表示没有找到文档
}
} catch (err) {
console.error(err); // 处理查询错误
res.sendStatus(500); // 返回500状态码表示服务器内部错误
}
});
这是两段代码，分别前端页面和后台路由，存在问题是点击查询能显示第一页，点击下面的页码不能跳转到相应页面。请大佬帮忙看看。我纯属菜鸟，就是爱好，请指教。[呵呵]
2023年11月17日 08点11分 1
1