Jquery DataTable get data from row selected on click of button

Question

I am trying to have an edit button at the top of a DataTable which will pick up the value from the current selected row and append it to my url.

I have managed to get it working but not quite how I would have liked.

My Edit button which is not using the Datatable properly to get the value stored in the data table.

    $.fn.dataTable.ext.buttons.edit = {
    text: 'Edit',
    action: function () {
        var assetID;
        $("#example tr.selected").each(function (index, row) {
            assetID = ($(row).find("td:nth-child(2)").html());
        });
        if (assetID != null) {
            var url = "/Demo/Edit/" + assetID;
            window.location.href = url;
        }
    }
};

Example from Datatable site of a table with a button which shouts out the data in the current selected row. I would so much like to get my data tidier and into the datatable its self.

$(document).ready(function() {
var events = $('#events');
var table = $('#example').DataTable( {
    dom: 'Bfrtip',
    select: true,
    buttons: [
        "edit", //my edit button which works but requires external script
        { // Example button from website.
            text: 'Get selected data',
            action: function () {
                var count = table.rows( { selected: true } ).count();
              //var count = table.rows( { selected: true } ).data();
              // how do i then drill down into count to get value from column 2.
                events.prepend( '<div>'+count+' row(s) selected</div>' );
            }
        }
    ]
 } );
 } );

I have tried so many ways to try and access the object within the example from the datatables website but I just can not get the value a specific column in the selected row using their methods.

Any help would be much appreciated.

Is it necessary to use the datatables backend, or can you hack it in with jquery outside of datatables? Also, how are you getting which is 'selected', do you have an addclass method or is that built into DT? If you don't need DT, you could run something like ('.selected').each(...) for the logic and just bind it to a button. — rob
– rob, Commented Nov 10, 2016 at 20:17

Andy Donegan · Accepted Answer · 2017-04-09 19:32:06Z

1

I solved this some time ago, but just found this unanswered so thought I would post my findings if it helps anyone else.

    $.fn.dataTable.ext.buttons.edit = {
    text: 'Edit',
    action: function () {
         var tableToQuery = $("#controllerTable").DataTable();
         var selectedRow = $("#controllerTable tr.selected");
          var rowdata = tableToQuery.row(selectedRow).data();
          var assetID = rowdata.AssetID;
          if (assetID != null) {
            var url = "/Demo/Edit/" + assetID;
            window.location.href = url;
        }
    }
};

answered Apr 9, 2017 at 19:32

Andy Donegan

9351 gold badge14 silver badges37 bronze badges

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

Comments

rob · Accepted Answer · 2016-11-10 20:23:58Z

0

I'll just post a pre-emptive answer to the comment I left. If you can stand doing this without using datatables to create and bind functions, you can just do it with jquery and make your own button.

The only thing is, I'm not sure how you're getting 'selected'. Is this part of datatables (I've used DT a lot, but never their row select stuff)?

Either way, it probably applies a class to the row, and use can use that class to select.

<button type="button" id="selected_action">Do It!</button>


$('#selected_action').on('click', function(){ 
    $('selected').each(function(){ 
         parent_row = $(this).closest('tr');
         //use nth-child selectors on parent_row to get what you want
      })
})

If you do render your button inside the datatables, use this selector though:

('#dc_{{dgroup.order}}_dlist tbody').on('click', '#selected_action', function(){...});

answered Nov 10, 2016 at 20:23

rob

2,1791 gold badge25 silver badges47 bronze badges

1 Comment

Andy Donegan Over a year ago

Thanks for the feedback Rob, My Table has one button outside the table, I am using the Selected row class to identify the role and currently get the data from the 2nd column which works. I do not have buttons on each row, I am moving away from that trying to save screen space and have all buttons on top of form. I like your example and yes with a button on that row would work. I am really hoping to use the DataTable existing structure and model from the example which is so much cleaner than my code.

Collectives™ on Stack Overflow

Jquery DataTable get data from row selected on click of button

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related