如何从 ajax 调用加载完整的数据表？答案

【问题标题】：How to load a complete Datatables from ajax call?如何从 ajax 调用加载完整的数据表？
【发布时间】：2014-01-16 20:05:40
【问题描述】：

我正在尝试用数据填充表格的列标题及其正文，但是如果它无法进行 ajax 调用。

<table id="datatable1" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>

我让头部和身体都空着。但是添加一些随机标题。

<thead>
    <tr>
      <th>Random column title</th>
    </tr>
</thead>

修复它。虽然我的意思是同时从 JSON 字符串中添加列名和数据并将其添加到表中，但它不会让我这样做：

如果事先建立了正确的aoColumns 和mData，我也可以从数据库中加载内容。

var oTable; //datatable reference
var start = 0; //first row's id to load
var qty = 100; //number of rows to load
var DESC = "false"; //load last row first and go down?
var type = "something";
var ajaxURL = GLOBAL_ROUTE + "api/application/datatable/fillTable/" + type + "/" + start + "/" + qty + "/" + DESC;

oTable = $('#datatable1').dataTable({
"sPaginationType" : "full_numbers",
"sDom" : '<"top"<"length"l><"search"f><"position">>rt<"bottom"<"info"i><"pages"p>>',
"bProcessing" : false,
"bServerSide" : false,
"sAjaxSource" : ajaxURL,
"bDeferRender" : true,
/*"aoColumns" : [ {
"mData" : "a"
}, {
"mData" : "b"
}, {
"mData" : "c"
}, {
"mData" : "d"
} ]*/
});
alert("asasd"); //this alert is not even reached if no header/body/aoColumns are set.

在不事先使用列名进行 ajax 调用的情况下，有什么方法可以解决这个问题？

【问题讨论】：

标签： java jquery ajax jsp datatables

【解决方案1】：

Nvm，我找到了方法，我会与你分享！

我所要做的就是改变我进行 ajax 调用的方式。我没有使用数据表的“sAjaxSource”参数来执行此操作，而是进行了自己的 jquery $.ajax() 调用，以通过 json 完全加载所有内容。

首先我改了js代码：

$.ajax({
"url" : ajaxURL,
"success" : function(json) {
    json.bDestroy = true;
    json.sPaginationType = "full_numbers";
    json.sDom = '<"top"<"length"l><"search"f><"position">>rt<"bottom"<"info"i><"pages"p>>';
    oTable = $('#datatable1').dataTable(json);
},
"dataType" : "json"
});

然后我不得不对数据表对象进行一些更改。这是java代码：

import java.util.List;

public class DataTableObject {

String sPaginationType = "";
String sDom = "";
boolean bProcessing = false;
boolean bServerSide = false;
String sEcho;
int iTotalRecords;
private List<Object> aoColumns;
List<Object> aaData;

public String getsPaginationType() {
    return sPaginationType;
}

public void setsPaginationType(String sPaginationType) {
    this.sPaginationType = sPaginationType;
}

public String getsDom() {
    return sDom;
}

public void setsDom(String sDom) {
    this.sDom = sDom;
}

public boolean isbProcessing() {
    return bProcessing;
}

public void setbProcessing(boolean bProcessing) {
    this.bProcessing = bProcessing;
}

public boolean isbServerSide() {
    return bServerSide;
}

public void setbServerSide(boolean bServerSide) {
    this.bServerSide = bServerSide;
}

public int getiTotalRecords() {
    return iTotalRecords;
}

public void setiTotalRecords(int iTotalRecords) {
    this.iTotalRecords = iTotalRecords;
}

public String getsEcho() {
    return sEcho;
}

public void setsEcho(String sEcho) {
    this.sEcho = sEcho;
}

public List<Object> getAaData() {
    return aaData;
}

public void setAaData(List<Object> aaData) {
    this.aaData = aaData;
}

public List<Object> getAoColumns() {
    return aoColumns;
}

public void setAoColumns(List<Object> aoColumns) {
    this.aoColumns = aoColumns;
}
}

所以是的，显然我必须进行外部 ajax 调用，但不是我认为我最终可能需要做的两个。希望这可能对将来的某人有所帮助:)

K，回去工作。

【讨论】：

【解决方案2】：

由于您在后端使用 Java，而不是使用变通方法，您可能需要考虑 JED 网站上提供的许多示例，这些示例演示了如何最好地在 Java 平台上使用 DataTables。签出：http://jed-datatables.net

【讨论】：