更新表格数据后，jQuery DataTable 排序不会更新答案

【问题标题】：jQuery DataTable sorting doesn't updates after table data updated更新表格数据后，jQuery DataTable 排序不会更新
【发布时间】：2020-06-04 10:31:46
【问题描述】：

我无法解决 jQuery DataTable（来自https://datatables.net/）排序功能的问题。我创建了一个简单的例子HERE。

问题描述：我有一个带有一些数据的客户端可排序表。通过连续单击编辑按钮，我创建了一些 ajax 请求并在服务器上更新数据，然后我从服务器接收更新的数据并用新数据重建表。但是，如果我尝试对表中的新数据进行排序，则表的排序功能将在更新之前使用旧数据。您可以在上面的示例中看到此问题。我通过简单地替换表中的数据来替换我的 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);
  });
});

Example.

【问题讨论】：

标签： javascript jquery sorting datatable

【解决方案1】：

我自己解决了这个问题。我应该用表格道具的数据属性中的对象数组替换我传输到表格的html代码。单击按钮后，调用 DataTables 的 destroy() 方法并重新初始化表。您也可以将"bDestroy": true 添加到表格道具中。我在 codepen 上更新了我的示例。问题已修复。

【讨论】：