挖空数据表附加值(不重新加载）

Knockout data table appending values (not reloading)

本文关键字：新加载 加载 数据表 附加值      更新时间：2023-09-26

我正在接受我的淘汰赛.js DataTabls。所以我有一个在页面加载时正确加载的数据表（即附加：函数方法），我有多个按钮（全部显示、允许、不允许）根据条件显示表。现在，当我单击这些按钮时，表格会再次重新加载，即如果我有 5 条记录，单击按钮后我将看到 10 （5+5）。这只发生一次（即它停留在 10 并且没有达到 15,20......

这是我的视图模型原始方法： 

$.ajax({
    type: "GET",
    url: "/api/listusers/GetContractorList",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    headers: appsecurity.getSecurityHeaders(),
    success: function (result) {
        if (result != null) {
            var mappedContractorList = $.map(result, function (item) {
                return new GKContractorObj(item);
            });
            viewmodel.ContractorList(mappedContractorList);
            tableObj= $('#tblContractorsList').DataTable()
        }
    },
    failure: function (error) {
        logger.logError('Failed to contractor list', 'Error', null, true);
    }
});

单击"全部显示"按钮时的 Ajax 调用 

$.ajax({
    type: "GET",
    url: "/api/listusers/GetContractorList",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    headers: appsecurity.getSecurityHeaders(),
    success: function (result) {
        if (result != null) {
            var mappedContractorList = $.map(result, function (item) {
                return new GKContractorObj(item);
            });
            viewmodel.ContractorList(mappedContractorList);
            tableObj = $('#tblContractorsList').DataTable();

        }
    },
    failure: function (error) {
        logger.logError('Failed to contractor list', 'Error', null, true);
    }
});

观点 ：

<div class="divListGKContractor">
  <div class="tab-pane fade in active" id="listContractor">
    <div class="row">
      <div class="">
          <table id="tblContractorsList" class="display table table-condensed table-bordered table-responsive" cellspacing="0">
            <thead><tr><td>Contractor Details</td><td>Details</td></tr></thead>
            <tbody data-bind="foreach: ContractorList">
              <tr>
                <td data-bind="text: Contractor_Name"></td>
                <td>               
                   <a title="List_Contractor" class="btn-borderless widget-button" data-bind="click: $root.listContractorDetails">
                    <i class="fa fa-edit text-success"></i></a>
                </td>
              </tr>
            </tbody>
          </table>
       </div>
    </div>
  </div>
</div>

我认为控制器调用没有任何问题。只是我不确定如何刷新/重新加载表。

任何帮助/建议？

此代码在加载时清除表并解决了问题。

//Clear table on load 
viewmodel.ContractorList([]);
tableObj.destroy();
$('#tblContractorsList tbody tr').remove();
相关文章：