尝试加载70000条记录时,数据表失败



我有一个jQuerydatatable,它可以提供超过70K条记录。

不幸的是,datatable无法加载任何超过20K的记录。

我正在尝试使用选项deferRender来解决问题,但没有成功。

$.ajax({
url: 'api/portmbs.php',
type: 'POST',
data: data,
dataType: 'html',
success: function(data, textStatus, jqXHR)
{
var jsonObject = JSON.parse(data);
var table = $('#example1').DataTable({
"data": jsonObject,
"columns": [
{"data": "column_one"},
{"data": "column_two"},
// more columns...
],
"iDisplayLength": 25,
"order": [[ 1, "desc" ]],
"paging": true,
"scrollY": 550,
"scrollX": true,
"bDestroy": true,
"stateSave": true,
"autoWidth": true,
"deferRender": true
});
},
error: function(jqHHR, textStatus, errorThrown)
{
$('#loadingDiv').hide();
$('#errorModal').modal('show');
$('.message').text('There was an error conducting your search. Please try again.');
return false;       
console.log('fail: '+ errorThrown);
}
});

使用以上内容,会触发一个错误,并显示相应的错误消息:

加载资源失败:服务器的响应状态为500(内部服务器错误(

当我向生成数据的查询添加10000限制时,datatable将成功呈现。

要使deferRender选项成功运行并推迟70K记录的加载,我缺少什么?

我不久前也遇到过类似的问题,在我的案例中,服务器错误是由PHPmemory_limit变量溢出引起的。默认值(在php.ini内(是128MB,因此您获得的这些70000+ rows数据有可能溢出该限制。

作为临时解决方法,您可以尝试增加此限制—更改服务器上php.ini文件的配置,然后重新启动服务器。我目前的配置是:

; Maximum amount of memory a script may consume (128MB)
; http://php.net/memory-limit
; XXX: Increased from 128 to 512.
memory_limit = 512M

你可以在下一个链接上阅读更多关于这方面的信息:

(1(http://php.net/manual/en/ini.core.php#ini.memory-限制

(2(https://haydenjames.io/understanding-php-memory_limit/

正如我所说,以前的解决方案应该被视为只是一种变通方法。这类问题的真正解决方案是使用服务器端处理,在表上的每一次分页、排序或过滤时,都会向服务器发布一个帖子来处理这些操作,并再次获得呈现datatable的新数据。DataTables上有一个服务器端处理的实现。例如,请在下一个链接上查看:

(1(服务器端处理类示例

$(document).ready(function() {
$('#example').DataTable( {
serverSide: true,
ordering: false,
searching: false,
ajax: function ( data, callback, settings ) {
var out = [];
for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
out.push( [ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5' ] );
}
setTimeout( function () {
callback( {
draw: data.draw,
data: out,
recordsTotal: 5000000,
recordsFiltered: 5000000
} );
}, 50 );
},
scrollY: 200,
scroller: {
loadingIndicator: true
},
stateSave: true
} );
} );

最新更新