时间戳

首页 > 解决方案 > 即使在再次销毁和初始化数据表之后，数据表也不会在更新列表时更新数据（敲除绑定）。

javascript - 即使在再次销毁和初始化数据表之后，数据表也不会在更新列表时更新数据（敲除绑定）。

问题描述

我有一个 html 文件，其中包含一个绑定了可观察数组的数据表。单击按钮后，列表中的数据会更新，但数据表不反映新数据。即使在移除身体并破坏表格后，它也不会刷新表格。

  <table id="SVRnew" class="display">
  <thead>
     <tr>
     <th>Domain</th>
     <th>Sub Domain</th>
     <th>Event Type</th>
     <th>Event Sub type</th>
     <th>Event Name</th>
     <th>SVR</th>
     <th>Deloitte Capability</th>
     </tr>
</thead>
     <tbody data-bind="foreach : $root.LISTSVREASnew">
      <tr>
          <td class="table-column-ellipses" data-bind="text:DOMAIN"></td>
          <td class="table-column-ellipses" data-bind="text:SUB_DOMAIN"></td>
          <td class="table-column-ellipses" data-bind="text:EVENT_TYPE"></td>
          <td class="table-column-ellipses" data-bind="text:EVENT_SUBTYPE"></td>         <td class="table-column-ellipses" data-bind="text:EVENT_NAME"></td>
          <td class="table-column-ellipses" data-bind="text:SVR"></td>
          <td class="table-column-ellipses" data-bind="text:Deloitte_Capability"></td>
      </tr>
    </tbody>
 </table>

Javascript函数：-

  function ClickAddMapping()
    {
        $('#SVRnew').DataTable().destroy();
        $('#SVRnew tbody tr').remove();
        _dtsvrnew = $('#SVRnew').DataTable({
            scrollY: '30vh',
            scrollCollapse: true,
            paging: false,
            "scrollX": true

        });

        VMHome.LISTSVREASnew([]);
        var selectedevents = ko.computed(function () {
            return VMHome.EventMappingforsvr().filter(function (i) {
                return i.ISSELECTED() === true;
            });
        });

        var selectedsvr = ko.computed(function () {
            return VMHome.SVRList().filter(function (i) {
                return i.ISSELECTED() === true;
            });
        });


            for (var j = 0; j < selectedevents().length; j++)
            {
                for (var k = 0; k < selectedsvr().length; k++)
                {
                    VMHome.LISTSVREASnew().push(new EASSVRModel({ 'SVR': selectedsvr()[k].SVR(), 'DSVRID': selectedsvr()[k].DSVRID(), 'Deloitte_Capability': selectedsvr()[k].Deloitte_Capability(), 'EAS_UID': selectedevents()[j].EAS_UID(), 'DOMAIN': selectedevents()[j].DOMAIN(), 'SUB_DOMAIN': selectedevents()[j].SUB_DOMAIN(), 'EVENT_TYPE': selectedevents()[j].EVENT_TYPE(), 'EVENT_SUBTYPE': selectedevents()[j].EVENT_SUBTYPE(), 'EVENT_NAME': selectedevents()[j].EVENT_NAME() }));
                }
            }

        }

即使在销毁数据表之后，它也不会更新数据。有什么解决办法吗？

标签： javascripthtmlknockout.jsdatatablebinding

解决方案

带有淘汰赛的数据表将无法从盒子中使用。您可以查看下一个参考：https : //datatables.net/forums/discussion/31797/knockout-js-3-4-custom-binding-for-jquery-datatables-net，使用 knockoutjs 进行数据表数据绑定

在一般情况下，您需要订阅数组的更改，然后从网格中添加（或删除）项目，如下所示：

this.addItem = function (newItem) {
    if (dataTable && dataTable.row && newItem) {
        dataTable.row.add(newItem).draw(false);
    }
};

数据表在哪里：let dataTable = $('#yourTable').DataTable();

推荐阅读