Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  June 2021

  You need to create the tfoot element before you initialize Datatables otherwise it won't be recognized by Datatables. Then use the footerCallback to update the footer. See this example.

  Kevin
• zgoforth Posts: 493Questions: 98Answers: 2

  June 2021 edited June 2021

  So I looked at the example as well as the footerCallback option, and this is exactly what I want, but I cannot call the footerCallback after startRender, which is where I initiliaze the variables/values that I want to use in the footer. I copied the var result and var today into the footercallback, and nothing happens. So this is where I am stuck... https://jsfiddle.net/BeerusDev/snbhz7ko/32/
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  June 2021

  They are independent processes so you will need to calculate the values again in footerCallback. Or you can calculate the values once and store in global variables that you can access. This example shows that footercallback runs before startRender:
  http://live.datatables.net/hunukato/1/edit

  You can do your calculations in footerCallback, store in global variables then access those variables in startRender.

  Kevin
• zgoforth Posts: 493Questions: 98Answers: 2

  June 2021

  Based off of the live datatable you shared, I was able to formulate my own somehwhat similar version, I finished the conditionals, but now I am having writers block. Does this appear to be on the right track? https://jsfiddle.net/BeerusDev/snbhz7ko/64/

  footerCallback starts at ln#344

  "footerCallback": function( tfoot, myGlobal, data, start, end, display ) {
               var api = this.api(), data;
               var counter = {red2: 0, yellow2: 0, green2: 0 };
               var tot = '';
               
               var today = moment().format("MM/DD/YYYY"); // "05/10/2021"
                
               var result = Object.keys(data).find(key => typeof data[key] === 'string' && data[key].startsWith(today));
               
               var todayStatus = result ? data[result + 'Status'] : 'n/a';
               
               if (result === "Monday"){
               tot = rows
               .data()
               .pluck(3)
                      if (todayStatus === "P" || todayStatus ==="TW"){
                          counter.green2++;
                      }
                      if (todayStatus === "NR" || todayStatus ==="TRV"){
                          counter.yellow2++;
                      }
                  if (todayStatus === "PTO" || todayStatus ==="H"){
                          counter.red2++;
                      }
               }
               if (result === "Tuesday"){
               tot = rows
               .data()
               .pluck(5)
                      if (todayStatus === "P" || todayStatus ==="TW"){
                          counter.green2++;
                      }
                      if (todayStatus === "NR" || todayStatus ==="TRV"){
                          counter.yellow2++;
                      }
                  if (todayStatus === "PTO" || todayStatus ==="H"){
                          counter.red2++;
                      }
               }
               if (result === "Wednesday"){
               tot = rows
               .data()
               .pluck(7)
                      if (todayStatus === "P" || todayStatus ==="TW"){
                          counter.green2++;
                      }
                      if (todayStatus === "NR" || todayStatus ==="TRV"){
                          counter.yellow2++;
                      }
                  if (todayStatus === "PTO" || todayStatus ==="H"){
                          counter.red2++;
                      }
               }
               if (result === "Thursday"){
               tot = rows
               .data()
               .pluck(9)
                      if (todayStatus === "P" || todayStatus ==="TW"){
                          counter.green2++;
                      }
                      if (todayStatus === "NR" || todayStatus ==="TRV"){
                          counter.yellow2++;
                      }
                  if (todayStatus === "PTO" || todayStatus ==="H"){
                          counter.red2++;
                      }
               }
               if (result === "Friday"){
               tot = rows
               .data()
               .pluck(11)
                      if (todayStatus === "P" || todayStatus ==="TW"){
                          counter.green2++;
                      }
                      if (todayStatus === "NR" || todayStatus ==="TRV"){
                          counter.yellow2++;
                      }
                  if (todayStatus === "PTO" || todayStatus ==="H"){
                          counter.red2++;
                      }
               }
                      $(tfoot).find('th').eq(0).html( result + ": Result  ");
                          },
  
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  June 2021

  Thinking about this... I'm not sure I understand why you need the data from startRender for your footerCallback. Shouldn't the footCallback represent some sort of table total instead of the breakout of each rowGroup?

  Kevin
• zgoforth Posts: 493Questions: 98Answers: 2

  June 2021 edited June 2021

  @kthorngren under each group there are sub rows with values correlating to each Week Day column. I want to count the total number of each different status under each day and display them under the table for example.

  (and of course it would only apply to the current week)

  Monday: P (3), TW (0), NR (0), TRV (0), PTO (0), H (0)
  Tuesday: " ",

  Not sure why this requirement was added, but it is the last piece I need to finish this project that is taking me an unreal amount of time
• zgoforth Posts: 493Questions: 98Answers: 2

  June 2021 edited June 2021

  I also may have found a way around using the "footerCallback"

  Part 1 that doesn't work, I added a <div id="finCount"></div> within my <tfoot> tag, it appends data above the search bar?

  But, at the end of my rows.every function I implemented a jQuery append that appears as so:

  for(var i = 0; i < todayStatus.length; i++){
      $("#finCount").append(group + "<br>" + result + ": " + todayStatus[i] + "("+counter.green+")" + "<br>");
   }
  

  It works slightly, but not exactly how it should? If I add another different status for the same department, "PTO" it spams out the letters P then T then O. Instead of PTO (1)
  https://jsfiddle.net/BeerusDev/snbhz7ko/77/