javascript - 为什么 jQuery DataTable 不会填充表格

问题描述

我正在尝试在我有表格的 HTML 代码的同一个文件上实现 jQuery DataTable，但是我收到了这个错误：

未捕获的 ReferenceError：$ 未定义

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

这是代码：

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

更新 - 我如何修复Uncaught 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>

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

我不明白我做错了什么

任何建议如何解决这个问题？

提前致谢！

标签： javascriptjquerydatatablesrazor-pages

javascript - 为什么 jQuery DataTable 不会填充表格

问题描述

解决方案

推荐阅读