jQuery DataTables Getting selected row values

Question

I am using jQuery datatable.I done it using http://www.datatables.net/examples/api/select_row.html Now I want to get selected row values ids

Script:

 $(document).ready(function() {
 var table = $('#example').DataTable();
 $('#example tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
} );

$('#button').click( function () {
    alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );

And HTML Code:

 <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Id</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>1</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
         </table>

Now I am able to get selected no.of.rows.Now I want to get selected row Ids.Can anyone guide me to achieve it.

Arun P Johny · Accepted Answer · 2015-03-22 08:40:44Z

46

You can iterate over the row data

$('#button').click(function () {
    var ids = $.map(table.rows('.selected').data(), function (item) {
        return item[0]
    });
    console.log(ids)
    alert(table.rows('.selected').data().length + ' row(s) selected');
});

Demo: Fiddle

answered Mar 22, 2015 at 8:40

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

Aravinth Kumar Over a year ago

Hi Is there any way to make some rows selected by default?

Ceparu Stefan Over a year ago

This method will get the data even if the column is hidden. How can you get the row data for visible columns?

vardha Over a year ago

Is it possible to get the corresponding tr jquery object ?

Laurence · Accepted Answer · 2017-02-15 23:17:45Z

10

More a comment than an answer - but I cannot add comments yet: Thanks for your help, the count was the easy part. Just for others that might come here. I hope that it will save you some time.

It took me a while to get the attributes from the rows and to understand how to access them from the data() Object (that the data() is an Array and the Attributes can be read by adding them with a dot and not with brackets:

$('#button').click( function () {
    for (var i = 0; i < table.rows('.selected').data().length; i++) { 
       console.log( table.rows('.selected').data()[i].attributeNameFromYourself);
    }
} );

(by the way: I get the data for my table using AJAX and JSON)

edited Feb 15, 2017 at 23:17

Laurence

60.3k22 gold badges178 silver badges215 bronze badges

answered Dec 10, 2015 at 6:54

leole

45911 silver badges19 bronze badges

4 Comments

Ghost Rider Over a year ago

I have similar requirement but in my case my ID is hidden "bVisible": false? so how can I get the hidden column value of the selected row?

leole Over a year ago

Hmm, the column should still be in the data() Object as it is just hidden. Can't you iterate over the data? I was looking for the hidden objectId in my dataset and is looked like this:

var oSelectRows = oMyTable.rows(".selected").data(); for (var inttt = 0; inttt < oSelectRows.length; inttt++) { sObjektIdListe += ""+oSelectRows[inttt].objektId;

leole Over a year ago

var oSelectRows = oMyTable.rows(".selected").data(); for (var inttt = 0; inttt < oSelectRows.length; inttt++) { console.log(" ID "+ oSelectRows[inttt].objektId); } .. how can I format this correctly?

Ghost Rider Over a year ago

can you please comment on my post? stackoverflow.com/questions/34869730/…

Ileana Martínez González · Accepted Answer · 2016-04-07 23:23:58Z

7

var table = $('#myTableId').DataTable();
var a= [];
$.each(table.rows('.myClassName').data(), function() {
a.push(this["productId"]);
});

console.log(a[0]);

answered Apr 7, 2016 at 23:23

Ileana Martínez González

911 silver badge1 bronze badge

Collectives™ on Stack Overflow

jQuery DataTables Getting selected row values

3 Answers 3

3 Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Linked

Related