Get datatable's row data on button click

Question

i have a problem with this project.

I'm trying to create a crud menu, when hitting the Edit button the row's data will be transferred to a bootstrap modal and from there user will be able to edit.

Problem : right now when hitting the row - the modal opens perfectly with the row's data - but when i try to change it to get the data by pressing on the button ('.edit_btn') ,it dos't works. i know that the button doesn't holds any data - so that's why it's probably don't work....

 $('#example tbody').on('click',  '.edit_btn', function () { // works only 
    when replacing 'tr' with  '.edit_btn' //
    var data_row = table.row(this).data(); // row's data

    $("#myModal").modal('show');

    $('#myModal').on('shown.bs.modal', function() {

        $('#name').val(data_row.id);
        $('#type').val(data_row.type);
        $('#camp').html(data_row.campaign);

    });

});

Thanks

davidkonrad · Accepted Answer · 2017-04-16 10:14:41Z

18

I would use a delegated event handler tbody .edit_btn and grab the row through closest('tr') :

$('#example').on('click', 'tbody .edit_btn', function () {
    var data_row = table.row($(this).closest('tr')).data();
    ...
})

forked plunkr -> https://plnkr.co/edit/58vkkp3M6d68uuMknXus?p=preview

answered Apr 16, 2017 at 10:14

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

davidkonrad Over a year ago

@RoyBarOn The delegation just to be sure it works on all pages (on a paginated table) and closest() to be sure the right <tr> is used for data-retrieval.

RoyBarOn Over a year ago

davidkonrad - Thanks

RoyBarOn · Accepted Answer · 2017-04-16 10:13:50Z

4

Got it...

$('#example tbody').on('click', '.edit_btn', function () {

     var data_row = table.row( $(this).parents('tr') ).data(); // here is the change
    $("#myModal").modal('show');

    $('#myModal').on('shown.bs.modal', function() {

       $('#name').val(data_row.id);
        $('#type').val(data_row.type);
        $('#camp').html(data_row.campaign);

    });

});

answered Apr 16, 2017 at 10:13

RoyBarOn

1,0093 gold badges30 silver badges77 bronze badges

1 Comment

Squidward Tentacles Over a year ago

If you set DataTable to responsive and open in small device, this method will fail, because column will reduced in different parents.

Collectives™ on Stack Overflow

Get datatable's row data on button click

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related