数据引导程序插件的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调用，搜索输入和分页按钮不再显示在页面中，我不断收到此错误： TypeError：d [j]未定义 任何人都可以帮助我，我是ajax和jquery的新手，我需要搜索jquery函数才能工作

Answer 1

解决方案1 ​​

您需要在重新注册之前销毁表格，方法是添加destroy: true选项或调用destroy() API方法。

解决方案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);