为什么 jQuery 数据表不会填充表

Question

我正试图在同一个文件上实现jQuery DataTable，在该文件中我有表的HTML代码，但我得到了以下错误：

未捕获引用错误：$未定义

我四处寻找我做错了什么，但没有找到任何对我有帮助的东西。

这是代码：

@{
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>

我想把它放在同一个文件中，因为我在进行Ajax调用时需要nome来传递它。

这是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>

---

UPDATE-如何修复未捕获引用错误：未定义$

<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>

问题是在控制台中我有数据，但表是这样的。我不知道为什么它不能填充表。

我不能得到我做错了什么

有什么建议吗？

提前感谢！

Answer 1

在这种情况下有三种可能性：

1. Jquery未定义(Jquery未导入，您需要使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

2. 您已导入Jquery。但是您的javascript代码是在导入jquery之前编写的。

3. 这样的机会越来越少。但是在您的代码中存在其他一些具有相同变量名称$的插件