footerCallBack vs rowGroup.endRender

zgoforth

Hello all!

Here is my test case: https://jsfiddle.net/BeerusDev/snbhz7ko/237/

The issue that I ran into has to do with I do not know whether to use footerCallback, or to use rowGroup.endRender. One of the options that comes with endRender is to "Show aggregate data in the footer".

The data that I want to show in the footer is, DayStatus column depending on what the current day is, it will show a count of all status for that day within the respective Department or "group" value used to rowGroup (same as Department). So for example, since today is Tuesday the column it would "pluck" from would be [5], TuesdayStatus.

I need to read through every group's Tuesday (6/8/2021) column, and create a count of all of the different status. After completion of that, I need to use either footerCallback or endRender to display the count for each group in the footer of the table, so it would show something like this:

BD: P(2), PTO(2), TW(1)
HR: P (1), TW(1)
IT: P(1), PTO(1), NR(1), TRV(1)

Some side notes:
If I use startRender, do I have to use endRender as well?
I added RAW html to my table so everyone can see how the data should be displayed.

kthorngren

One of the options that comes with endRender is to "Show aggregate data in the footer".

The last example in the rowGroup.endRender docs state this but its referring to the footer of the group no the table.

I think in your other thread with this question I mentioned that the footerCallback runs before rowGroup.endRender. I would look at clearing the footer in footerCallback and in rowGroup.endRender append your calculated data to the footer just before your return statement.

Kevin

zgoforth

@kthorngren I try implementing it after my rows.every, and I keep getting errors in my console as well as warnings? https://jsfiddle.net/BeerusDev/snbhz7ko/256/ Am I implementing them in the right place? @471 & @474 it destroys my table and doesn't post anything

kthorngren

You placement of the footerCallbaack is incorrect. You placed it inside the-option rowGroup.startRender` code. Move it outside the rowGrup config. It should be at the same level.

Kevin

zgoforth

@kthorngren that is what I thought, but I was confused by your first comment, "append your calculated data to the footer just before your return statement." because the return statement is still inside of the startRender function

kthorngren

Use jQuery methods to manipulate the footer the way you want.

Kevin

zgoforth

I get that part, I have written out how I plan on doing my calculations to append to my <tfoot>, but I am unsure how to "clear the footer" like you stated to do in your earlier response. https://jsfiddle.net/BeerusDev/snbhz7ko/260/ I cannot seem to find any documentation related to that

kthorngren

Here is one option:
http://live.datatables.net/qalovira/1/edit

Kevin

zgoforth

I created a counter to count the status for each user under each department for the current day, and my reverse lookup doesn't work it returns undefined? https://jsfiddle.net/BeerusDev/snbhz7ko/277/

Can I not call that data in my endRender??

kthorngren

The rowGroup.endRender function has 3 parameters: rows, group, level. There is not a data parameter. If you want the row data you will need to loop through the rows like in the rowGroup.startRender function.

Kevin

zgoforth

@kthorngren Gotcha, I am just now realizing that the endRender returns another row underneath my rowGroups which is not what I want. I created another example, similar to showing the example of where I want the data displayed in the table footer, now I just cannot figure out how to append it. I created a loop that creates a count of each todayStatus status and adds to the counter for each status for that department for the current day. See example here: https://jsfiddle.net/BeerusDev/03un1aLc/20/

the array is called statCount

as you can see I have the static display underneath the table displaying the status counts for each rowGroup. I also tried appending the statCount to the rowGroup itself, but all it returns is [object Object]. If there is a status say like P(0) or NR (0), I don't want it to display status that have 0 occurence, so can I have a conditional in within that return statement? That way I don't have to do statCount.P... etc.

zgoforth

@kthorngren so I guess I will just to a row foot under each row group like so https://jsfiddle.net/BeerusDev/03un1aLc/42/ , but when I implement this into my actual application, the result in the endRender function returns a undefined? So all the status say 0?

zgoforth

What could be causing this? The data structure is the same as it is in the fiddle?

kthorngren

Without seeing the problem its impossible to troubleshoot. You will need to use the browser's debugger ro console.log statements to debug your application.

Kevin

zgoforth

https://jsfiddle.net/BeerusDev/03un1aLc/52/ In my endRender I console.log(result), and it returns the expected "result". In my actual application (using the exact same Data structure), as well as the same JS. My console.log(result) in the endRender returns a result of "undefined"? I tried console logging everything and couldn't figure out why it was doing so. I am going to attach a separate fiddle that shows my actual application as well: It tells me at my var result in the endRender, "Cannot convert undefined or null to object"

Here is my actual code: https://jsfiddle.net/BeerusDev/vm41asbd/2/

kthorngren

Your second test case doesn't load data and is not executing rowGroup.endRender. Without being able to see the problem and to use debugging tools it will be near impossible to debug.

Sounds like this statement is the generating the undefined value:

var result = Object.keys(data).find((key) => typeof data[key] === "string" && data[key].startsWith(today));

You will need to work backwards to see what is in data to make sure the conditions work as expected. Might be easier to use the browser's debugger and put a breakpoint at this statement so you can see the values. This is basic Javascript troubleshooting and is not a Datatables issue.

Kevin

zgoforth

@kthorngren ... I am embarassed. If you look at the startRender as opposed to the endRender, there is one difference, small difference, but small enough to make it fail.

In startRender:

var today = moment().format("YYYY-MM-DD");

In endRender:

var today = moment().format("MM/DD/YYYY"); // "05/10/2021"