javascript - 试图将三个 HTML 页面中的三个数据表合并为一页
问题描述
我正在开发一个网络应用程序，它将为我雇主的仓库腾出昂贵的许可证。
仓库工作人员可以看到谁被分配到订单中（表 1）、订单上有哪些库存项目（表 2）以及库存项目在哪里（表 3）。当您单击表 1 上的“RefNo”时，它会在新选项卡上打开表 2。当您单击表 2 上的“库存项目”名称时，它会在新选项卡上打开表 3。它们都在给定的选项卡上完美呈现。
这三个表中的数据通过 Python 来自 SQL Server。表 1 来自视图，表 2 和表 3 来自存储过程。我将数据表用于表本身。
下面是 app.py 文件中三个表的 python 脚本
@/app.route('/pick-info', methods=['GET'])
@/login_required
def picks():
cursor = cnxn.cursor()
cursor.execute(select_picks)
data = cursor.fetchall()
return render_template('picks.html', data=data)
@/app.route('/pick-info/<int:PickRefNo>')
@/login_required
def picks_line(PickRefNo):
cursor = cnxn.cursor()
cursor.execute(pick_lines, (PickRefNo,))
pick_data = cursor.fetchall()
return render_template('picklines.html', pick_data=pick_data)
@/app.route('/pick-location/<int:StockItemRefNo>')
@/login_required
def pick_location(StockItemRefNo):
cursor = cnxn.cursor()
cursor.execute(pick_locations, (StockItemRefNo,))
location_data = cursor.fetchall()
return render_template('picklocations.html', location_data=location_data)
我尝试将这三个页面与以下 HTML 文件合二为一
<div class="row">
<div class="pick-table po-table">
<table id="pickexample" class="display table-responsive>
<thead>
<tr style="text-align: center;">
<th>
</th>
<th scope="col" class="">
<button type="button" class="btn">
RefNo
</button>
</th>
<th scope="col" class="">
<button type="button" class="btn">
<i class="fas fa-file-alt"></i>
</button>
</th>
<th scope="col" style="text-align: center; font-size: 10px;">
<button type="button" class="btn">
A/C
</button>
</th>
<th scope="col">
<button type="button" class="btn">
Due
</button>
</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr class="pick" style="text-align: center;">
<td class="details-control"></td>
<td><a class="text-white" href="{{url_for('picks_line', PickRefNo = value[0])}}" target="_blank"><i class="fas fa-info-circle"></i></a>{{ value[0] }}</td>
<td>{{ value[2] }}</td>
<td>{{ value[5] }}</td>
<td>{{ value[4] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="row" style="margin-top: 15px; height: 40vh;">
<div class="col-sm-8">
<table id="picklines" class="display table-responsive table">
<thead>
<tr style="text-align: center;">
<th>
</th>
<th scope="col" class="">
<button type="button" class="btn">
Stock Item
</button>
</th>
<th scope="col" style="text-align: center; font-size: 10px;">
<button type="button" class="btn">
Name
</button>
</th>
<th scope="col">
<button type="button" class="btn">
Pick Qty
</button>
</th>
<th scope="col">
<button type="button" class="btn">
Picked Qty
</button>
</th>
<th scope="col">
<button type="button" class="btn">
To Be Picked
</button>
</th>
<th scope="col">
<button type="button">
Weight
</button>
</th>
</tr>
</thead>
<tbody>
{% for value in pick_data %}
<tr class="pick" style="text-align: center;">
<td><a class="black-text" href="{{url_for('pick_location', StockItemRefNo = value[2])}}" target="_blank"><i class="fas fa-2x fa-info-circle"></i></a></td>
<td>{{ value[2] }}</td>
<td>{{ value[17] }}</td>
<td>{{ value[3] }}</td>
<td>{{ value[4] }}</td>
<td>{{ value[15] }}</td>
<td>{{ value[11] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="col-sm-4">
<table id="picklocation" class="display table-responsive">
<thead>
<tr style="text-align: center;">
<th scope="col" class="">
<button type="button" class="btn">
Zone
</button>
</th>
<th scope="col" style="text-align: center; font-size: 10px;">
<button type="button" class="btn">
Bin
</button>
</th>
<th scope="col">
<button type="button" class="btn">
Quantities
</button>
</th>
<th scope="col">
<button type="button" class="btn">
Pallet Number
</button>
</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr class="pick" style="text-align: center;">
<td>{{ value[0] }}</td>
<td>{{ value[1] }}</td>
<td>{{ value[2] }}</td>
<td>{{ value[3] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
我已经尝试在 HTML 文件顶部的 JS 中初始化所有三个表，并使用此博客文章来帮助我（https://datatables.net/blog/2017-03-31）
$(document).ready(function () {
$('#pickexample').DataTable({
dom: "<'row'<'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
'colvis'
],
fixedHeader: {
header: true
},
scrollY: 590,
"createdRow": function (row, data, dataIndex) {
if (data[5] == "InProgress") {
$(row).addClass('inprogress')
} else {
$(row).addClass('newpick')
}
},
iDisplayLength: -1,
columnDefs: [
{ responsivePriority: 1, targets: 0 },
{ responsivePriority: 1, targets: 1 },
{ responsivePriority: 1, targets: 2 },
{ responsivePriority: 1, targets: 3 },
{ responsivePriority: 2, targets: 4 },
{ responsivePriority: 2, targets: 5 },
{ responsivePriority: 1, targets: 6 },
{ responsivePriority: 3, targets: 7 },
{ responsivePriority: 3, targets: 8 },
{ responsivePriority: 2, targets: 9 },
{ responsivePriority: 1, targets: 10 },
{ responsivePriority: 1, targets: 11 },
{ responsivePriority: 1, targets: 12 },
{ responsivePriority: 2, targets: 13 },
{ responsivePriority: 1, targets: 14 }
],
responsive: {
details: {
renderer: function (api, rowIdx) {
// Select hidden columns for the given row
var data = api.cells(rowIdx, ':hidden').eq(0).map(function (cell) {
var header = $(api.column(cell.column).header());
return '<tr>' +
'<td>' +
header.text() + ':' +
'</td> ' +
'<td>' +
api.cell(cell).data() +
'</td>' +
'</tr>';
}).toArray().join('');
return data ?
$('<table/>').append(data) :
false;
}
}
}
})
});
$('#pickexample tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
}
else {
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
function format(rowData) {
var tableUrl = "/";
var div = $('<div/>')
.addClass('loading')
.text('Loading...');
$.ajax({
url: "tableUrl",
data: {
name: rowData.name
},
dataType: 'json',
success: function (json) {
div
.html(json.html)
.removeClass('loading');
}
});
return div;
}
$(document).ready(function () {
$('#picklines').DataTable({
dom: "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
'colvis'
],
fixedHeader: {
header: true
},
scrollY: 550,
paging: false,
iDisplayLength: -1,
})
});
$(document).ready(function () {
$('#picklocation').DataTable({
dom: "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
buttons: [
'colvis'
],
fixedHeader: {
header: true
},
scrollY: 590,
iDisplayLength: -1,
});
function refreshPage() {
window.location.reload();
}
当我打开此页面时，表 1 完美呈现，表 2 和表 3 初始化但没有数据（这是我所期望的）但它是能够单击表 1 上的一行的最后一次跳转，它通过了 RefNo到存储过程打开表2然后能够点击表2中的项目名称传递到存储过程中打开表3。使用表2（id =''picklines''）和表3（id =''picklocation'') 来自存储过程 - 有没有办法根据我单击的行来呈现这些？
我在 Datatables 论坛上问了一个类似的问题，他们建议使用 AJAX，但是该手册没有说明如何将 AJAX 与 SQL 存储过程一起使用。
我可能应该补充一点，我是一名初级开发人员，也是业务中唯一的开发人员，所以当我遇到困难时，我没有同事可以寻求帮助。如果我在问题中缺乏细节，我很乐意添加更多。任何可以让我学习如何做到这一点的建议或资源，或者最好的方法——任何能指引我正确方向的东西都将不胜感激！
谢谢
更新
@login_required
def picks():
cursor = cnxn.cursor()
data=cursor.execute(select_picks).fetchall()
return render_template('picks-orders.html', data=data)
@app.route('/picks/<int:PickRefNo>', methods=['GET'])
@login_required
def picks_andlines(PickRefNo):
cursor = cnxn.cursor()
data=cursor.execute(select_picks).fetchall()
pick_data = cursor.execute(pick_lines, (PickRefNo,)).fetchall()
return render_template('picks-andlines.html', data=data, pick_data=pick_data)
@app.route('/picks/<int:PickRefNo>/<int:StockItemRefNo>', methods=['GET'])
@login_required
def pickslines_andlocations(PickRefNo, StockItemRefNo):
cursor = cnxn.cursor()
data=cursor.execute(select_picks).fetchall()
pick_data = cursor.execute(pick_lines, (PickRefNo,)).fetchall()
location_data=cursor.execute(pick_locations, (StockItemRefNo,)).fetchall()
return render_template('picks-all.html', data=data, pick_data=pick_data, location_data=location_data)
您给我的答案允许我在地址栏中手动指定 PickRefNo 和 StockItem 的同时加载所有三个表。我尝试自己加载表 1，然后在下一页加载表 1 和 2，然后在最后一页加载表 1、2 和 3。不知道最后一页的href应该是什么样子-我已经尝试过了
“{{url_for('pickslines_andlocations', StockItemRefNo = value[2])}”
但我不确定如何将当前的 PickRefNo 包括在内？
我可能会谈论这个arseways，道歉！
解决方案
只需为所有表创建一个路由，使用 PickRefNo 和 StockItemRefNo 作为路由变量，如下所示：
@/app.route('/pick-info/<int:PickRefNo>/<int:StockItemRefNo>', methods=['GET'])
@/login_required
def picks(PickRefNo, StockItemRefNo):
cursor = cnxn.cursor()
data=cursor.execute(select_picks).fetchall()
pick_data = cursor.execute(pick_lines, (PickRefNo,)).fetchall()
location_data=cursor.execute(pick_locations, (StockItemRefNo,)).fetchall()
return render_template('picks.html', data=data, pick_data=pick_data, location_data=location_data)
并在 picks.html 中添加所有三个表
推荐阅读
- reactjs - 将 tableau-api 与 gatsbyjs 站点一起使用
- java - 如果类类型的对象与另一个类对象的距离越来越近，Greenfoot 会播放声音
- python - 如何结合 webscraper 和电子邮件 python 代码，以便在从 scraper 创建 csv 文件后发送它？
- express - Nuxt Auth + Express：获取登录用户？
- c - 为什么分段错误（代码被转储）？函数删除二叉搜索树中的节点
- swift - 是否可以捕获特定的 CaseIterable 枚举
- openssl - OpenSSL 盲实现
- javascript - Shopify 添加到购物车功能一次只能使用一个，而不是循环使用
- node.js - 如何部署具有本地 npm 依赖项的 GAE 服务？
- flutter - 如何制作可滚动的项目