I have a table with some content and Edit button. This is the code which produces a datatable:

$(document).ready(function() {
    var params = {};
    callFunction("getAgentList", params,
        function(bSuccess, res) {
            var table = $('#example').DataTable({
                data: res,
                "columns": [
                    { "data": "ID" },
                    { "data": "Name" },
                    { "data": "AltName1" },
                    { "data": "AltName2" },
                    { "data": "AltName3" },
                    { "data": "AltName4" },
                    { "data": "AltName5" },
                    { "data": "AltName6" },
                    { "data": "AltName7" },
                    { "data": "AltName8" },
                    { "data": "AltName9" },
                    { "data": "AltName10" },
                    {
                        "orderable": false,
                        "data": null,
                        "defaultContent": '<button class="btn btn-warning" id='+res+' onclick="edit(this)">Edit</button>'
                    },
                ],
                "order": [
                    [1, 'asc']
                ]
            });
        }
    );
});

Each row should have an edit button for editing that specified row. For this I need an ID which I have in res JSON. But I am not sure how to get the ID for each of the edit buttons?

Right now if I put only res I get Object or with res.ID it is undefined. Which makes sense because I need to loop over the array...

Anyone?

EDIT

This is the res JSON:

{ AltName1: "Test1", AltName10: "", AltName2: "Test1Alt", AltName3: "Test1", AltName4: "Test1", ID: "1" }
{ AltName1: "Test2", AltName10: "", AltName2: "", AltName3: "", AltName4: "", ID: "2" }

If I set the id as <button class="btn btn-warning" id='+res[0].ID+' onclick="edit(this)">Edit</button>

Then all buttons have the same ID.

I have a table with some content and Edit button. This is the code which produces a datatable:

$(document).ready(function() {
    var params = {};
    callFunction("getAgentList", params,
        function(bSuccess, res) {
            var table = $('#example').DataTable({
                data: res,
                "columns": [
                    { "data": "ID" },
                    { "data": "Name" },
                    { "data": "AltName1" },
                    { "data": "AltName2" },
                    { "data": "AltName3" },
                    { "data": "AltName4" },
                    { "data": "AltName5" },
                    { "data": "AltName6" },
                    { "data": "AltName7" },
                    { "data": "AltName8" },
                    { "data": "AltName9" },
                    { "data": "AltName10" },
                    {
                        "orderable": false,
                        "data": null,
                        "defaultContent": '<button class="btn btn-warning" id='+res+' onclick="edit(this)">Edit</button>'
                    },
                ],
                "order": [
                    [1, 'asc']
                ]
            });
        }
    );
});

Each row should have an edit button for editing that specified row. For this I need an ID which I have in res JSON. But I am not sure how to get the ID for each of the edit buttons?

Right now if I put only res I get Object or with res.ID it is undefined. Which makes sense because I need to loop over the array...

Anyone?

EDIT

This is the res JSON:

{ AltName1: "Test1", AltName10: "", AltName2: "Test1Alt", AltName3: "Test1", AltName4: "Test1", ID: "1" }
{ AltName1: "Test2", AltName10: "", AltName2: "", AltName3: "", AltName4: "", ID: "2" }

If I set the id as <button class="btn btn-warning" id='+res[0].ID+' onclick="edit(this)">Edit</button>

Then all buttons have the same ID.

• javascript
• jquery
• json
• datatable

• have you try to dump the result of res using console.log? – david Commented Jul 11, 2018 at 9:54
• Yes. The JSON is not the problem. The problem is how to assign the ID to each of their respective Edit buttons. – harunB10 Commented Jul 11, 2018 at 9:55
• i just want to know the result. maybe there is an ID in the res – david Commented Jul 11, 2018 at 9:56
• I updated the question. – harunB10 Commented Jul 11, 2018 at 10:06

2 Answers 2

Change all the first letters to lowercase in JavaScript then use the render function of datatable:

 { "targets": 0, "data": 'iD' },
{ "targets": 1, "data": 'name' },
{ "targets": 2, "data": 'altName1' },
{ "targets": 3, "data": 'altName2' },
{ "targets": 4, "data": 'altName3' },
{ "targets": 5, "data": 'altName4' },
{ .... },
{
    "targets": 6,
    "data": 'iD',
    "render": function (data, type, row, meta) {
        return '<button class="btn btn-warning" id='+data+' onclick="edit(this)">Edit</button>'
    }
}

In the render function you can access the ID with different ways : 1 : "data" : 'iD' then you use data (as I did) 2 : "data" : 'anything you want' then you use : row.iD

Also note please that you need to add a prefix before the ID to avoid repeated Id's (I always do that)

just try this

"defaultContent": '<button class="btn btn-warning" id='+ID+' onclick="edit('+ID+')">Edit</button>'