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

I am trying to fill the table with both column headers and its body with data, however it fails to make the ajax call if.

我试图用列标题填充表格及其数据的主体,但是如果它无法进行ajax调用。

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

I leave both the head and body empty. But adding some random title.

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

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

fixes it. Though I mean to add both the column names and the data at the same time from a JSON string and add it to the table it won't let me :

解决它。虽然我的意思是从JSON字符串同时添加列名和数据并将其添加到表中,但它不会让我:

I am also able to load stuff from the database no problem if the proper aoColumns and mData are established beforehand.

如果事先建立了正确的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.

Any way around this without making an ajax call beforehand with the column names?

没有事先用列名称进行ajax调用吗?

2 个解决方案

#1

Nvm, I found the way and I'll share it with ya!

Nvm,我找到了方法,我将与你分享!

All I had to do was change the way I was making the ajax call. Instead of using the datatables "sAjaxSource" parameter to do it, I made my own jquery $.ajax() call to load absolutely everything via json.

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

First I changed the js code:

首先我更改了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"
});

Then I had to make some changes on the data table object. Here's the java code :

然后我不得不对数据表对象进行一些更改。这是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;
}
}

So yeah, apparently I had to make an outside ajax call, but not two as I thought I might have to do in the end. Hope this might be of help to someone in the future :)

所以,是的,显然我必须在外面进行ajax调用,但不是两个,因为我认为最终可能要做。希望这对未来的人有所帮助:)

K, back to work.

K,回去工作。

#2

Since you're using Java on the back end, instead of playing with workarounds, you might want to consider the many examples provided on the JED website that demonstrate how best to work with DataTables on the Java platform. Check out: http://jed-datatables.net

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

#1