最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can i display loadingprocessing message inside DataTable? - Stack Overflow

programmeradmin3浏览0评论

In my application i am using datatables

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 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?

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 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?

Share Improve this question asked Jun 6, 2016 at 6:38 Tornike ShavishviliTornike Shavishvili 1,3546 gold badges19 silver badges40 bronze badges 10
  • the corect way will be to use datatables ajax not an external ajax – madalinivascu Commented Jun 6, 2016 at 6:43
  • Yes i understand. In my case, if there is a javascript object that is returning the data. I can not make in this case ajax call from datatable but still need to display loading message. – Tornike Shavishvili Commented Jun 6, 2016 at 6:52
  • then use the beforeSend ajax event to display a loding message and hide it in the success method – madalinivascu Commented Jun 6, 2016 at 6:55
  • Yes i understand that. On beforeSend I wand to show loading/processing message from datatable itself. What is correct way of doing this? – Tornike Shavishvili Commented Jun 6, 2016 at 7:02
  • 1 Same message it shows when loading data from datatables ajax, not an external ajax? – Tornike Shavishvili Commented Jun 6, 2016 at 7:32
 |  Show 5 more comments

5 Answers 5

Reset to default 6

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

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"          } 
            ]
     });

For more go through Events of DataTable

I think this might help you.

You might show message

You can use dom option to show loading:

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

"r" letter is related to show loading element.
For more information refer to this link

When loading data from an Ajax source, you can use the following two events to handle the "Loading..." and "Done" states.

... data table code ...

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

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

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

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

    }); 

I hope that helps.

There is way the to display loading message on jQuery DataTable:

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

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

On above code, // 'processing': true, is commented out, if not there will be two loading messages.

You also can do this way:

$('#myTableId').DataTable({
            "language": {
                'loadingRecords': '&nbsp;',
                'processing': 'Loading...'
            },

You can also show the loading spinner:

$('#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 ..."
                },

The answer is simple it uses build in language keyword

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>'
         },
发布评论

评论列表(0)

  1. 暂无评论