通过Ajax调用时Jquery Datatable不起作用答案

【问题标题】：Jquery Datatable not working when call through Ajax通过Ajax调用时Jquery Datatable不起作用
【发布时间】：2017-07-28 08:53:18
【问题描述】：

我正在使用 JQuery Datatable 显示表值，我正在从 Ajax 获取值，但显示的是普通表，JQuery Datatable 不支持。如果没有 Ajax JQuery Datatable 可以正常工作，请帮助我哪里做错了。

   <script>
$(document).ready(function() {
    showModal();
    $('#example').DataTable( {
        "pagingType": "full_numbers",
        "searching": false
    } );
} );
function showModal(){
$.ajax({
    url : "<c:url value='/EndToEndServlet' />",
    data : {
    },
    type : "GET",
    success : function(data, textStatus, jqXHR) {
    console.log("ENTER INTO JSON");
    var table =' <table id="example" class="table table-striped " width="100%"> <thead>';
        table +=' <tr class="success">';
        table +='<th>Sender</th>';
        table +='<th>Recipient</th>';
        table +='<th>Mail Server</th>';
        table +='<th>Arrival Time</th>';
        table +='</tr>';
        table +='</thead>';
    for(var i=0;i<data.u.length;i++)
    {
    table += '<tbody><tr><td>'+data.u[i].sender+'</td><td>'+data.u[i].receiver+'</td><td>'+
    data.u[i].mail_server+'</td><td>'
    +data.u[i].arrival_time+'</td></tr>';
    }
    table += '<tbody>';
        table +='</table>';
        $("#resp1").html(table);                                    
    }
});
}
</script>
</div>
<div id="resp1"></div>

【问题讨论】：

ajax 是异步。您在表存在之前初始化插件
我是这个Jquery的初学者，我没有正确理解你的解决方案，你能在我的代码中修改我做错的地方吗？
插入新表html后在success回调中初始化插件
success : function(data, textStatus, jqXHR) {$('#example').DataTable( { "pagingType": "full_numbers", "searching": false } );} 抱歉打扰你，这样成功后我是否需要添加插件。
是的......在$("#resp1").html(table);之后......这就是插入表格的内容

标签： jquery ajax datatables

【解决方案1】：

当您构建数据表时，您的

<script>
$(document).ready(function() {
    showModal();
});

function showModal(){
    $.ajax({
        url: "<c:url value='/EndToEndServlet' />",
        data: {
        },
        type: "GET",
        success: function (data, textStatus, jqXHR) {
            console.log("ENTER INTO JSON");
            var table = ' <table id="example" class="table table-striped " width="100%"> <thead>';
            table += ' <tr class="success">';
            table += '<th>Sender</th>';
            table += '<th>Recipient</th>';
            table += '<th>Mail Server</th>';
            table += '<th>Arrival Time</th>';
            table += '</tr>';
            table += '</thead>';
            for (var i = 0; i < data.u.length; i++) {
                table += '<tbody><tr><td>' + data.u[i].sender + '</td><td>' + data.u[i].receiver + '</td><td>' +
                    data.u[i].mail_server + '</td><td>'
                    + data.u[i].arrival_time + '</td></tr>';
            }
            table += '<tbody>';
            table += '</table>';
            $("#resp1").html(table);

            $('#example').DataTable({
                "pagingType": "full_numbers",
                "searching": false
            });
        }
    });
}

【讨论】：

我试过这个，但在 $('#example').DataTable( { "pagingType": "full_numbers", "searching": false } );
我只编辑了 $('#example').DataTable(...您在 for 循环中创建了多个标记。
感谢它工作正常。表 += ' '+data.u[i].sender+' td> '+data.u[i].receiver+' 。表内调用show方法报错，如果取字符串，请找出错误。
尝试而不是