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

【问题标题】：How can i display loading/processing message inside DataTable?如何在 DataTable 中显示加载/处理消息？
【发布时间】：2016-06-06 06:38:08
【问题描述】：

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

【问题讨论】：

正确的方法是使用数据表 ajax 而不是外部 ajax
是的，我明白。就我而言，如果有一个 javascript 对象正在返回数据。在这种情况下，我无法从数据表进行 ajax 调用，但仍需要显示加载消息。
然后使用beforeSend ajax 事件显示一个loding 消息并在success 方法中隐藏它
是的，我明白这一点。在 beforeSend 上，我想显示来自数据表本身的加载/处理消息。这样做的正确方法是什么？
从数据表 ajax 加载数据时显示的消息相同，而不是外部 ajax？

标签： javascript jquery datatables

【解决方案1】：

您可以在 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

我认为这可能会对您有所帮助。

你可能会显示消息

【讨论】：

【解决方案2】：

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

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

“r”字母与显示加载元素有关。
欲了解更多信息refer to this link

【讨论】：

【解决方案3】：

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

...数据表代码...

    }).on('preXhr.dt', function ( e, settings, data ) {

        $(".thealert").html("Loading");

    }).on( 'draw.dt', function () {

        $(".thealert").html("Done");

    });

希望对你有帮助。

【讨论】：

【解决方案4】：

有办法在 jQuery DataTable 上显示加载消息：

$('#myTableId').DataTable({
        "language": {
            'loadingRecords': 'Processing...',
        },

  // 'processing': true,
.
.
})

在上面的代码中，//'processing': true，被注释掉，否则会有两条加载消息。

你也可以这样做：

$('#myTableId').DataTable({
            "language": {
                'loadingRecords': '&nbsp;',
                '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>&emsp;Processing ..."
                },

【讨论】：

【解决方案5】：

答案很简单它使用内置语言关键字

oTable = $('#UserTable').DataTable({
         "processing": true, // for show progress bar,
         retrieve: true,
         "language": {
                    'processing': '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span>'
         },

【讨论】：