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.

score 46 · Accepted Answer · answered Mar 22 '15 at 08:40

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 '15 at 08:40

Arun P Johny

384,651
66
527
531

Hi Is there any way to make some rows selected by default? – Aravinth Kumar Mar 26 '15 at 12:59
This method will get the data even if the column is hidden. How can you get the row data for visible columns? – Ceparu Stefan May 26 '16 at 21:27
Is it possible to get the corresponding tr jquery object ? – vardha Sep 21 '17 at 16:06

score 10 · Answer 2 · edited Feb 15 '17 at 23:17

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 '17 at 23:17

Laurence

58,936
21
171
212

answered Dec 10 '15 at 06:54

leole

439
9
16

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? – Ghost Rider Jan 19 '16 at 10:02
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 Jan 19 '16 at 10:27
1

`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? – leole Jan 19 '16 at 10:30
can you please comment on my post? http://stackoverflow.com/questions/34869730/datatables-editor-filed-type-select-action-for-edit-and-remove-buttons-issues – Ghost Rider Jan 19 '16 at 10:37

score 7 · Answer 3 · answered Apr 07 '16 at 23:23

7

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

console.log(a[0]);

answered Apr 07 '16 at 23:23

Ileana Martínez González

91
1
1

jQuery DataTables Getting selected row values

3 Answers3

Linked