这是该表的chtml代码,其中我的按钮位于我想要的位置。我还为表格添加了JavaScript,为“绘图”按钮添加了.cs控制器。如果我在表行中放置一个按钮并通过单击时传递记录ID,但我不希望该行中的按钮,则控制器可以工作。这是因为只有在将数据表过滤到剩余一条记录时,该按钮才有意显示。
<br />
<div class="container row p-0 m-0">
<div class="col-6">
<h2 class="text-info">Device List</h2>
</div>
<div class="col-12 border p-3">
<table id="DT_load" class="table table-striped table-bordered">
<thead>
<tr>
<th>Drawing File</th>
<th>Barcode</th>
<th>Date Modified</th>
<th>Location</th>
<th></th>
</tr>
</thead>
</table>
</div >
<div class="row" >
<a asp-action="Drawing" class="btn-primary" id="btn1" style="width: 100px" value="0">
View Drawing
</a>
<a asp-action="Location" class="btn-primary" id="btn2" style="width: 100px">
View Location
</a>
</div>
</div>
这是我的JavaScript
$(document).ready(function () {
loadDataTable();
});
function loadDataTable()
{
dataTable = $('#DT_load').DataTable
({
"ajax":
{
"url": "/devices/getall/",
"type": "GET",
"datatype": "json"
},
"columns":
[
{ "data": "dwgfilename", "width": "20%" },
{ "data": "barcode", "width": "20%" },
{ "data": "moddate", "width": "20%" },
{ "data": "locationdwg", "width": "20%" },
{
"data": "id",
"render": function (data)
{
return `<div class="text-center">
/*ignore*/
</div>`;
}, "width": "60%"
}
],
'infoCallback': function (settings, start, end, max, total, pre)
{
if (total == 1)
{
$("#btn1").show();
$("#btn2").show();
return 'Showing your record';
}
else
{
$("#btn1").hide();
$("#btn2").hide();
return 'Showing ' + total + ' of ' + max + ' records';
}
},
"width": "100%"
});
}
这里是按钮的控制器
public IActionResult Drawing(int id)
{
//draw
Device = _db.Devices.FirstOrDefault(u => u.Id == id);
if (Device == null)
{
return NotFound();
}
var filename = Device.Dwgfilename;
var stream = new FileStream(@"c:\users\boxworks\documents\" + filename +".pdf", FileMode.Open);
return new FileStreamResult(stream, "application/pdf");
}
请参考下面的工作演示,并在您的javascript上进行修改:
function loadDataTable() {
dataTable = $('#DT_load').DataTable
({
"ajax":
{
"url": "/home/getall/",
"type": "GET",
"datatype": "json",
"dataSrc":""
},
"columns":
[
{ "data": "orderNumber" },
{ "data": "orderDate" },
{ "data": "description" },
{
"data": "orderId",
"render": function (data) {
return `<lable hidden>`+data+'</lable>';
}, "width": "60%"
}
],
'infoCallback': function (settings, start, end, max, total, pre) {
if (total == 1) {
var id = $("#DT_load tbody tr").find("lable").text();
$("#btn1").attr("href",$("#btn1").attr("href") + "?id=" + id);
$("#btn1").show();
$("#btn2").show();
return 'Showing your record';
}
else {
$("#btn1").hide();
$("#btn2").hide();
return 'Showing ' + total + ' of ' + max + ' records';
}
},
"width": "100%"
});
}