Question

我正在开发一个程序，在其中单击选项卡，即可检索数据并填充数据表。

因此，在单击此项时，我调用getOutPutData函数，该函数将转到我的控制器，然后填充ID为tblStock的数据表。

<li class="nav-item">
        <a class="nav-link" href="#wizard-simple-step3" data-toggle="tab" onclick="getOutPutData();">3. Extra</a>
</li>

//以下功能。

    var isFirst = true;
    console.log(isFirst);
    function getOutPutData() {
        console.log(isFirst);
        if ($("#id").val() == null || $("#id").val().toString().length <= 0 || parseInt($("#id").val()) <= 0) {
        jAlert("Please Save Tab Details First!!!");
    }
        else {
            if (isFirst) {
                $('#tblStock').DataTable({
                    "ajax": {
                        "url": "@Url.Action("getOutPutData", "PSIPDetails")",
                        "data": { "id": $('#id').val() },
                        "type": "POST"
                    }
                });

             //   getOutComeData();

            } 
              isFirst = false; 
        }
    }

继续说明，当发生这种情况时，单击的选项卡将加载一个页面，该页面包含tblStock ID的表。

 <div class="tab-pane" id="wizard-simple-step3">
     <div>
         @Html.Action("Output", "PSIPDetails", new { id = Model.id })
     </div>
</div>

然后在此页面上我有桌子

<div class="table" style="padding-top: 10px;">
    <div class="row">
        <div class="col-sm-12">
            <table id="tblStock" class="table table-bordered table-striped table-vcenter js-dataTable-full" style="width:100%;">
                <thead>
                    <tr>

                        <td>Output</td>
                        <td>Output Description</td>

                        <td></td>
                        <td></td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

我的问题最终归结为这一行class="js-dataTable-full"，我需要添加它来实现样式，但是当我运行它时，在对它进行谷歌搜索时会收到错误“ DataTables warning：table id = tblStock-无法重新初始化DataTable”。错误https://datatables.net/manual/tech-notes/3，它提到第一次完成表后无法重新初始化该表。现在，我假设首先是在getOutPutData函数中设置数据时，但是我不确定如何在此处设置类。链接和其他问题都在讨论销毁桌子，但是我不确定这将如何工作或应该在哪里销毁它。

请指导。

Answer 1

一次初始化数据表

此代码块：

let myDatatable = $('#tblStock').DataTable({
    "ajax": {
        "url": "@Url.Action("getOutPutData", "PSIPDetails")",
        "data": { "id": $('#id').val() },
        "type": "POST"
    }
});

...需要在调用getOutPutData()函数之前进行初始化，以免多次初始化数据表。

然后使用ajax.reload()替换此代码：

myDatatable.ajax.reload();

您可能需要对此稍作调整，但这只是您应该采取的方式的开始。

向数据表中添加类

如果在数据表初始化之后通过HTML添加的类不是持久性的，则可以感谢table().container()来添加这些类。

// After datatable initialization
$(myDatatable.table().container()).addClass('firstClass secondClass');

或，当您输入一个ID时，只需使用jQuery选择它即可直接起作用： （如果没有，请告诉我）

$('#tblStock').addClass('firstClass secondClass');

尝试设置类时无法重新初始化DataTable错误

1 个答案:

一次初始化数据表

向数据表中添加类