Answers

• gh2m Posts: 63Questions: 16Answers: 0

  July 2020

  Maybe I shouldn't have used [code]...[/code] around my code. It looks strange. But I guess it is still readable.
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  July 2020

  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 Posts: 63Questions: 16Answers: 0

  July 2020

  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 Posts: 15,240Questions: 1Answers: 2,599

  July 2020

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

  Colin
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  July 2020

  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