jQuery 数据表重新加载答案

【问题标题】：jQuery Datatables ReloadjQuery 数据表重新加载
【发布时间】：2019-11-25 12:47:59
【问题描述】：

我在使用 Datatables 插件时遇到了用户添加行后重新加载表的问题。

我正在接收一些 JSON 数据作为 web 服务调用的一部分，在成功接收到该数据后，我正在调用一个函数，该函数将构建表行并将它们附加到数据表的 tbody，如下所示：

const buildTableRows = obj => {
  const table = document.querySelector('#participantes tbody');
  table.innerHTML = "";
  for (item of obj) {
    const tableRow = `<tr id="${item.ContactoId}" data-contributos="${item.Contributos}" data-updated="false" class="participante-row"><td><i class="material-icons">arrow_right</i>${item.Nome}</td><td class="contributos"><input value="${item.Contributos}">&nbsp&nbsp&nbsp<i class="material-icons delete">delete_forever</i></td></tr>`;
    table.insertAdjacentHTML('beforeend', tableRow);
  }
}

在此之后，我调用另一个函数负责初始化 Datatable 并将其保存到全局对象以供将来参考：

const buildDataTable = () => {
  const table = $('#participantes').DataTable({
    "pagingType": "simple_numbers",
    "pageLength": 4,
    "lengthChange": false,
    "columnDefs": [{
      "targets": 1,
      "orderable": false
    }],

    responsive: true
  });

  controlObj.datatable = table;
}

在我的 HTML 中，我有一个动态生成的选择元素，它允许用户向表中添加一行。当用户添加行时，这两个函数会再次被调用。我可以在我的数据结构中看到新行，但是如果没有重新加载页面，表格就不会刷新。我浏览了插件文档并尝试使用销毁方法，rows.add()、clear()、draw() 等。但似乎没有什么对我有用。表结构已经在 DOM 中，我只需要重新加载表。任何帮助将不胜感激

【问题讨论】：

你能把代码放在你调用 clear 和 draw 方法的地方吗？通常在这种情况下，DOM 不会在没有任何事件的情况下刷新，因此请查看是否可以使用 on() 或 delegate 调用 clear 和 draw 方法（如果您使用的是旧版本的 jquery。

标签： javascript jquery datatables

【解决方案1】：

数据表无法清除和重绘以更新表格的 HTML DOM，但必须使用 JSON 数组插入。 DOM改变后刷新，需要销毁表并重新初始化。

请参见下面的示例，其中单击添加按钮我添加了新行并重新初始化了表格，但在此之前我已将其销毁。

$(document).ready(function() {
	//Initialize the table and save it in a variable.
  var table = $('#example').DataTable();
  
  var id = 0;
  
  $('#add').on('click', function(){
     table.destroy();
     //add row to the table 
     var html = '<tr><td>' + id + '</td><td>First Name' + id + '</td><td>Last Name' + id + '</td></tr>';
     //console.log(html);
     
     $('#example tbody').append(html);
     id++;
     table = $('#example').DataTable();
  });
} );

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  
  <table id="example" class="display nowrap" style="width:100%">
		<thead>
			<tr>
		 	 <th>ID</th>
			 <th>First name</th>
			 <th>Last name</th>
			</tr>
			</thead>
     <tbody>
      <tr>
        <td>00</td>
        <td>First</td>
         <td>Last</td>
       </tr>
     </tbody>
				</table>
  Click Button to Add row : <input id="add" value="  ADD " type="button">

【讨论】：

Bhushan Kawadkar 看着您的回答，我发现了问题所在。我的数据表对象保存在我的全局 controlObj 变量中，因此为了使用 destroy 方法，我必须先将其保存到变量中。因此，在我的 Ajax 成功回调中添加一行代码解决了我的问题： const table = controlObj.datatable; table.destroy();感谢您的帮助
很高兴为您提供帮助:)

【解决方案2】：

是的，您可以使用 DataTable api。在不破坏表的情况下，您只需要一个函数。

$(document).ready(function() {
  var dt = $('#example').DataTable();
  $('#addRow').click(function () {
    var rowHtml = $("#newRow").find("tr")[0].outerHTML
    console.log(rowHtml);
    dt.row.add($(rowHtml)).draw();
  });

});

这里正在工作example

【讨论】：