如何在DataTable中显示加载/处理消息？

在我的应用程序中，我使用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。 检索信息可能需要一些时间，在此期间我想显示来自数据表的加载处理消息。 这样做的正确方法是什么？

Answer 1

您可以在html中使用加载程序。 位置应与表格相同。 如何在HTML中添加加载器

或消息容器：

并应用一些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" } ] }); 

有关更多信息，请参阅DataTable事件

我想这可能会对你有所帮助。

你可能会显示消息

Answer 2

您可以使用dom选项显示加载：

 $('#example').dataTable( { "dom": 'lrtip' } ); 

“r”字母与show loading元素相关。
有关更多信息， 请参阅此链接

Answer 3

从Ajax源加载数据时，您可以使用以下两个事件来处理“正在加载…”和“完成”状态。

…数据表代码……

  }).on('preXhr.dt', function ( e, settings, data ) { $(".thealert").html("Loading"); }).on( 'draw.dt', function () { $(".thealert").html("Done"); }); 

我希望有所帮助。