【发布时间】:2016-12-01 09:32:56
【问题描述】:
我正在使用 datatables 与 ajax 数据请求(json 格式)和动态列加载。这是我的实际代码:
var tableData;
var tableName='#iuprTable';
$(document).ready(function (){
jQuery.ajax({
type : "GET",
url : "table/"+document.getElementById("hiddenIdCar").value,
headers: {'Content-Type': 'application/json'},
beforeSend: function() {
waitingModal.showPleaseWait();
},
success: function(data,status,xhr){
//No exception occurred
if(data.success){
tableData = data.result;
$.each(tableData.columns, function (k, colObj) {
var str = '<th data-html="true" data-toggle="tooltip" title="<b>NAME</b>:'+ colObj.parName + '<br><b>DESCRIPTION</b>:' + colObj.description + '<br><b>NOTE</b>: ' + colObj.note + '"></i>' + colObj.parName + '</th>';
$(str).appendTo(tableName+'>thead>tr');
});
} else {
waitingModal.hidePleaseWait();
notifyMessage(data.result, 'error');
}
},
error: function(xhr,status,e){
window.location.href = "/500";
}
}).complete(function() {
//initialize datatable
if ( ! $.fn.DataTable.isDataTable( tableName ) ) {
var iuprTable = $(tableName).DataTable({
scrollCollapse: true,
scrollX: true,
scrollY: '60vh',
paging: false,
"data": tableData.data,
"columns": tableData.columns,
fixedColumns: {
leftColumns: 4
},
"initComplete": function(settings){
//TOOLTIP cell
$(tableName+ ' tbody td').each( function (k, cellObj){
this.setAttribute( 'title', cellObj.innerText );
this.setAttribute( 'data-toggle', "tooltip" );
});
$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
//add timeout because otherwise user could see a too fast waiting modal
setTimeout(function(){
waitingModal.hidePleaseWait();
}, 1000);
}
});
}
else {
iuprTable.ajax.url("table/"+document.getElementById("hiddenIdCar").value).load();
}
});
});
function notifyMessage(textMessage, typeMessage){
$.bootstrapGrowl(textMessage, {
type: typeMessage, // (null, 'info', 'error', 'success')
});
}
由于我可能有 300 行和 300 列,因此使用这个数字会使页面变慢。我阅读了有关服务器端处理的信息,我想知道如何提高性能。 我找到了 2 个解决方案:
1)服务器端处理:只请求服务器显示的行
2)客户端:json返回所有行,但在特定时间只显示其中一些行,当用户滚动时,数据会更新(初始加载后页面更快)。
第一个解决方案比客户端处理最复杂,因为我应该更改 Web 服务。你对我有什么建议吗?我该如何实施这些解决方案?谢谢
【问题讨论】:
-
您似乎已经知道您的选择,所以我只能说#1 将有更多的性能优势,#2 更容易实现。
-
是的,但我不知道如何实现它们,特别是使用动态数据
标签: javascript java jquery ajax datatables