Create Custom Dynamic Count in DataTable Footer

zgoforth

Link to test case: https://jsfiddle.net/BeerusDev/snbhz7ko/15/
Hello, so in my previous post I had thought that I wanted the percentage bars in the parent group rows to display the percentage of "Status" for each employee under that parent group. After completion of that and, the requirements changed. I have created a "footer" dom element, if possible, how can I have a counter display? Depending on the current day and status based off the counter I created in my rows.every function have something display under the table like so the information I added in my HTML code displaying below the table. Display each department with a <br> inbetween, and then all the total counts for each department for that day.

kthorngren

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

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

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

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

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

@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

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/