如何從ajax調用加載完整的數據表？

我想填充表中的列標題和它的身體與數據，但它無法使ajax調用如果。如何從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事先與列名？

來源

2014-01-16 Rikku121

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，回去工作。

來源

2014-01-16 20:37:16 Rikku121

由於您在後端使用Java，因此您可能需要考慮JED網站上提供的許多示例，這些示例演示瞭如何在Java平臺上使用DataTables。退房：http://jed-datatables.net

來源

2014-01-17 14:23:39 Alan

如何從ajax調用加載完整的數據表？

回答

相關問題