[英]jQuery DataTable + sAjaxSource + Spring ( Server-side processing ) Processing
我希望能夠通過使用AjaxSource傳遞到DataTables的動態信息來創建表,而不是使用DataTables(jQuery Javascript庫的插件)從文檔中讀取它。
劇本:
$(document).ready(function() {
var oTable;
var oTable = $('#yourTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"${contextPath}/search/performDeviceSearchRest.do", // json datasource
type: "get", // method , by default get
dataType: 'json',
error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown) }
}
} );
});
JSP
<table cellpadding="0" cellspacing="0" border="0" class="display normaltable" id="yourTable">
<thead>
<tr>
<th ><fmt:message key="license.number"/></th>
<th ><fmt:message key="Product.name" /></th>
<th ><fmt:message key="list.category" /></th>
<th ><fmt:message key="list.manufacturer"/></th>
<th ><fmt:message key="list.country"/></th>
<th ><fmt:message key="list.retailer"/></th>
</tr>
<tr class="thefilters">
<td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
<td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
<td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
<td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
<td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
<td ><input name="" size="" maxlength="" id="" value="" type="text"/></td>
</tr>
</thead>
<tfoot>
<tr>
<th><fmt:message key="license.number"/></th>
<th><fmt:message key="Product.name"/></th>
<th><fmt:message key="list.category" /></th>
<th><fmt:message key="list.manufacturer"/></th>
<th><fmt:message key="list.country"/></th>
<th><fmt:message key="list.retailer"/></th>
</tr>
</tfoot>
</table>
如果我只是將URL放入瀏覽器${contextPath}/search/performDeviceSearchRest.do
我知道了,所以一切似乎都還可以
{"products":[{"licenceNumber":"MyDeviceNumber","productName":"MyproductName","category":"Mycategory","manufacturer":"Mymanufacturer","countries":"MyCountries","retailer":"Myretailer"}]}
但是在數據表上,我只看到正在處理...
http://debug.datatables.net/ewenav
我在控制台中收到此錯誤: Uncaught TypeError:無法讀取未定義的屬性“ length”
在**for ( var i=0, ien=data.length ; i<ien ; i++ ) {
**行中
/**
* Data the data from the server (nuking the old) and redraw the table
* @param {object} oSettings dataTables settings object
* @param {object} json json data return from the server.
* @param {string} json.sEcho Tracking flag for DataTables to match requests
* @param {int} json.iTotalRecords Number of records in the data set, not accounting for filtering
* @param {int} json.iTotalDisplayRecords Number of records in the data set, accounting for filtering
* @param {array} json.aaData The data to display on this page
* @param {string} [json.sColumns] Column ordering (sName, comma separated)
* @memberof DataTable#oApi
*/
function _fnAjaxUpdateDraw ( settings, json )
{
// v1.10 uses camelCase variables, while 1.9 uses Hungarian notation.
// Support both
var compat = function ( old, modern ) {
return json[old] !== undefined ? json[old] : json[modern];
};
var draw = compat( 'sEcho', 'draw' );
var recordsTotal = compat( 'iTotalRecords', 'recordsTotal' );
var rocordsFiltered = compat( 'iTotalDisplayRecords', 'recordsFiltered' );
if ( draw ) {
// Protect against out of sequence returns
if ( draw*1 < settings.iDraw ) {
return;
}
settings.iDraw = draw * 1;
}
_fnClearTable( settings );
settings._iRecordsTotal = parseInt(recordsTotal, 10);
settings._iRecordsDisplay = parseInt(rocordsFiltered, 10);
var data = _fnAjaxDataSrc( settings, json );
for ( var i=0, ien=data.length ; i<ien ; i++ ) {
_fnAddData( settings, data[i] );
}
settings.aiDisplay = settings.aiDisplayMaster.slice();
settings.bAjaxDataGet = false;
_fnDraw( settings );
if ( ! settings._bInitComplete ) {
_fnInitComplete( settings, json );
}
settings.bAjaxDataGet = true;
_fnProcessingDisplay( settings, false );
}
在您的json結果中,嘗試將“產品”替換為“數據”。 我認為DataTables希望將數據存儲在專門名為“ data”的參數中。
{"products":[{"licenceNumber":"MyDeviceNumber","productName":"MyproductName","category":"Mycategory","manufacturer":"Mymanufacturer","countries":"MyCountries","retailer":"Myretailer"}]}
{"data":[{"licenceNumber":"MyDeviceNumber","productName":"MyproductName","category":"Mycategory","manufacturer":"Mymanufacturer","countries":"MyCountries","retailer":"Myretailer"}]}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.