在我的应用程序中,我正在使用datatables.net
var ticketHistoryDataTable = $('#ticketHistoryData').DataTable({
paging: false,
data: [],
searching: false,
columns: [
{ data: 'ticket_id' , title: "Ticket Number" },
{ data: 'transactiondate' , title: "Date" }
]
} );
我正在按照以下方式向表中添加数据:
var result_data = [{
ticket_id : '' ,
transactiondate : ''
},{
ticket_id : '' ,
transactiondate : ''
}];
ticketHistoryDataTable.clear().draw();
ticketHistoryDataTable.rows.add(result_data).draw();
result_data本身来自jquery ajax get call to server。检索信息可能需要一些时间,在此期间我想显示来自数据表的加载处理消息。这样做的正确方法是什么?
答案 0 :(得分:4)
您可以在html中使用加载程序。位置应与表格相同。 How to add a loader in HTML
或
消息容器:<div id="MessageContainer"></div>
和
应用一些CSS样式以获得良好的外观和感觉。
$('#ticketHistoryData')
.on( 'draw.dt', function () {
console.log( 'Loading' );
//Here show the loader.
// $("#MessageContainer").html("Your Message while loading");
} )
.on( 'init.dt', function () {
console.log( 'Loaded' );
//Here hide the loader.
// $("#MessageContainer").html("Your Message while load Complete");
} )
.DataTable({
paging: false,
data: [],
searching: false,
columns: [
{ data: 'ticket_id' , title: "Ticket Number" },
{ data: 'transactiondate' , title: "Date" }
]
});
有关详情,请浏览Events of DataTable
我认为这可能会对你有所帮助。
您可能会显示消息
答案 1 :(得分:2)
您可以使用dom
选项来显示加载:
$('#example').dataTable( {
"dom": 'lrtip'
} );
“r”字母与show loading元素有关 有关详细信息refer to this link
答案 2 :(得分:2)
从Ajax源加载数据时,您可以使用以下两个事件来处理“正在加载...”和“完成”状态。
...数据表代码......
}).on('preXhr.dt', function ( e, settings, data ) {
$(".thealert").html("Loading");
}).on( 'draw.dt', function () {
$(".thealert").html("Done");
});
我希望有所帮助。
答案 3 :(得分:0)
有一种方法可以在jQuery DataTable上显示加载消息:
$('#myTableId').DataTable({
"language": {
'loadingRecords': 'Processing...',
},
// 'processing': true,
.
.
})
在上面的代码中,//被标记为'processing':true,如果没有,将有两条加载消息。
您也可以这样:
$('#myTableId').DataTable({
"language": {
'loadingRecords': ' ',
'processing': 'Loading...'
},
您还可以显示加载微调器:
$('#myTableId').DataTable({
"language": {
"loadingRecords": "<span class='fa-stack fa-lg'>\n\
<i class='fa fa-spinner fa-spin fa-stack-2x fa-fw'></i>\n\
</span> Processing ..."
},