如何在DataTable中显示加载/处理消息? [英] How can i display loading/processing message inside DataTable?

查看:1102
本文介绍了如何在DataTable中显示加载/处理消息?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的应用程序中,我使用的是 datatables.net

In my application i am using datatables.net

var ticketHistoryDataTable = $('#ticketHistoryData').DataTable({ 
        paging: false,
        data: [],
        searching: false,
        columns: [
            { data: 'ticket_id'         ,   title: "Ticket Number" },
            { data: 'transactiondate'   ,   title: "Date"          } 
        ]
} );

我以下列方式向数据表添加数据:

I am adding data to the table following way:

    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。检索信息可能需要一些时间,在此期间我希望从datatable显示加载处理消息。什么是正确的方法?

result_data itself comes from jquery ajax get call to server. Retrieving the information may take some time, during which i want to display loading-processing message from datatable. What is correct way of doing this?

推荐答案

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

You can use a loader in your html. Position should be same as the table. How to add a loader in HTML


消息容器:< div id =MessageContainer>< / div>

应用一些

or Message container: <div id="MessageContainer"></div> and Apply some CSS styles for good look and feel.

     $('#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的事件

For more go through Events of DataTable

我认为这可能有助于您。

I think this might help you.

您可能会显示消息

这篇关于如何在DataTable中显示加载/处理消息?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