How do I get a value from the NEXT row in a rendered column function?

How do I get a value from the NEXT row in a rendered column function?

mstiver2019mstiver2019 Posts: 7Questions: 3Answers: 0

I have a server-side datatable which includes a rendered column that creates a button on each row. I then define a JS function in that button that gets called when it's clicked, passing "row.part" successfully.
My problem is, I now want to pass a second parameter that includes the part in the NEXT row. How would I do this? Currently I've tried the below, "(row+1).part", which brings back "undefined". I'm assuming I need to find the index of my clicked row, add one to that, and then I can get the corresponding part.. Just not sure how to do that!

var table = $('#table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "?handler=loadListJson",
                type: "POST",
                dataType: "json",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("RequestVerificationToken",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                }
            },
            columns: [
                { data: "part", orderable: false },
                { data: "desc", orderable: false },
                { data: "reason" },
                { data: null, orderable: false,
                    render: function (data, type, row) {
                        return "<a class='btn btn-primary btn-xs' onclick=LoadPartUpdate('" + row.part + '\',\'' + (row+1).part + "'); >\
                            <i class='fa fa-edit' aria-hidden='true' style='color:#ffffff; font-size:13px;'></i></a>";
                    }
                }
            ],
            responsive: true,
            paging: true,
            pageLength: 10
        });

Answers

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947

    columns.render won't work for this as the next row hasn't been rendered yet :smile:

    My suggestion would be to use drawCallback. Use something like column().data() to get all the data for the part. Then use rows().every() to iterate all the rows and build the buttons using the current and next part from the column().data() array. With server side processing the only rows available for this are the rows on the current page display. If you have page length of 10 rows then the last row displayed wouldn't have access to the 11th row for the part.

    Kevin

  • mstiver2019mstiver2019 Posts: 7Questions: 3Answers: 0

    Ha, that would make sense. Thanks Kevin for explaining. Sadly, this solution won't work as I need it to be able to access that 11th row. As a result, my only choice seems to be to find the next part in my server-side processing file. I'm sure it's possible this way, just need to figure out how to do it. Thanks again!

  • kthorngrenkthorngren Posts: 21,303Questions: 26Answers: 4,947

    Depending on how much data you have you might be able to turn off server side processing.

    Or you can return additional data that contains a list of the parts then use ajax.json() to get the part array.

    Kevin

This discussion has been closed.