通过Ajax加载内容后，Bootstrap Datatable不再起作用

在有人说它是一个重复的问题之前，我知道它是。 我只是没能找到任何看起来与我类似的脚本，因为我对JavaScript和JQuery（用于php）完全不熟悉我真的不知道我在做什么。

我的数据表完美地使用php加载数据（在页面加载之前），但现在它在页面加载后加载，表已经丢失了所有的过滤和分页。

这是我的表格加载方式。

这是获取数据并将其放入表中的脚本。

  //call ajax var ajax = new XMLHttpRequest (); var method = "GET"; var url = "data_assets.php"; var asynchronous = true; setInterval(function(){ ajax.open(method, url, asynchronous); //sending ajax request ajax.send(); }, 250) //receiving response from data_assets.php ajax.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { //convert JSON back to array var data = JSON.parse(this.responseText); //console.log(data); //for debugging //html value for  var html =""; //looping through the data for (var a = 0; a < data.length; a++) { var asset_number = data[a].asset_number; var id = data[a].id; var room = data[a].room; var _location = data[a]._location; var sku = data[a].sku; var qty = data[a].qty; var _value = data[a]._value; var date = data[a].date; var po_number = data[a].po_number; var purchaced_from = data[a].purchaced_from; var notes = data[a].notes; var total = data[a].total; //storing in html html += ""; html += "" + asset_number + ""; html += "" + id + ""; html += "" + room + ""; html += "" + _location + ""; html += "" + sku + ""; html += "" + qty + ""; html += "" + _value + ""; html += "" + total + ""; html += "" + date + ""; html += "" + po_number + ""; html += "" + purchaced_from + ""; html += "" + notes + ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; html += ""; } //replacing the  document.getElementById("data").innerHTML = html; } }  

如果有人能告诉我如何在我的例子中使用它，我将非常感激，我真的想在这个网站上加载所有我的表，所以我不需要刷新保存数据（这每刷新250ms所以表中的数据始终与数据库保持同步。

更新：

对，我拿出我的250ms刷新，现在桌子工作完美！ 是谁能够帮我解决下一期的问题。 如何在将新数据输入数据库时​​刷新表，而不刷新整个页面

Answer 1

我建议用HTML或PHP（而不是Javascript）创建表结构。 然后使用ajax将数据加载到表中。 除非创建元素的事件绑定到已存在的元素（如body或document或表的某些其他父元素），否则这些DOM元素不可用于javascript。

更新：

我个人对DataTables插件没有多少经验。 因此，插件将根据从ajax返回的data对象或您指定的属性自动创建DOM元素（表结构）。 DataTables确实使用jQuery的ajax()方法来进行ajax调用，但是你不应该覆盖success回调。 在进行文档中指定的ajax调用时，有一种正确的方法可以使用它们的API。 还有一种正确的方法可以在一个间隔上重新加载数据以刷新表。

请看看这个小提琴 。

当然，必须更新ajax url, method, data属性以适合您的应用程序（这是在jsFiddle上模拟ajax调用的唯一方法。请注意，您必须具有格式正确的JSON。

Answer 2

您是否尝试在Datatables上显式设置pagelength属性？

 $('#datatable').dataTable( { "pageLength": 50 } );