DataTable Bootstrap 插件的 jQuery 函数不适用于使用 AJAX 加载的数据

Question

我有以下函数，用JSP文件中的数据填充表。

function getPositions() {
    $.ajax({
        dataType : 'json',
        contentType : 'application/json',
        url : 'positions',
        success : function(data) {
            $('#datatable').empty();   
            var result="<thead><tr><th>#</th><th>Account</th><th>Security</th><th>Quantity</th><th>status</th></tr></thead><tbody>";        
            $.each(data, function(index) {
                //var date=getDateFromFormat(data[index].settelment_Date,'EEE MMM dd h:m:s z yyyy')             
                result=result+"<tr class="info"><td>"+data[index].id + 
                "</td><td>"+data[index].id_sec_account+"</td><td>"+data[index].id_sec +
                "</td><td>"+data[index].quantity+"</td><td>"+data[index].status +
                "</td></tr>"; 
            });
            result=result+"</tbody>";
            $("#datatable").html(result);
            $("#datatable").DataTable(); //re-intializing datatable
        }
    });
}
setInterval(getPositions, 3000);

和以下 HTML 代码：

<table id="datatable" class="table table-bordered m-0">
</table>

除了这些库之外，引导模板还集成了：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- js placed at the end of the document so the pages load faster -->
<script src="${contextPath}/resources/js/jquery-2.1.4.min.js"></script>
<script src="${contextPath}/resources/js/bootstrap.min.js"></script>
<script src="${contextPath}/resources/js/metisMenu.min.js"></script>
<script src="${contextPath}/resources/js/jquery.slimscroll.min.js"></script>
<!-- Datatable js -->
<script src="${contextPath}/resources/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.bootstrap.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.buttons.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/buttons.bootstrap.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/jszip.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/pdfmake.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/vfs_fonts.js"> </script>
<script src="${contextPath}/resources/plugins/datatables/buttons.html5.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/buttons.print.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.keyTable.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.responsive.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/responsive.bootstrap.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.scroller.min.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.colVis.js"></script>
<script src="${contextPath}/resources/plugins/datatables/dataTables.fixedColumns.min.js"></script>
<!-- init -->
<script src="${contextPath}/resources/pages/jquery.datatables.init.js"></script>
<!-- App Js -->
<script src="${contextPath}/resources/js/jquery.app.js"></script>

使用 Ajax 调用，页面中不再显示搜索输入和分页按钮，我不断收到此错误：类型错误： d[j] 未定义任何人都可以帮我，我是 ajax 和 jquery 的新手，我需要搜索 jquery 函数才能工作

Answer 1

解决方案 1

您需要在重新初始化之前通过添加destroy: true选项或调用 API 方法来销毁表destroy()。

解决方案 2

您可以让 DataTables 处理 Ajax 请求并使用ajax.reload() API 方法来刷新数据。

例如：

function getPositions(){
    $("#datatable").DataTable().ajax().reload();
}
$("#datatable").DataTable({
   ajax: {
      url: "positions",
      dataSrc: "",
      cache: false
   },
   columns: [
      { title: "#", data: "id" },
      { title: "Account", data: "id_sec_account" },
      { title: "Security", data: "id_sec" },
      { title: "Quantity", data: "quantity" },
      { title: "Status", data: "status" }
   ]
});
setInterval(getPositions, 3000);