drawCallback drawing on top of existing rows

drawCallback drawing on top of existing rows

mcsmithemcsmithe Posts: 4Questions: 2Answers: 1

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
}

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,269Questions: 26Answers: 4,765

    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

  • mcsmithemcsmithe Posts: 4Questions: 2Answers: 1
    edited July 2018

    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();
                            }
    
                        }
                    });
                }
    
  • allanallan Posts: 61,650Questions: 1Answers: 10,094 Site admin

    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

  • mcsmithemcsmithe Posts: 4Questions: 2Answers: 1
    Answer ✓

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

This discussion has been closed.