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 选项或调用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);