jQuery 表數據更新后數據表排序不更新

Question

我無法解決 jQuery DataTable （來自https://datatables.net/ ）排序 function 的問題。 我在HERE創建了一個簡單的示例。

問題描述：我有一個帶有一些數據的客戶端可排序表。 通過連續單擊編輯按鈕，我創建了一些 ajax 請求並更新服務器上的數據，然后我從服務器接收更新的數據並使用新數據重建表。 但是，如果我嘗試對表中的新數據進行排序，則在更新之前對表的 function 進行排序將使用舊數據。 您可以在上面的示例中看到此問題。 我通過簡單地替換表中的數據來替換我的 ajax 請求。

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DataTables</title>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
</head>
<body>

  <table class="table table-bordered table-condensed table-striped" id="campaigns_table">
    <thead>
      <tr>
        <th>Campaign</th>
        <th>Subject</th>
        <th>Subsubject</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>

</body>

JS：

function updateCampaignsTable(data, init = false) {
  const tableProps = {
    paging: false,
    "bAutoWidth": false,
    fixedHeader: false,
    "serverSide": false,
    "columns": [
      {"data": 'name', "searchable": true, "bSortable": true },
      {"data": 'subject_id', "searchable": true, "bSortable": true },
      {"data": 'subsubject_id', "searchable": true, "bSortable": true },
      {"data": 'actions', "searchable": false, "bSortable": false },

    ],
    "initComplete": function(settings, json) {
                console.log( 'DataTables has finished its initialisation.' );
                const recordsCount = settings.fnRecordsDisplay();
    },
  };

  let tableRows = ``;
  data.forEach((item) => {
    tableRows += `<tr>
      <td>${item.name}</td>
      <td>${item.subject_id}</td>
      <td>${item.subsubject_id}</td>
      <td>${item.actions}</td>
      </tr>`
  }
                       );
  var table = $(`#campaigns_table`);
  $(table).children(`tbody`).empty().append(tableRows);
  if (init) {
    table.DataTable(tableProps);
  }
}

const firstData = [
    {
      name: `campaign #1 Name`,
      subject_id: `campaign #1 subjectID`,
      subsubject_id: `campaign #1 subsubjectID`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    },
    {
      name: `campaign #2 Name`,
      subject_id: `campaign #2 subjectID`,
      subsubject_id: `campaign #2 subsubjectID`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    },
    {
      name: `campaign #3 Name`,
      subject_id: `campaign #3 subjectID`,
      subsubject_id: `campaign #3 subsubjectID`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    },
    {
      name: `campaign #4 Name`,
      subject_id: `campaign #4 subjectID`,
      subsubject_id: `campaign #4 subsubjectID`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    },
    {
      name: `campaign #5 Name`,
      subject_id: ``,
      subsubject_id: ``,
      actions: `<button type="button" class="action-btn">Edit</button>`
    }
]

const secondData = [
    {
      name: `campaign #1 Name`,
      subject_id: `11111111111111111`,
      subsubject_id: `11111111111111111`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    },
    {
      name: `campaign #2 Name`,
      subject_id: `222222222222222`,
      subsubject_id: `22222222222222`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    },
    {
      name: `campaign #3 Name`,
      subject_id: `33333333333333333`,
      subsubject_id: `333333333333333333`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    },
    {
      name: `campaign #4 Name`,
      subject_id: `444444444444444444`,
      subsubject_id: `4444444444444`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    },
    {
      name: `campaign #5 Name`,
      subject_id: `555555555555`,
      subsubject_id: `55555555555555`,
      actions: `<button type="button" class="action-btn">Edit</button>`
    }
]

$(document).ready(function(){
  updateCampaignsTable(firstData, `init`);

  $(`.action-btn`).on(`click`, () => {
    updateCampaignsTable(secondData);
  });
});

例子。

Answer 1

我自己解決了這個問題。 我應該替換我通過表格道具的數據屬性中的對象數組傳輸到表格的 html 代碼。 單擊按鈕后，調用 DataTables 的 destroy() 方法並重新初始化表。 您也可以將"bDestroy": true添加到表格道具中。 我在 codepen 上更新了我的示例。 問題已修復。

jQuery 表數據更新后數據表排序不更新

問題描述

1 個解決方案

解決方案1
-1 已采納 2020-06-04 11:42:26

jQuery 表數據更新后數據表排序不更新

問題描述

1 個解決方案

解決方案1 -1 已采納 2020-06-04 11:42:26

解決方案1
-1 已采納 2020-06-04 11:42:26