rows.data() in console displaying different to data on screen

ianoel230982

Hi,

I have an odd issue that i'm sure someone will know the answer to but i'm obviously doing something wrong.
My issue is that when i console.log rows.data() for my table it incorrectly shows the same data (the last row i added to the table) for each of the (currently 4) entries in my table, however on the screen in my page it shows the correct data in the table. This is causing issues with my table search as it is searching the same 4 rows that rows.data() is returning (at least i think that's what is happening) and not what is on screen.

Set up is as follows. Ajax call to a sharepoint list, in the .done function i have the following to intialise my table

        //initialise table
        var payrollTable = $('#dashboardPayrollDataTable').DataTable({
            destroy: true,
            responsive: true,
            autoWidth: false,
            dom: "<'row'<'col-md-12 mb-3'B>>" + "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            lengthMenu: [
                [-1],
                ["All"]
            ],
            order: [5, 'asc'],
            rowCallback: function (row, data, displayNum, displayIndex, dataIndex) {
                if (data.Status === "Completed by Business Centre") {
                    sumHrsClaimed += parseFloat(data.ExtraHoursClaimed)
                    //console.log(sumHrsClaimed);
                }
            },

           initComplete: function () {

               //create a drop down for each table header to use with search
                var select = $('<label>Search by column:  <select class="d-inline-block w-auto form-control form-control-sm mr-2" id="payrollcolumnFilter"><option value="">-- All --</option></select></label>')
                    .insertBefore($("#dashboardPayrollDataTable_filter label"));

                 $('#dashboardPayrollDataTable_filter input[type=search]').on('keyup', function () {
                    
                    if ($("#payrollcolumnFilter").val() === "") {
                        payrollTable.search($(this).val(), true, true).draw()
                    } else {
                        payrollTable .columns($("#payrollcolumnFilter").val()).search(
                            $(this).val(), true, true).draw()
                    }
        
                    console.log(payrollTable .rows().data());
        
                    })
               
                  }
            });

After table initialisation i then perform a loop on each result from the ajax call

        //empty the table as to not get duplicate entries
        payrollTable.clear()

        $.each(data.d.results, function (index, item) {

            console.log(item);

            var hrsClaimed = "", rechargeType = "";
            var rowStructure = [
                item.PayrollNo,
                "name here",
                moment(item.ExtraDutyFrom).format("DD-MMM-YYYY"),
                hrsClaimed,
                rechargeType,
                "",
                "code here",
                "000",
                "000000"
            ]

            if (item.rechargePlain) {
                rowStructure[3] = item.extraHrsClaimedPlain;
                rowStructure[4] = item.rechargePlain;
                payrollTable.row.add(rowStructure);
            }

            if (item.rechargeTimeHalf) {
                rowStructure[3] = item.extraHrsClaimedTimeHalf;
                rowStructure[4] = item.rechargeTimeHalf;
                payrollTable.row.add(rowStructure);
            }

            if (item.rechargeDouble) {
                rowStructure[3] = item.extraHrsClaimedDouble;
                rowStructure[4] = item.rechargeDouble;
                payrollTable.row.add(rowStructure);
            }

            if (item.rechargeBH) {
                rowStructure[3] = item.extraHrsClaimedBH;
                rowStructure[4] = item.rechargeBH;
                payrollTable.row.add(rowStructure);
            }

        });
        //draw table
        payrollTable.draw();

        console.log(payrollTable.rows().data());

To explain what the above is doing, i am looping through result from the ajax query and then checking the values of some of the columns inside the sharepoint item. I then update two of the values in the 'rowStructure' array and then call payrollTable.row.add(rowStructure). After the loop has then completed i draw the table and log out the data in the table rows to the console.

As you can see from the first screen shot, each of the 4 rows have different values in the 'Hours' and 'Rate' columns as they should do, however the console.log of the table data (second image below) shows each row of the table having the same information (the last row i added to the table, in this example it is 'Bank Holiday').

This means when i try to search the table it is in essence only searching the last rows worth of data.

Hopefully there is enough info above for someone to have a go at telling me what i'm doing wrong.

Thanks in advance,

Ian.

ianoel230982

Just to add a little extra info...this is also affecting my excel export from the buttons plugin, with each of the 'Hours' and 'Rate' columns only showing the data from the last row in each of the rows in the export.

colin

There's a lot going on there. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ianoel230982

Hi,

Here is a test case i have cobbled together. I haven't been able to get the javascript console to output the data as per my screenshot of chrome dev tools above.

Main thing to look at here is the different values in the 'hours' and 'rate' columns and then search, only when searching for info in the final row does the search actually work.

http://live.datatables.net/gaheboqu/3/edit?html,js,output

I have done some more investigation into this on my development machine and have identified what i think may be the issue, but my javascript knowledge isn't strong enough to fully explain it, but i will try.

I believe it is something to do with the array i am passing into to the table with row.add(). Datatables is pointing to the last version of the array as its data source for each row, where i would have expected it to just use the values that were added in to each row at the time they were added.

If i make a copy of the array in each 'if' statement and assign it to a new variable and add that new variable into the table, then everything works as i would have expected. An example of this for one of the if statements is below

if (item.rechargePlain) {
   rowStructure[3] = item.extraHrsClaimedPlain;
   rowStructure[4] = item.rechargePlain;
   rowStructure[5] = 1;
   var plainRow = rowStructure.slice(0)
   payrollTable.row.add(plainRow);
}

I'm not sure if this is the right way of doing it, or if you could explain what exactly is happening in my initial problem and whether there are better ways to do what i need.

Thanks :-)

colin

Yep, it's exactly that. It's the nature of how objects work in JS. The slice is the way to go there.

Colin