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