How to select a row in Jquery datatable

Question

I am using datatables in my application. Whenever user click on any row I want to highlight it and pick some values from selected row.

"oTableTools": {
               "sRowSelect": "single",

               "fnRowSelected": function ( node ) {
                   var s=$(node).children();
                       alert("Selected Row : " + $s[0]);
                   }

I tried sRowSelect and fnRowSelected but no luck. The row is not highlighted and neither fnRowSelected is called. Even no error on console.

Here is my complete code

  var userTable = $('#users').dataTable({
            "bPaginate": true,
            "bScrollCollapse": true,
            "iDisplayLength": 10,
            "bFilter": false,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "oLanguage": {
                "sLengthMenu": "Display _MENU_ records per page",
                "sZeroRecords": "Enter a string and click on search",
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ results",
                "sInfoEmpty": "Showing 0 to 0 of 0 results",
                "sInfoFiltered": "(filtered from _MAX_ total results)"
            },
            "aaSorting": [[ 0, "asc" ]],
            "aoColumns": [/* Name */ null,
                          /*Institution*/null,
                          /*Email*/null],
           "oTableTools": {
               "sRowSelect": "single",

               "fnRowSelected": function ( node ) {
                 alert("Clicked");
                   }
           }       
        });

Am I missing anything ?

EDIT:
Now able to highlight selected row.Added class="display" to HTML table. Still wondering why I didn't find this in datatable docs. Now looking how to collect selected values.

Daniel · Accepted Answer · 2011-11-24 09:14:29Z

7

Here is how I do it

just add this function to your page (if users is your table id)

$("#users tbody").delegate("tr", "click", function() {
var iPos = userTable.fnGetPosition( this );
if(iPos!=null){
    //couple of example on what can be done with the clicked row...
    var aData = userTable.fnGetData( iPos );//get data of the clicked row
    var iId = aData[1];//get column data of the row
    userTable.fnDeleteRow(iPos);//delete row

}

answered Nov 24, 2011 at 9:14

Daniel

37.2k10 gold badges123 silver badges208 bronze badges

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

1 Comment

Ajinkya Over a year ago

thanks for giving simple solution. I used "$(. row_selected)" to find selected row and then filtered all data by again using jquery selector.

Qantas 94 Heavy · Accepted Answer · 2014-03-24 11:57:09Z

3

When you are using fnRowSelected (i.e. when creating new tabletool) you have to use

"sRowSelect": "multi",

That will resolve the issue. Please increment my comment count if it helps. I need to have more points.

I used it in my code as follows

    pqrtbl = new TableTools(NameOfTbl, { "sRowSelect": "multi",
                                        "fnRowSelected": function ( node ) {
                                            var s= $(node).children();
                                            fnAddToSelLst(s[1].innerText); 
                                        },.......................

//column index depend upon your req.

edited Mar 24, 2014 at 11:57

Qantas 94 Heavy

16k31 gold badges74 silver badges89 bronze badges

answered Mar 24, 2014 at 11:37

psdk

312 bronze badges

Comments

Niels · Accepted Answer · 2011-11-23 13:12:32Z

0

The selected class should be, Within your function you used $s and you define var s which is not the same var.

"oTableTools": {
           "sSelectedClass": "yourclassname",
           "sRowSelect": "single",
           "fnRowSelected": function ( node ) {
               var s=$(node).children();
                   alert("Selected Row : " + s[0]);
               }
       }

answered Nov 23, 2011 at 13:12

Niels

50.1k4 gold badges68 silver badges86 bronze badges

3 Comments

Ajinkya Over a year ago

Do we need to apply our own class to sSelectedClass ?

Niels Over a year ago

I do not know, but since there was an error inside your function, the highlight might have been interrupted.

Ajinkya Over a year ago

i found your suggestion even on datatables website but dont know why its not working.

Bheru Lal Lohar · Accepted Answer · 2015-05-09 11:38:24Z

0

If you wanna select multiple row, wanna get the data of selected row for ajax purpose check this

http://jsfiddle.net/ezospama/1/

DataTable code will be as follows

$(document).ready(function() {
    var table = $('#datatable').DataTable();

    $('#datatable tbody').on( 'click', 'tr', function (){
        $(this).toggleClass('selected');
    } );

    $('#btn').click( function () {
        console.log(table.rows('.selected').data());
        alert("Check the console for selected data");
    } );
})

answered May 9, 2015 at 11:38

Bheru Lal Lohar

1,07011 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to select a row in Jquery datatable

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related