【发布时间】：2020-12-27 23:20:38
【问题描述】：
我正在尝试在我有表格的 HTML 代码的同一个文件上实现 jQuery DataTable，但是我收到了这个错误：
未捕获的引用错误：$ 未定义
我四处寻找我做错了什么，但没有找到任何帮助我的东西。
这是代码：
@{
var nome = string.Empty;
nome = ViewBag.Nome;
ViewData["Title"] = "AttivitaDelTecnico";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{
@*<script src="~/js/Tabelle/OreTecnico.js"></script>*@
<link href="~/DataTable/datatables.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="~/DataTable/datatables.js"></script>
<script src="~/moment/moment.min.js"></script>
}
<script type="text/javascript">
$(document).ready(function () {
TabellaOreTecnico();
});
function TabellaOreTecnico() {
oTable = $('#tblOreTecnico').DataTable({
scrollY: '50vh',
scrollCollapse: true,
destroy: true,
language: {
"url": "/DataTableBootstrap/Italian.json"
},
serverSide: false,
destroy: true,
processing: true,
searching: true,
ordering: true,
orderMulti: true,
colReorder: true,
paging: true,
responsive: true,
ajax: {
url: "/Home/AttivitaDelTecnicoo?nome=" + @nome,
type: "GET",
contentType: "application/json",
data: function (d) {
debugger
return JSON.stringify(d);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr, thrownError)
debugger
},
success: function (data) {
console.log(data);
debugger
},
},
aLengthMenu: [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
columns: [
{ "data": "nome_tecnico", responsivePriority: 1, "searchable": true },
{ "data": "azienda_cliente", responsivePriority: 2, "searchable": true },
{ "data": "azienda_sotto_clienti", responsivePriority: 3, "searchable": true },
{ "data": "descrizione", responsivePriority: 4, "searchable": true },
{ "data": "nota", responsivePriority: 5, "searchable": true },
{ "data": "data", responsivePriority: 6, "searchable": true },
{ "data": "ore_quotidiano", responsivePriority: 7, "searchable": true },
{ "data": "ore_mensili", responsivePriority: 8, "searchable": true },
{ "data": "ore_straordinari", responsivePriority: 9, "searchable": true },
{ "data": "ore_ferie", responsivePriority: 10, "searchable": true },
{ "data": "ore_malattia", responsivePriority: 11, "searchable": true },
{ "data": "ore_infortunio", responsivePriority: 12, "searchable": true },
]
});
}
</script>
我想把它放在同一个文件中，因为我需要 nome 在我进行 Ajax 调用时传递它。
这是 HTML：
<table class="table" id="tblOreTecnico">
<thead>
<tr>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Nome_tecnico)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Azienda_cliente)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Azienda_sotto_clienti)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Descrizione)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Nota)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Data)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Ore_mensili)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Ore_straordinari)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Ore_ferie)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Ore_malattia)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Ore_infortunio)
</th>
<th class="align-middle">
@Html.DisplayNameFor(model => model.Ore_quotidiano)
</th>
</tr>
</thead>
</table>
更新 - 我如何修复 未捕获的 ReferenceError: $ is not defined
<script type="text/javascript">
var nome;
nome = "@nome";
$(document).ready(function () {
TabellaOreTecnico();
});
function TabellaOreTecnico() {
oTable = $('#tblOreTecnico').DataTable({
scrollY: '50vh',
scrollCollapse: true,
destroy: true,
language: {
"url": "/DataTableBootstrap/Italian.json"
},
serverSide: false,
destroy: true,
processing: true,
searching: true,
ordering: true,
orderMulti: true,
colReorder: true,
paging: true,
responsive: true,
ajax: {
url: "/Home/AttivitaDelTecnicoo?nome=" + nome,
type: "GET",
contentType: "application/json",
data: function (d) {
debugger
return JSON.stringify(d);
},
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr, thrownError)
debugger
},
success: function (data) {
console.log(data);
debugger
},
},
aLengthMenu: [[10, 20, 50, 100, -1], [10, 20, 50, 100, "All"]],
columns: [
{ "data": "nome_tecnico", responsivePriority: 1, "searchable": true },
{ "data": "azienda_cliente", responsivePriority: 2, "searchable": true },
{ "data": "azienda_sotto_clienti", responsivePriority: 3, "searchable": true },
{ "data": "descrizione", responsivePriority: 4, "searchable": true },
{ "data": "nota", responsivePriority: 5, "searchable": true },
{ "data": "data", responsivePriority: 6, "searchable": true },
{ "data": "ore_quotidiano", responsivePriority: 7, "searchable": true },
{ "data": "ore_mensili", responsivePriority: 8, "searchable": true },
{ "data": "ore_straordinari", responsivePriority: 9, "searchable": true },
{ "data": "ore_ferie", responsivePriority: 10, "searchable": true },
{ "data": "ore_malattia", responsivePriority: 11, "searchable": true },
{ "data": "ore_infortunio", responsivePriority: 12, "searchable": true },
]
});
}
</script>
问题是在控制台中我有数据data，但表格就像this。我不知道为什么它不会填充表格。
我不明白我做错了什么
有什么建议可以解决这个问题吗？
提前致谢！
【问题讨论】：
标签： javascript jquery datatables razor-pages