我有一个用 C# 编写的 ASP.NET Core MVC Web 应用程序。我创建了一个 Razor 视图,在该视图中,我水平显示 2 个 jQuery 数据表,在这 2 个数据表之间有 3 个按钮。
这些控件位于容器中。但运行应用程序时,只有边框可见 - 2 个数据表不可见。
@model LMD_WEB.ViewModels.vmStudentMaster
@{
Layout = null;
}
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 20px;
}
.datagrid {
flex: 1;
margin: 10px;
border: 1px solid black;
}
.buttons {
display: flex;
flex-direction: column;
justify-content: center;
margin: 10px;
}
.buttons button {
margin: 5px 0;
}
.footer-buttons {
display: flex;
justify-content: space-between;
margin: 10px;
}
.textbox {
margin: 10px;
}
.textbox input {
width: 100%;
}
</style>
<div class="textbox">
<input type="text" placeholder="Text box" />
</div>
<div class="container">
<div class="datagrid" id="datagrid1">
<table id="table1" class="display table-bordered"
style="width:100%">
</table>
</div>
<div class="buttons">
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
<div class="datagrid" id="datagrid2">
<table id="table2" class="display table-bordered"
style="width:100%">
</table>
</div>
</div>
<div class="footer-buttons">
<button id="buttonCancel">Cancel</button>
<button id="buttonOK">OK</button>
</div>
<script>
$(document).ready(function () {
$('#table1').DataTable();
$('#table2').DataTable();
LoadGrid1();
});
const LoadGrid1 = async () => {
$("#DATATABLE1").DataTable({
serverSide: true,
filter: false,
scrollY: StaticData.TABLE_HEIGHT + 'px',
scrollX: true,
lengthMenu: StaticData.TABLE_PAGE_SIZE,
scrollCollapse: true,
searchDelay: 800,
ajax: {
url: '/STUD_MANAGEMENT/LoadStuds',
type: 'GET',
datatype: 'json',
data: (d) => { return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir } },
beforeSend: () => { ShowLoader(); },
complete: () => { HideLoader(); },
dataSrc: (json) => {
json = json.data;
_log(json);
return json;
}
},
columns: [
{ data: 'StudID', title: StudID', autoWidth: true },
{ data: 'StudCode', title: 'Stud Code', autoWidth: true },
{ data: 'ClassNo', title: 'Class No', autoWidth: true },
{ data: 'Teacher', title: 'Teachere', autoWidth: true },
{ data: 'Remarks', title: Remarks', autoWidth: true },
],
columnDefs: [
{ className: 'text-center', targets: [0, 2, 4] },
],
});
}
</script>
如何使这 2 个数据表在此 Razor 视图中可见?
恐怕这是因为js代码没有执行。您提到您正在使用
ASP.NET Core MVC
应用程序,因此脚本应该被 @section Scripts{}
包围。与此同时,您的代码片段存在一些问题。您没有渲染 table1
和 table2
的表格内容,而仅渲染 DATATABLE1
的表格内容。而且您错过了 title: StudID'
和 title: Remarks'
的 ',无论如何,请参阅下面的代码测试。 HTML 元素和样式与您的代码片段相同。
@section Scripts{
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#table1').DataTable({
ajax: {
"url": "/table/LoadStuds",
"type": "GET",
"dataSrc": function (myJson) {
console.info(myJson)
return myJson;
}
},
columns: [
{ data: 'studID', title: 'StudID', autoWidth: true },
{ data: 'studCode', title: 'Stud Code', autoWidth: true },
{ data: 'classNo', title: 'Class No', autoWidth: true },
{ data: 'teacher', title: 'Teachere', autoWidth: true },
{ data: 'remarks', title: 'Remarks', autoWidth: true },
]
});
$('#table2').DataTable();
});
</script>
}
public class TableController : Controller
{
public IActionResult Index()
{
return View();
}
public List<Student> LoadStuds() {
var list = new List<Student> {
new Student{ StudID="1",StudCode="1001",ClassNo="A",Teacher="David",Remarks="good"},
new Student{ StudID="2",StudCode="1002",ClassNo="A",Teacher="David",Remarks="perfect"},
new Student{ StudID="3",StudCode="1003",ClassNo="B",Teacher="Yang",Remarks="bad"},
new Student{ StudID="4",StudCode="1004",ClassNo="A",Teacher="David",Remarks="bad"}
};
return list;
}
}
public class Student {
public string StudID { get; set; }
public string StudCode { get; set; }
public string ClassNo { get; set; }
public string Teacher { get; set; }
public string Remarks { get; set; }
}