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

2023-12-14

在我的应用程序中我正在使用数据表网

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


您可以在 html 中使用加载程序。位置应与表相同。如何在 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"          } 
            ]
     });

了解更多请通过数据表事件

我想这可能对你有帮助。

您可能会显示消息

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 DataTable 中显示加载/处理消息? 的相关文章