Не удается повторно инициализировать ошибку DataTable при попытке установить класс

Question

Я работаю над программой, в которой по щелчку вкладки я получаю данные и заполняю свои таблицы данных.

Итак, по щелчку этого элемента я вызываю функцию getOutPutData, которая отправляется на мой контроллер, а затем заполняет таблицу данных с идентификатором 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.

 <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

Initialize Datatable один раз

Этот кодовый блок:

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

... необходимо инициализировать перед вызовом вашей функции getOutPutData(), чтобы избежать инициализации вашей таблицы данных.чем один раз.

Затем замените этот код с помощью ajax.reload():

myDatatable.ajax.reload();

Возможно, вам придется немного адаптировать это, но это начало путиВы должны идти.

---

Добавить класс в Datatable

Если классы, добавленные через HTML, не сохраняются после инициализации с датой, вы можете добавить их после table().container().

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

или , так как вы вводите идентификатор, просто выбор его с помощью jQuery должен работать напрямую: (если нет, скажите, пожалуйста)

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