CODEWITHSUNDEEP
javascriptjquerydatatables
Shane
Shane

Reputation: 542

How to trigger row click event with DataTables and jQuery

I am retrieving data from sql server into DataTables and needing a way to click on the table row to access more information. Here is my javascript:

$(function () {
  $("[id*=tblAccount]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "responsive": true,
    "dom": 'lBfrtip',
    "buttons": ['excel', 'print', 'pdfHtml5'],        
  });
})

<asp:GridView ID="tblAccount" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-striped">
  <Columns>
    <asp:BoundField DataField="ACCOUNT_NUMBER" HeaderText="Account Number" />
    <asp:BoundField DataField="COMPANY_NAME" HeaderText="Tax Type" />
  </Columns>
</asp:GridView>

How can I click on the table row to access another page?

Upvotes: 2

Views: 6665

Answers (2)

Jigar
Jigar

Reputation: 3281

you can write click event like this also.

$(document).on('click','table tbody tr',function(){
    //code here
});

Upvotes: 1

user3307073
user3307073

Reputation:

As far as I understood the question, you may simply attach event handler to DataTable rows, like so:

$('table tbody tr').on('click',function(){
    //retrieve your extra details
});

However, I'd rather suggest to use DataTables embedded feature to display extra details inline: https://datatables.net/examples/api/row_details.html

Upvotes: 1

Related Questions