jQuery DataTable sorting doesn't updates after table data updated

Question

I can't resolve a problem with jQuery DataTable (from https://datatables.net/ ) sorting function. I create a simple example HERE .

Issue description: I have a client side sortable table with some data. By clicking Edit button in a row, I create some ajax request and update data on server, then I recieve updated data from server and rebuild table with new data. But if I'll try to sort new data in a table, sorting function of a table will use old data, before updating it. You can see this issue in example above. I replace my ajax request by simple replacing data in table.

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 .

Answer 1

I resolve this problem by myself. I should to replace html code that I transfer to the table by array of objects in data attribute of the table props. And after clicking button call a destroy() method of DataTables and reinitialize table. Also you can add "bDestroy": true to the table props. I update my example on codepen. Issue fixed.

jQuery DataTable sorting doesn't updates after table data updated

Question

1 answers

solution1
-1 ACCPTED 2020-06-04 11:42:26

jQuery DataTable sorting doesn't updates after table data updated

Question

1 answers

solution1 -1 ACCPTED 2020-06-04 11:42:26

solution1
-1 ACCPTED 2020-06-04 11:42:26