How to show hourglass when copy data from one DataTable to another?

gh2m

I have following javascript which works fine. The issue is that I have to wait to about 7 to 8 seconds to see destinationTable populated. I would like to show users hourglass cursor while waiting. How can that be done?

function selectAll(sourceTable, destinationTable, type){
    //add all (from sourceTable) to destinationTable
    sourceTable.rows().eq(0).each( function ( index ) {
        var row = sourceTable.row( index );
     
        var data = row.data();
        destinationTable.row.add(data);
    } );
    destinationTable.draw();
}

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

gh2m

Maybe I shouldn't have used [code]...[/code] around my code. It looks strange. But I guess it is still readable.

kthorngren

Maybe I shouldn't have used [code]...[/code] around my code

Use Markdown as noted when you are entering your post:

I use blockui.js during a long process. Use $.blockUI(); before the long process followed by $.unblockUI(); when the process is complete.

Wonder why the process takes 7 to 8 seconds. Is there a why to improve that time?

Kevin

gh2m

My table has about 8000 rows and 5 columns. Even if I make a local file and run it from local as C:\Users...., it still take that much time. I have two datatables and the layout are identical. All I am doing it using my javascript function above to copy all the data from source table to destination. Maybe there is a better/faster way to do it?

Following is the table definition and data source, pretty basic:

$(document).ready(function() {
   var dataSet = [
    ["r1c1","r1c2","r1c3","r1c4","r1c5"],
        ["r2c1","r2c2","r2c3","r2c4","r2c5"],
        .....
     ];
        
    var dataSet1 = [
            
    ];

var tblsource = $('#source').DataTable( {
            data: dataSet,
            columns: [
                { title: "Column1" },
                { title: "Column2 },
                { title: "Column3" },
                { title: "Column4" },
                { title: "Column5" }
            ],
        "deferRender": true,
        "orderClasses": false
        } );
        var tbldestination = $('#destination').DataTable( {
            data: dataSet1,
            columns: [
                { title: "Column1" },
                { title: "Column2 },
                { title: "Column3" },
                { title: "Column4" },
                { title: "Column5" }
            ],
        "deferRender": true,
        "orderClasses": false
        } );
       ......
} );

Also how do I structure $.blockUI() so that it show hourglass while copying/rendering is happening and stop when processing is complete?

I tried following before my copying function but it is not working. My placement of function or blockUI must be off. I have not used this before. Any help is appreciated.

$.blockUI({ 
        message: '<h1>Auto-Unblock!</h1>',
        timeout: 20000
    }); 

colin

This section of the FAQ should help, it discusses various techniques to improve performance,

Colin

kthorngren

I think this is the code you are using to copy. See if this works:

function selectAll(sourceTable, destinationTable, type){
    $.blockUI();
    //add all (from sourceTable) to destinationTable
    sourceTable.rows().eq(0).each( function ( index ) {
        var row = sourceTable.row( index );
      
        var data = row.data();
        destinationTable.row.add(data);
    } );
    destinationTable.draw();
    $.unblockUI();
}

You can add the message if you wish but the timeout shouldn't be needed.

You might be able to reduce the number of statements in the loop with rows().every(). Something like this:

sourceTable.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
    destinationTable.row.add( this.data() );
} );

Not sure if this will help the speed much.

Kevin