Answers

• kthorngren Posts: 21,173Questions: 26Answers: 4,923

  April 2018

  Since you are creating the table dynamically are you removing it and re-adding it?

  it looks you have initialized Datatables for the first screenshot but when the row.add() is executed in the second screenshot the Datatable is again being initialized. Maybe the probalem has to do with how you are handling the dynamic table (removing and re-adding).

  Maybe you can post a test case or a link to your page.

  Also you need to add .draw() to row.add() to display the added row.

  Kevin
• Keith_H Posts: 54Questions: 19Answers: 1

  April 2018 edited April 2018

  Yes, I agree. It looks like that is what is happening. But the screen shots are literally taken before/after I've stepped through the row.add line. So, my code is not trying to rebuild the table. I'm confused

          var locHtml='';
          var locRow='';
  
          // Activate accordion
  
          var locAccToSel = $('h3','#divTaskWbsBudgetAccordion').index($("#h3TaskWbsBudgetSumm"));
          $('#divTaskWbsBudgetAccordion').accordion('option', 'active', locAccToSel);
  
          glbUrl = constRootFolder    +"/Json/TaskWbsBudgetSummByPeriod.asp"          +
                          "?qryDatabase="                 + encodeURIComponent(glbDatabase)           +
                          "&qryTask="                         + encodeURIComponent(glbLastBudgetTask);
  
          // If the datatable exists, clear it. Otherwise create it.
  
          if ( $.fn.DataTable.isDataTable('#tblTaskWbsBudgetSumm') ) {
              $('#tblTaskWbsBudgetSumm').DataTable().clear();
          } else {
              fncSetupDataTables('tblTaskWbsBudgetSumm');
          }
  
          $.getJSON(glbUrl, function(data) {
              for (var i = 0; i < data.length; i++) {
                  $('#tblTaskWbsBudgetSumm').DataTable().row.add([
                       trim(data[i].WSWBS)
                      ,trim(data[i].WSWBSDESC)
                      ,fncFormatNumber(data[i].WSTOTALHOURS,0,"Y","Y")
                      ,fncFormatNumber(data[i].WSTOTALCOSTS,0,"Y","Y")
                      ,null
                      ,null
                  ]);
              }
  
              // Adust columns and draw
              $('#tblTaskWbsBudgetSumm').DataTable().columns.adjust().draw();
          });
  

  In the fncSetupDataTables, this is the code which builds the DataTable.

              $('#tblTaskWbsBudgetSumm').dataTable({
                    "autoWidth":false
                  , "fixedColumns": {leftColumns: 2 }
                  , "footer": true
                  , "info":false
                  , "language": {"emptyTable":"No Data Found"}
                  , "JQueryUI":true
                  , "Order":[0,'asc']
                  , "ordering":true
                  , "paging":false
                  , "scrollY":"600px"
                  , "scrollX":"1800px"
                  , "scrollCollapse":true
                  , "footerCallback": function ( row, data, start, end, display ) {
                                  var api = this.api(), data,total;
  
                                  api.columns('.sum0', {}).every(function() {
                                      var locSum = this
                                          .data()
                                          .reduce(function(a, b) {return fncSumDataTableColumn(a,b);}, 0);
                                      $(this.footer()).html(fncFormatNumber(locSum,0,"Y","Y"));
                                  });
                                  api.columns('.sum2', {}).every(function() {
                                      var locSum = this
                                          .data()
                                          .reduce(function(a, b) {return fncSumDataTableColumn(a,b);}, 0);
                                      $(this.footer()).html(fncFormatNumber(locSum,2,"Y","Y"));
                                  });
                          }
              });
  

  The first screen shot is taken after the fncSetupDataTables has been run.
  The second screen shot is when the row.add is called for the first json record.

  When I step through the code, the $('#tblTaskWbsBudgetSumm').DataTable().row.add line opens the datatables.min.js librar. If I then step-out of this library back to my own .js code, that is when the table get reformatted. It's as though the datatable library is not aware that the table is already a datatable.
• Keith_H Posts: 54Questions: 19Answers: 1

  April 2018

  Actually, it's any call to datatables, not the row.add.

  After I have called my function which builds the table, datatables doesn't recognise it is a datatable.

  If I do $.fn.DataTable.isDataTable('#tblTaskWbsBudgetSumm') it returns false.

  If I do $('#tblTaskWbsBudgetSumm').DataTable().columns.adjust().draw();, it also rebuilds the table!!!
• Keith_H Posts: 54Questions: 19Answers: 1

  April 2018 Answer ✓

  Found the issue.
  Not an issue with the DataTables code but some other code (which triggered the above code) was getting fired twice. This was causing the table to get destroyed, hence Datatables building it again.
• allan Posts: 63,214Questions: 1Answers: 10,415 Site admin

  April 2018

  Thanks for posting back. Good to hear you've got it fixed.

  Allan