为什么jQuery DataTable无法填充表格

如何解决为什么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,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,"All"]],columns: [
                { "data": "nome_tecnico",responsivePriority: 1,"searchable": true },{ "data": "azienda_cliente",responsivePriority: 2,{ "data": "azienda_sotto_clienti",responsivePriority: 3,{ "data": "descrizione",responsivePriority: 4,{ "data": "nota",responsivePriority: 5,{ "data": "data",responsivePriority: 6,{ "data": "ore_quotidiano",responsivePriority: 7,{ "data": "ore_mensili",responsivePriority: 8,{ "data": "ore_straordinari",responsivePriority: 9,{ "data": "ore_ferie",responsivePriority: 10,{ "data": "ore_malattia",responsivePriority: 11,{ "data": "ore_infortunio",responsivePriority: 12,]
        });
    }
</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>

---

更新-如何修复未捕获的ReferenceError：未定义$

<script type="text/javascript">
        var nome;
        nome = "@nome";
    $(document).ready(function () {
        TabellaOreTecnico();
    });

    function TabellaOreTecnico() {
        oTable = $('#tblOreTecnico').DataTable({
            scrollY: '50vh',ajax: {
                url: "/Home/AttivitaDelTecnicoo?nome=" + nome,]
        });
    }
    </script>

问题是在控制台中我有数据data，但表却像this。我不知道为什么它不会填充表格。

我无法理解我做错了什么

任何建议如何解决此问题？

谢谢！

解决方法

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

1. 未定义jQuery（未导入jQuery，您需要使用 formGroup = new FormGroup({ control1: new FormControl('init value'),control2: new FormControl(null),control3: new FormControl(12) }); function updateAllValues() { this.formGroup.setValue({ control1: 'new value',control2: true,control3: 42 ); } function updateSomeValues() { this.formGroup.setValue({ control1: 'new extra value',control3: 42 ); }

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

3. 这机会较少。但是您的代码中还存在其他一些具有相同变量名<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">的插件