row click event not fired after pagination in bootstrap datatable

Question

i am using bootstrap datatable for pagination.I also added click event to each row.But the click event fired only in the first page. It does not work after sorting or pagination.Here is my php code to display data

        <table id='tblCustomers' class='table table-bordered table-striped'>
                                 <thead>
                                  <tr>
                                              <th>Customer id</th>
                                               <th>Company</th>
                                              <th>First name</th>
                                              <th>Last name</th>
                                              <th>Email</th>
                                              <th>Last login</th>
                                              <th>No Of logins </th>
                                   </tr>
                                  </thead>
                                 <tbody>";
                                foreach ($this->result as $row) {
                                    echo "<tr>
                                            <td>{$row['customerid']} </td>
                                            <td>{$row['company']} </td>
                                            <td>{$row['firstname']} </td>
                                            <td>{$row['lastname']} </td>
                                            <td>{$row['email']} </td>
                                            <td>{$row['lastlogin']} </td>
                                            <td>{$row['count']}</td>
                                          </tr>";

                                     }
                                  echo "</tbody></table>";

and the jquery code is

                        $(function () {
                         $("#tblCustomers").dataTable();
                         $("#tblCustomers tr").click(function(){
                         alert($(this).find('td:first').text());
                         });
                       });

Nishit Maheta · Accepted Answer · 2015-03-18 10:19:21Z

7

change code to below . this is call Event Delegation

    $(function () {
           $("#tblCustomers").dataTable();
           $(document).on('click',"#tblCustomers tr",function(){
                     alert($(this).find('td:first').text());
           });
    });

edited Mar 18, 2015 at 10:19

answered Mar 18, 2015 at 10:08

Nishit Maheta

6,0413 gold badges19 silver badges32 bronze badges

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

Comments

Thor Jacobsen · Accepted Answer · 2015-03-18 10:07:48Z

0

Try using $("#tblCustomers tr").on('click', function(){...} instead of the regular click..

answered Mar 18, 2015 at 10:07

Thor Jacobsen

8,8992 gold badges29 silver badges26 bronze badges

Comments

varun kumar · Accepted Answer · 2015-03-18 11:07:26Z

0

Please note that, even the search and filter won't take the row click event. if you are providing the events on row like click,double-click.

On filter and On search make sure you call that function which has all your custom scripts.

answered Mar 18, 2015 at 11:07

varun kumar

1151 silver badge13 bronze badges

Collectives™ on Stack Overflow

row click event not fired after pagination in bootstrap datatable

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related