jquery dataTables - how to extract row data onclick event

Question

I'm trying to familiarize myself with the jquery dataTables plug in: http://www.datatables.net/manual/server-side#Sent-parameters

What's Working

I have json data being returned from the server to my client and the table is being populated.

What's Not working

I need to be able to capture the data in a given row, when the row is selected / clicked on by the end user.

Here's my code: http://jsfiddle.net/e3nk137y/1515/

$("#users tr").click(function(){
  alert($(this).find("pID").val());
   });

The above javascript is what I've been playing around with. Trouble is that the ajax call happens automagically and I'm not the one creating the rows in the table. Ultimately, I need to be able to grab some of the fields in each row, in addition to the ID / pID

What I've tried so far

Besides the playing with the javascript code, I've also been reviewing this: http://datatables.net/examples/api/select_single_row.html But in that example, all the data is defined client side, so it makes it easy to specify either an id or a class for each table row

Any suggestions would be appreciated.

Aru · Accepted Answer · 2015-05-12 13:06:16Z

20

Hope this is what you r looking for

Html

<table id="users" class="display" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th id="pID">ID</th>
            <th>Name</th>
            <th>Code</th>
            <th>Available</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Code</th>
            <th>Available</th>
        </tr>
    </tfoot>
</table>

Script

$(document).ready(function () {   
    var table = $('#users').DataTable();
    $('#users tbody').on('click', 'tr', function () {
        console.log(table.row(this).data());
    });
});

Fiddle Link

answered May 12, 2015 at 13:06

Aru

1,8701 gold badge13 silver badges15 bronze badges

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

2 Comments

Aru Over a year ago

Glad it helped you :)

Aru Over a year ago

@Matthias check the browser console for the result/output. It is working fine.

Raidri · Accepted Answer · 2018-05-25 09:46:11Z

3

Errors in your fiddle:

You use datatables method call but have only added the bootstrap-table library.
Ajax is not working in the fiddle, but we can ignore that for now.
To bind the event also for table rows which will be inserted by datatables, bind it to the table and use tr as selector in the on() method.
If you want to find() an element by id you need to use the #. But beware that you can't use ids if there are multiple elements, use a class instead.
Table cells have no value, so use text() instead of val().

Updated function:

$("#users").on('click', 'tr', function () {
    alert($(this).find("#pID").text());
});

Updated fiddle

edited May 25, 2018 at 9:46

answered May 12, 2015 at 13:04

Raidri

17.7k11 gold badges69 silver badges70 bronze badges

Comments

Md Masud · Accepted Answer · 2021-10-21 10:43:27Z

1

var Table = $('#CheckinTable').DataTable( {
 // optional info
});


$('#CheckinTable tbody').on('click', 'tr', function () {
  let bookingData = Table.row(this).data();
  // do your staff
 });

edited Oct 21, 2021 at 10:43

answered Oct 20, 2021 at 13:52

Md Masud

2,7511 gold badge24 silver badges16 bronze badges

Collectives™ on Stack Overflow

jquery dataTables - how to extract row data onclick event

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related