Question

我正在使用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>

Answer 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
            });
        }
    });
}

通过Ajax调用时，Jquery Datatable无法正常工作

1 个答案: