drawCallback drawing on top of existing rows

mcsmithe

Hi everyone,

I am encountering a bug for drawcallback. It draws a sum row as expected on most of the entries, however, sometimes it seems to draw over the regular rows. My data is consistent all around and most entries look great, it's only some entries liek this that seem to look strange.

My function is as follows:

 if (last !== affId_offId) {
                        $(rows).eq(i).before(
                            '<tr class="group" style="border: 1px solid #777"><td colspan="1" style="background-color:#BEBEBE"><button class="showDetails" id="button-' + affId_offId + '">&#9658;</button></td><td colspan="1" style="background-color:#BEBEBE">' + startDateSelect.slice(5) + ' to ' + endDateSelect.slice(5) + '</td><td colspan="1" style="background-color:#BEBEBE">' + affId_offId + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].cost + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].revenue + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].profit + '</td><td colspan="1" style="background-color:#BEBEBE" class="profitMarginSummary">' + summary[affId_offId].profitMargin + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].cpc + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].rpc + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].rpa + '<td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].name + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].offer + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].affiliate + '</td></tr>'
                        );

                        last = affId_offId; // other processes like the summing itself follow later
}

kthorngren

Its hard to see what is going on with the snippet of code provided. Can you post a link to your page or a test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mcsmithe

I can't share the page since it has confidential information unless I share that privately. I will try for a test case though my code is pretty extensive (over 200 lines) since I have accumulators and everything in there, so honestly I don't think I can produce a test case here either. Here's a little more other than some styling I had in there

            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({
                    page: 'all'
                }).nodes();
                var last = null;

                // // This is a subtotal reducer so each id has its total
                const summary = merged.reduce(function (val, acc) {
                    if (!val[acc.affId_offId]) val[acc.affId_offId] = {
                        affId_offId: acc.affId_offId,
                        cost: 0,
                        revenue: 0,
                        profit: 0,
                        profitMargin: 0,
                        cpc: 0,
                        rpc: 0,
                        rpa: 0,
                    };
                    val[acc.affId_offId].cost += Number(acc.cost);
                    val[acc.affId_offId].revenue += Number(acc.revenue);
                    val[acc.affId_offId].profit += Number(acc.profit);
                    val[acc.affId_offId].profitMargin += Number(acc.profitMargin);
                    val[acc.affId_offId].cpc += Number(acc.cpc);
                    val[acc.affId_offId].rpc += Number(acc.rpc);
                    val[acc.affId_offId].rpa += Number(acc.rpa);
                    val[acc.affId_offId].name = acc.name;
                    val[acc.affId_offId].affiliate = acc.affiliate;
                    val[acc.affId_offId].offer = acc.offer;

                    return val; // Maybe write a filter afterwards to hide zero values so it's prettier to look at.  There are filters, but datatables is a pain in the ass to implement this with
                }, {});
                // console.log(summary); // returns the array with the accumulators and ids as keys

                const summaryArr = [];
                for (var entry in summary) {
                    // console.log(sum[entry]);
                    summaryArr.push(summary[entry]);
                }

                // //SUMMARY HEADER
                api.column(groupColumn, {
                    page: 'all'
                }).data().each(function (affId_offId, i) {
                    if (last !== affId_offId) {
                        $(rows).eq(i).before(
                            '<tr class="group" style="border: 1px solid #777"><td colspan="1" style="background-color:#BEBEBE"><button class="showDetails" id="button-' + affId_offId + '">&#9658;</button></td><td colspan="1" style="background-color:#BEBEBE">' + startDateSelect.slice(5) + ' to ' + endDateSelect.slice(5) + '</td><td colspan="1" style="background-color:#BEBEBE">' + affId_offId + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].cost + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].revenue + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].profit + '</td><td colspan="1" style="background-color:#BEBEBE" class="profitMarginSummary">' + summary[affId_offId].profitMargin + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].cpc + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].rpc + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].rpa + '<td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].name + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].offer + '</td><td colspan="1" style="background-color:#BEBEBE">' + summary[affId_offId].affiliate + '</td></tr>'
                        );

                        last = affId_offId;
                        // Hide the summary if it's the same day
                        if (startDateSelect === endDateSelect) {
                            $('.group').css("display", "none");
                            // No need to hide the summary if no summary up for the same day
                        }

                        // Getting ready to animate the buttons
                        var thisButton = "button-" + last;

                        // Shutting off previous click events
                        $('#report-table tbody').off('click', "#" + thisButton);

                        // Turning on the click event to show more details
                        $("#report-table tbody").on("click", "#" + thisButton, function () {
                            // console.log(thisButton);
                            // Only show the first button of each group to hide the summary
                            if ($('#' + thisButton).css("transform") == 'none') {
                                $('#' + thisButton).css("transform", "rotate(90deg)");
                            } else {
                                $('#' + thisButton).css("transform", "");
                            }

                            // // Show the details for more than one day and enable the buttons to show/hide the details
                            $(this).parent().parent().nextUntil(".group").toggle("slow");
                            
                        });

                        if (startDateSelect !== endDateSelect) {
                            // $('.detail-row').hide();
                            // $('.group').hide();
                        }

                    }
                });
            }

allan

I don't immediately see anything wrong there, so I'm afraid we would need a test case as Kevin mentioned. We don't need your actual page, so there is no need for us to see the confidential information, we just need a minimal, complete and verifiable example. http://live.datatables.net , JSfiddle, CodePen or others can be used to create a test case if you can't host it yourself.

Allan

mcsmithe

Hey all, it was actually having to use a fixed ordering rather than the regular one. Thanks for the help though.