通过 Ajax 使用来自 servlet 的数据加载 JQuery 数据表答案

【问题标题】：Load the JQuery Datatables with the data from the servlet via Ajax通过 Ajax 使用来自 servlet 的数据加载 JQuery 数据表
【发布时间】：2013-07-07 01:52:47
【问题描述】：

我在这里寻找过类似的帖子，但找不到符合我要求的帖子。我正在尝试显示 jquery 数据表。在 UI 上，我获取日期参数并对 servlet 进行 ajax 调用。 servlet 将处理并返回 json 数据。一旦我得到数据，我想在数据表中显示结果。但是我的代码不起作用。我是数据表的新手。这是我的代码：

function fetchLogs(){
$.ajax({
    type: "POST",
    url: "LogsServlet",
    data: 'FromDate='+from+'&'+'ToDate='+to,
    dataType: 'json',
    success: function(data){
        /*$('#logs').dataTable({
            "aaData": data,
            "aoColumns": [{ "mDataProp": "Executed_AT" }, { "mDataProp": "User_Name"}]
        });*/
        $('#logs').dataTable( {
            "bProcessing": true,
            "sAjaxSource": data
        } );

    }

});

}

servlet返回的json数据：

[{"user_id":"rams.orvz@xyz.com","executed_at":"Jul 8, 2013 7:22:59 PM"}]

【问题讨论】：

标签： java jquery ajax servlets datatables

【解决方案1】：

找到解决方案。这是解决它的代码：

 function fetchLogs(){
$.ajax({
    type: "POST",
    url: "LogsServlet",
    data: 'FromDate='+from+'&'+'ToDate='+to,
    dataType: 'json',
    success: AjaxFetchDataSucceeded,
    error: AjaxFetchDataFailed

});

}

function AjaxFetchDataSucceeded(result) {
    if (result != "[]") {
        //var dataTab = $.parseJSON(result);
        $('#logs').dataTable({
            "bProcessing": true,
            "aaData": result,
            //important  -- headers of the json
            "aoColumns": [{ "mDataProp": "user_id" }, { "mDataProp": "executed_at" }],
            "sPaginationType": "full_numbers",
            "aaSorting": [[0, "asc"]],
            "bJQueryUI": true

        });
    }
}

function AjaxFetchDataFailed(result) {
    alert(result.status + ' ' + result.statusText);
}

但是，显示的数据表在外观上完全是尴尬的。

【讨论】：