Get data from Selected Rows

nthacker

I need some assistance getting data from the table so I can then use it in the code behind to display on the page.

These are the settings I have for my dataTable:

$.extend( true, $.fn.dataTable.defaults, { 
"ordering": false,
"stateSave": false,
"serverside":   false,
"autoWidth": false
});
$(document).ready(function () { 
  $('#TableTraining').DataTable( {
scrollResize: true,
scrollCollapse: true,
scrollY: false,
scrollX: true,
select: 'single',
"language": {
"lengthMenu": '<select>'+'<option value="10">10 per page</option>'+'<option value="20">20 per page</option>'+'<option value="30">30 per page</option>'+'<option value="40">40 per page</option>'+'<option value="50">50 per page</option>'+ '<option value="-1">All</option>'+'</select>',
"info": "_PAGE_ of _PAGES_",
"paginate": {
"previous": "<<",
"next": ">>" 
 }
 }
});

I have this code that I received from another forum to try and pull the data.

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

Whenever my alert triggers from the row click it pulls the css and div information, not just the data. I need it just to return the value of the ID that is loaded in the table.

This is the table. I have simplified it for the example.

<table id="TableTraining" class="display scrollTable" style="width: 100%; text-align: left !important; font-size: 14px;">
    <thead>
        <tr style="font-size: 12px;">
            <th class="">Id
            </th>
            <th class="">Team Member
            </th>
            <th class="">UserName/Email
            </th>
        </tr>
    </thead>
    <tbody id="Tbody1" clientidmode="Static" runat="server">
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>

                <tr id="row" class="<%# Eval("divRowClass").ToString()%>">
                    <td class="stylRow5Perc">
                        <asp:Label ID="lblCounter" Text='<%# Eval("EmployeeId").ToString()%>' runat="server"></asp:Label>
                    </td>
                    <td class="stylRow20Perc">
                        <asp:Label ID="lblTeamMember" Text='<%# Eval("TeamMember").ToString()%>' runat="server"></asp:Label>
                    </td>
                    <td class="stylRow20Perc">
                        <asp:Label ID="lblUserNameEmail" Text='<%# Eval("UserNameEmail").ToString()%>' runat="server"></asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </tbody>
</table>

If possible, I would also need help with allowing the data I pull from the selected row to be used server side, so I can pass in the employee id to get all the other employee's information to display elsewhere on the page. Otherwise, I really need to know how to get the data of the Employee Id that is loaded in the selected row. Thanks for any help!

colin

Hi @nthacker ,

You can just use

$(this).attr('id')

as in this example here.

Cheers,

Colin

nthacker

@colin Unfortunately, that is returning the tr's id, "row". Not the value of the ID in the td label "lblCounter" where the Employee Id is stored as text in the label. That is the ID I want to return. Sorry if that wasn't clear in my question. Thanks!

kthorngren

I'm not familiar with asp.net but I suspect that this:

                    <td class="stylRow5Perc">
                        <asp:Label ID="lblCounter" Text='<%# Eval("EmployeeId").ToString()%>' runat="server"></asp:Label>
                    </td>

Results in an HTMLlabel that looks something like this:

<label id="lblCounter">Employeeid</label>

Where is Employeeid is the employee id you want to get. You have array based data so you will need to access the Id column using array notation. You could use jQuery to get the label's text value, something like this might work:

        $('#TableTraining tbody').on('click', 'tr', function () {
        var rowData = table.row(this).data()[0];  // column 0
        alert( $(rowData).text() );
        });

Basically you will need to extract the text from the label using you favorite technique.

Kevin

nthacker

@kthorngren That answered my question! Thanks! Now I just need to figure out how to use it in tandem with the code behind.