[英]jQuery DataTable + sAjaxSource + Spring ( Server-side processing ) Processing
I want to be able to create a table from dynamic information passed using a AjaxSource to DataTables, rather than having it read from the document using DataTables (a plug-in for the jQuery Javascript library) 我希望能够通过使用AjaxSource传递到DataTables的动态信息来创建表,而不是使用DataTables(jQuery Javascript库的插件)从文档中读取它。
the script: 剧本:
$(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) }
}
} );
});
the JSP 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>
If I just put the URL in the browser ${contextPath}/search/performDeviceSearchRest.do
如果我只是将URL放入浏览器
${contextPath}/search/performDeviceSearchRest.do
I got this , so everything seemd to be OK 我知道了,所以一切似乎都还可以
{"products":[{"licenceNumber":"MyDeviceNumber","productName":"MyproductName","category":"Mycategory","manufacturer":"Mymanufacturer","countries":"MyCountries","retailer":"Myretailer"}]}
But on the datatable I only see Processing... 但是在数据表上,我只看到正在处理...
http://debug.datatables.net/ewenav http://debug.datatables.net/ewenav
I am getting this error in the console: Uncaught TypeError: Cannot read property 'length' of undefined 我在控制台中收到此错误: Uncaught TypeError:无法读取未定义的属性“ length”
in the line **for ( var i=0, ien=data.length ; i<ien ; i++ ) {
** of 在
**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 );
}
In your json result, try replacing "products" with "data". 在您的json结果中,尝试将“产品”替换为“数据”。 I think DataTables wants the data in a parameter specifically named "data".
我认为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.