Getting value of selected rows

shicks22

I've been reading the post but still haven't gotten any of the following to work. Any suggestions are greatly appreciated. When I do this, which on found in forums I get live is not a function.

 $("#example tbody tr").live("click", function(event){
        var id = myTable.fnGetData(this)[0];
        displayUserInfo(UnitIdd);
    });

When I did this, it worked until I added the next 2 lines. Then it didn't run the function looks like as soon as I add the tr it doesn't hit the function.

 $('#example tbody ').click(function (e) {
               alert('test');

    });

 $('#example tbody tr').click(function (e) {
        var id = myTable.fnGetData(this)[0];
        displayUserInfo(UnitId);
        alert('test');

    });

Here is the table setup

 <div class="row">
                                <div class="col-xs-12">
                                    <table style="width:100%;" class="display table-responsive" cellspacing="0"  id="example" >
                                        <thead>
                                            <tr>
                                                <th>Unit ID</th>
                                                <th>Unit Type</th>
                                                <th>UnitTypeDesc</th>
                                                <th>SqFtg</th>
                                                <th>Bedrooms</th>
                                                <th>Bathrooms</th>
                                                <th>Market Rent</th>
                                                <th>Floor Plan</th>
                                            </tr>
                                        </thead>
                                       
                                        <tbody>
                                        </tbody>
                                    </table>

                                </div>
                            </div>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

shicks22

this may make a difference my rows are grouped.

Here is table initializecode.

 $.ajax({
            url: 'UnitAvailability.ashx',
            type: 'POST',
            dataType: 'json',
            //  data: JSON.stringify($('form').serializeObject()),
            data: JSON.stringify(test2),

            success: function (data) {
                
             var oTable =   $('#example').dataTable({
                    data: data, //this is your JSON object, which is what is showing in your post above with console.log(data)
                    "bLengthChange": false,
                    searching: false,
                    select: {
                        style:  "single"},
                    sorting: false,
                    columns: [{
                                             
                        "mDataProp": "UnitId",  "sorting" : false, 
                    }, {
                        "mDataProp": "UnitType", "sorting": false,
                    },
                    {
                        "mDataProp": "UnitTypeDesc",  "sorting" : false, "visible": false, "Targets": 2

                    },
                    {
                        "mDataProp": "CurrUseSqFtg", "sorting" : false
                    },{
                    
                        "mDataProp": "BedRooms", "sorting": false, "className": "dt-center"
                    },{
                        "mDataProp": "Baths","sorting": false, "className": "dt-center"
                    }, {
                        "mDataProp": "LastMarketRent", "sorting": false, "className": "dt-center"
                    }
                    
                    ],
                    drawCallback:  function ( settings  ) {

                        var api = this.api();

                        var rows = api.rows( {page:'current'} ).nodes();

                        var last=null;

                        api.column(2, { page: 'current' } ).data().each( function ( group, i ) {

                            if ( last !== group ) {

                                $(rows).eq( i ).before(

                                    '<tr class="group"><td colspan="7">'+group+'</td></tr>'

                                );

 

                                last = group;

                            }

                        } );
                    }
                });
                               
                    $('#rootwizard').bootstrapWizard('next');
               

                
                //console.log(data);
                //localStorage.clear(); 
                //alert(data);
            },
            error: function (errorText) {
                bootbox.alert(errorText);
            }

        })

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

btree

Hello,

hope this helps:

$('#example tbody').on( 'click', 'tr', function () {
     console.log( oTable.row( this ).data() );
   } );

Cheers
Hannes

shicks22

Thank you for the response and I do get the table but I'm not sure how to get to the individual columns like my unit ID and UniType values

btree

Could you tell me what you get printed into the console?

Cheers
Hannes

shicks22

Is there a way to get you a picture of it?

allan

Hi,

To get the individual data points you would just access them like you would a normal object - the row().data() method will return the original object that was used for the row.

For example:

$('#example tbody').on( 'click', 'tr', function () {
  var rowData = table.row( this ).data();

  var UnitId = rowData.UnitId;
  var UnitType = rowData.UnitType;
  // ... etc
} );

Note that you will also need to change: var oTable = $('#example').dataTable({ to be (note the capital D):

var table = $('#example').DataTable({

Otherwise you would run into this FAQ.

Regards,
Allan

shicks22

ok, I have it with the .DataTable, but when I look at the rowData it has a 0: object and if I click that then I see my fields.

I see rowData as an object. Not sure how to get to that data.

Sent email with picture from console.

shicks22

I changed the code to row instead of rows and that took care of the problem

thank you, love the this plugin!