Get ID in datatables when the corresponding button is clicked

289
November 21, 2016, at 7:54 PM

I am using Datatables and Jquery to build my application. I am fetching data into the table from my server. The table has 3 columns, each representing consignmentID, ConsignmentName and a button "Add". I want to retrieve the consigmentID of the corresponding Add button clicked.

var oTable = $('#viewAllConsignments').DataTable( {
                "aaSorting": [ ], // Prevent initial sorting
                "sAjaxSource": "getConsignment",
                "sAjaxDataProp": "",
                "sServerMethod" : "POST",
                "bProcessing": true,
                 "aoColumns": [
                        { "mData": "consignment.consignmentId"},
                        { "mData": "consignment.consignmentName" },
                        { "mData": "consignment.consignmentId",
                          "bSortable": false, 
                          "mRender": function(data, type, full) {
                                    return '<button type="button" id="btn-packets" class="btn btn-success btn-packets">Add</button>';
                            }
                        }
                ]

        });
Answer 1

Dont ever use duplicated id's - id="btn-packets" - you are fine with the .btn-packets class.

Why not store consignment.consignmentId (==data) as a data-attribute on the button itself?

...
mRender: function(data, type, full) {
   return '<button data-consignmentId="'+data+'" class="btn btn-success btn-packets">Add</button>';
}
...

onclick :

$('#viewAllConsignments').on('click', '.btn-packets', function() {
    alert($(this).data('consignmentid'));
})

Good old attr() can be used too :

return '<button consignmentId="'+data+'" class="btn btn-success btn-packets">Add</button>';
alert($(this).attr('consignmentId'));

Save the whole JSON for the row as data :

return "<button data-row='"+JSON.stringify(full)+"' class='btn btn-success btn-packets'>Add</button>";

Notice I have swapped the usage of ' and ". stringify returns a string using ".

now data('row') holds the entire object you can access right away in the click handler. Even if data is inserted as string, it will return the valid JSON :

alert($(this).data('row').consignment.consignmentName);

It would be easier if we could assign the data without stringify(); data() is meant to be able to hold objects - but something like $(result).data('row', full) will not work since the rendered button not is part of the DOM at the time it is returned from mRender, it is just a plain string.

Answer 2

Try like this:Add DATA Attribute to the ADD button.

for each row while constructing the data add data-consignmentId="database value" to your button and on button click do this:$(this).data(consignmentId);//required id

READ ALSO
Javascript, update div html with dynamic content over time without set interval

Javascript, update div html with dynamic content over time without set interval

I know how to do it with setInterval, wondering if there is a cleaner way of doing it. I would want the content to be loaded right when the content is updated.

307
How to change the date range picker&#39;s date format?

How to change the date range picker's date format?

I am using this bootstrap date range picker. I want to change date format date to dd/MMM/yyyy:.

350
ASPMVC Attempting to display Dialog to add new item to Combobox

ASPMVC Attempting to display Dialog to add new item to Combobox

I am attempting to follow this:[nnn]http://www. asp.

247
re-index button element value after removing table row with jquery

re-index button element value after removing table row with jquery

My problem is start when i remove the selected table row successfully but the button value in the last td on each table row is cannot update (reindex) with the javascript at the end. Please provide some solution on this.

275