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

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 警告：表 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');