javascript - 如何重新加载现有dataTable()中的数据？

Question

我的表格已显示在屏幕上。如果用户添加新行或编辑现有行，则新的数据集将随 ajax 返回。检索数据后，我想清除 tbody 中的现有记录并刷新/重新加载 dataTable 。这是我的代码示例:

var statusData = {
  479664: {
    "author": "JH2423",
    "up_to": "09/30/2017",
    "status": "Closed",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Slow",
    "status_id": "479664"
  },
  479665: {
    "author": "KK2342",
    "up_to": "09/30/2017",
    "status": "Approved",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Close",
    "status_id": "479664"
  },
  479666: {
    "author": "DD7822",
    "up_to": "09/30/2017",
    "status": "Close",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Process",
    "status_id": "479666"
  },
  479667: {
    "author": "YU8343",
    "up_to": "09/30/2017",
    "status": "Declined",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Warrning",
    "status_id": "479667"
  },
  479668: {
    "author": "MMSD3",
    "up_to": "09/30/2017",
    "status": "Participating",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Approved",
    "status_id": "479668"
  }
};

buildDataTable('tbl-status', false, 2, false, true, true, []);

function buildDataTable(tblID, lengthChange, pageLen, searchBar, infoSection, pagingInfo, arrOrder) {
  var table = $("#" + tblID),
    arrSort = [];

  if (arrOrder.length) {
    arrSort.push(arrOrder); // arrOrder example: [1, "desc"] or [4, "asc"]. First element is column (first col starts from 0) and second is order by direction.
  }

  $(table).DataTable({
    lengthChange: lengthChange,
    pageLength: pageLen,
    lengthMenu: [
      [10, 15, 20, 25, 50, -1],
      [10, 15, 20, 25, 50, "All"]
    ],
    order: arrSort,
    searching: searchBar,
    info: infoSection,
    paging: pagingInfo
  });
}

