How to retrieve table row values and manipulate them, JQquery?

user_6613742 0
Viewed 119

I have a table generated from an array with DataTables plug-in for jQuery: 

$('#example').DataTable({
  order: [3,'desc'],
  data: mergedArr,
  columns: [
    { data: 'id' },
    { data: 'name' },
    { data: 'city' },
    { data: 'summaryIncome'}
  ]
});

How can I get whole row value (4 different cells) with $('#example').on('click', 'tbody > tr', function (e) which is the exact array item.

In other words: how to bind data from array to that clicks so I can manipulate exact array item that got clicked?

I need all of that, because that array contains additional information about the item (which is in the row) and it whole info (only about 1 item) should be displayed on another HTML page.

datatables jquery-events jquery javascript
1 Answers

The jQuery DataTables provides a bunch of events that you can attach handlers to. You can attach it to rows, columns, etc.. As the docs point out you can retrieve for instance the id like in the example that you can later use to filter out the array to get the additional information.

var table = $('#example').DataTable();
 
table.on( 'select', function ( e, dt, type, indexes ) {
    if ( type === 'row' ) {
        var data = table.rows( indexes ).data().pluck( 'id' );
 
        // do something with the ID of the selected items
    }
} );

Here you have the docs of jQuery DataTables for further reading. https://datatables.net/reference/event/select

user_114564750
Related