How to get the data result from ajax for a specific row?

dataphpmysql

Hello,

I've spent over a day trying to figure this out but haven't. My goal is to have an edit link at the end of each row which would open a modal with the data of that row.

Now, I've added the 'Edit' link to each row. The next step is to 'GET' the data of that row. Here is what I have so far:

$(document).ready( function () {
  var table = $('#dtBasicExample').DataTable({
                columns: [
                    { "data": "Name" },
                    { "data": "Age" },
                    {
                        targets: 1,
                        render: function (data, type, row, meta) {
                            return '<a href="" class="editRow"  id="' + meta.row + '" value="editRow">Edit</a>';
                        }

                    }
                ]
  });

            //Submit Form AJAX Call
            $("#xform").submit(function (event) {
                event.preventDefault();
                $.ajax({
                    type: 'GET',
                    url: 'https://insertaddresshere.amazonaws.com/prod',
                    data: objectifyForm($(this).serializeArray()),
                    dataType: 'json',
                    contentType: 'application/json'
                }).done(function (result) {
                    table.clear();
                    table.rows.add(result).draw();
                    });
            });

            $('#dtBasicExample tbody').on('click', '.editRow', function () {
                event.preventDefault();
                var id = $(this).attr("id").match(/\d+/)[0];
                var data = $('#dtBasicExample').DataTable().row(this).data();
                //console.log(data[0]); //should show the Name data
                //console.log(data[1]); //should show the Age data
            });

} );

But in developer tools whenever I click Edit it says undefined. I tried adding row ID https://datatables.net/reference/option/rowId but I don't understand the example provided. How can I resolve the undefined issue? I think I just need to set the ID but not sure how to do that.

Any help would be appreciated. Thanks.

kthorngren

Maybe this example will help:
http://live.datatables.net/qemodapi/1/edit

Kevin

dataphpmysql

Hi Kevin,

That’s actually the example I followed as you can see my code is very similar to the code in that example. The only difference is that the data on that example is from the html table where in my example is from an Ajax result. I think that’s why I’m getting the ‘undefined’ error? Perhaps is the ID that I need to change? Not sure but I’m still getting the undefined error following that example. Any idea what could be? Thanks.

kthorngren

Oh, didn't look that closely. The example is using arrays but you are using objects, ie, columns.data. Instead of data[0] you need to use data.Name.

Kevin

dataphpmysql

Thanks for the help!! It works now. One last thing, I'm using the below code to get the ID of that row and added a console.log() to see the ID numbers but the results are a random number i.e. the first row shows ID 5 (instead of 0 or 1) the second row shows 3, etc. These numbers are coming from meta.row, do you know why it isn't coming in order?

$(document).ready( function () {
  var table = $('#dtBasicExample').DataTable({
                columns: [
                    { "data": "Name" },
                    { "data": "Age" },
                    {
                        targets: 1,
                        render: function (data, type, row, meta) {
                            return '<a href="" class="editRow"  id="' + meta.row + '" value="editRow">Edit</a>';
                        }

                    }
                ]
  });

            $('#dtBasicExample tbody').on('click', '.editRow', function () {
                event.preventDefault();
                var id = $(this).attr("id").match(/\d+/)[0];
                console.log(id); //id shows random number like 5, 2, etc, but not in order
                var data = $('#dtBasicExample').DataTable().row(this).data();
                console.log(data.Name);
                console.log(data.Age);
            });

Do you know if perhaps is better to implement rowID into the rows and do you know how to do it? I read the doc but don't understand how to implement it https://datatables.net/reference/option/rowId.

kthorngren

meta.row, aka row().index(), is the original order of the data as it comes into Datatables. You can see this in my example. Tiger Nixon is the first data point. If you console.log the id variable and click on the button for Tiger you will see the ID is 0 and Garret Winters is 1, etc. Tiger will always have the row index of 0 even if sorting or searching changes the order.

Do you need to know the actual table row number you clicked on? If so you could use something like the row index example.

The rowId, in general, needs to be a column with unique IDs. There are some documented restrictions. Here is an example using rowId:
http://live.datatables.net/vuxataza/1/edit

Kevin

dataphpmysql

Thanks Kevin,

It looks like for what I need now, (which is transferring data from the row into the modal after clicking Edit link), the ID using meta.row like you provided works great. I'll look into the other options if I need some other functionalities. Thanks again!