$("#load").on("click", function() {
  var container = $("#status-container"), // Clear out existing table.
    table = $("<table>").addClass("table").prop("id", "tbl-status"),
    thead = $("<thead><tr><th>Reason</th><th>As Of</th><th>Up To</th><th>Author</th><th>Date</th><th>Status</th><th class='text-center'>Status</th></tr></thead>"),
    tbody = $("<tbody>");

  if ($.isEmptyObject(statusData)) {
    var tr = $('<tr><td colspan="7">No records were found.</td></tr>');
    tbody.append(tr);
  } else {
    for (key in statusData) {
      var btnName = statusData[key].current == true ? "Change" : "Edit";
      var tr = $('<tr>');
      tbody.append(tr);
      tr.append($('<td>').text(statusData[key].reason));
      tr.append($('<td>').text(statusData[key].as_of));
      tr.append($('<td>').text(statusData[key].up_to));
      tr.append($('<td>').text(statusData[key].author));
      tr.append($('<td>').text(statusData[key].date));
      tr.append($('<td>').text(statusData[key].status));
      tr.append($('<td class="text-center"><button type="button" class="btn btn-secondary btn-sm status-edit" data-recid="' + statusData[key].status_id + '" data-current="' + statusData[key].current + '"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> ' + btnName + '</button></td>'));
    }
  }
  
  $("#tbl-agency-status").remove(); // Remove existing table.
  table.append([thead, tbody]);
  container.append(table);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js"></script>
<button type="button" name="load" id="load">Load New Data</button>
<div class="card mt-4">
  <div class="card-header card-bg-custom">
    <h5 class="text-center">Status</h5>
  </div>
  <div class="card-body">
    <div class="table-responsive" id="status-container">
      <table class="table" id="tbl-status">
        <thead>
          <tr>
            <th>Reason</th>
            <th>As Of</th>
            <th>Up To</th>
            <th>Author</th>
            <th>Date</th>
            <th>Status</th>
            <th class="text-center">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Failure</td>
            <td>09/11/2019</td>
            <td>10/31/2019</td>
            <td>System</td>
            <td>10/01/2019</td>
            <td>Conditional</td>
            <td class="text-center"><button type="button" class="btn btn-secondary btn-sm status-edit" data-recid="505552" data-current="true"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Change</button></td>
          </tr>
          <tr>
            <td>Initial</td>
            <td>06/12/2017</td>
            <td>09/30/2017</td>
            <td>MM434</td>
            <td>06/23/2017</td>
            <td>Participating</td>
            <td class="text-center"><button type="button" class="btn btn-secondary btn-sm status-edit" data-recid="479664" data-current="false"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</button></td>
          </tr>
          <tr>
            <td>Reporting</td>
            <td>07/11/2019</td>
            <td>08/31/2019</td>
            <td>System</td>
            <td>10/01/2019</td>
            <td>Testing</td>
            <td class="text-center"><button type="button" class="btn btn-secondary btn-sm status-edit" data-recid="505551" data-current="true"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

由于某种原因，当前数据未被删除。我想删除所有现有数据并重新加载表中的新数据。如果有人有建议请告诉我。

Answer 1

<script> //I usually put the script section at the end of head tag

var table_1; //declare your table var here and initialize as a datatable inside document ready below.

$(document).ready(function() {

  table_1 = $('#table_1').DataTable( {
    dom: "Bfrtip",
    ajax: {
        url: "/get-data",  //path where json data will be served from. ex: get-data.php or my-data.json
        type: "POST"  //use POST to not have to deal with url encoding various characters
    },      
    serverSide: true,
    searchDelay: 2000,  // use this to throttle ajax requests when typing in search input 
    processing: true, // optional visual indicator that a search has been sent to backend
    lengthMenu: [ 10, 25, 50, 75, 100 ], // define per page limits. first value will be the default
    buttons: [
        "pageLength" // per page drop down button. i usually override/extend the default button
    ],      
    columns: [ // column definitions of json data fields
      { data: "status_id", title: "ID", width: "1%" },  // width:1% makes col width as small as possible
      { data: "status", title: "Status(hidden)", visible:false }, //visible:false hides column but allows you access to field data
      { data: "reason", title: "Reason and Status", render: function ( data, type, row ) { //render allows combining of fields into single column
        return data + ' <small>('+row.status+')</small>'; // data will be reason value. row.status is how you reference status value
      } },
      { data: "current", title: "Current", searchable:false }, //searchable: false set this field to not be used in search
      { data: null, title: "Button", render: function ( data, type, row ) { // use data:null if you need to render stuff in a column that does not necessarily need to be tied to a specific data value
        if(row.current){
          return '<button type="button" class="btn btn-secondary btn-sm status-edit" data-recid="'+ row.status_id +'" data-current="true"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Change</button>';
        }
        else{
          return '<button>Different Button</button>';
        }
      } },
    ],
    rowId: 'status_id' //sets the tr row id to the value in this column. useful for DOM and other manipulation later
  } );
}

</script>

<table id="table_1" class="table table-striped table-bordered table-sm" style="width:100%"></table>

<!-- If you define the title attributes in json column definitions above 
then you don't need to create html table headers/footers. 
Just an empty table tag will do. -->

您的 ajax url 需要返回 JSON 格式的数据和对象数组:

[
  {
    "author": "KK2342",
    "up_to": "09/30/2017",
    "status": "Approved",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Close",
    "status_id": "479664"
  },
  {
    "author": "DD7822",
    "up_to": "09/30/2017",
    "status": "Close",
    "as_of": "06/12/2017",
    "date": "06/23/2017",
    "current": false,
    "reason": "Process",
    "status_id": "479666"
  }
]

首先，创建一个包含上述内容的名为 testing.json 的文件。然后将上面示例中的 table_1 ajax-url 替换为“/your_folder_path/testing.json”。现在应该加载此数据表。

要访问数据，您只需调用:

table_1.data(); // datatables object
//OR
table_1.data().toArray(); // a simple array of objects with each rows data you can loop through

有关操作每行数据的文档可以在这里找到:https://datatables.net/reference/api/row().data()

修改数据后，您可以按照 @NawedKahn 的建议使用 table_1.draw() 或 table_1.reload() - 具体取决于您的用例。

下面的文档中可以找到大量有用的功能

使用数据表对象可以做的一切: https://datatables.net/reference/api/

所有数据表选项: https://datatables.net/reference/option/

在尝试构建任何类型的功能之前浏览这些链接，它可能已经存在。