Making table rows clickable on all pages of Jquery DataTables

Question

So I've got an implementation of dataTables plugin with pagination. I want a bootstrap modal to appear when I click on any row in the table. So far I can get the modal working when I click rows on the first page. But once I go to the next page none of the rows are clickable.

This is what I have so far:

    $(document).ready(function() {
        $("tr").click(function(){
            $('#myModal').modal('show');
        });
    });

I have a feeling that this can be done using DataTables API functions but my inexperience is holding me back. What is the simplest way of doing this?

hey buddy welcome to community . Post your html as well

Shail
– Shail

2013-02-27 16:56:00 +00:00
Commented Feb 27, 2013 at 16:56 — Shail
– Shail, Commented Feb 27, 2013 at 16:56

G-Man · Accepted Answer · 2013-02-28 01:19:23Z

2

Take a look at the fnGetData example on this page

http://www.datatables.net/api

  // Row data
$(document).ready(function() {
  oTable = $('#example').dataTable();

  oTable.$('tr').click( function () {
    var data = oTable.fnGetData( this );
    // populate your modal with the data from data variable which is the data that the row contains
    //show your modal
  } );
} );

when you save the data in your modal and close it, just reload the datatable ...

You really need to look at the api documentation, everything is there .. really

edited Feb 28, 2013 at 1:19

answered Feb 27, 2013 at 16:55

G-Man

7,25118 gold badges74 silver badges101 bronze badges

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

3 Comments

Liv Over a year ago

@theBookeyMan The paginated table doesn't have all of its rows in the DOM when the page loads; only the first page of table rows is in the DOM at that point, and DataTables dynamically adds/removes rows from the DOM as you page through your table. Your click event doesn't get bound to these dynamically-created rows because they don't exist in the DOM yet. Instead, you have to tell jQuery to listen to an element that does exist and is not removed/replaced during pagination, namely the table body.

theBookeyMan Over a year ago

Ok that makes sense. If jQuery is listening to the whole tbody element, can it differentiate between the table rows? I want a separate modal for each row.

G-Man Over a year ago

well ... what is your logic for assigning a specific modal to a specific row ? what is the relationship between the table row and the modal ?

Allan Jardine · Accepted Answer · 2013-11-27 10:40:38Z

1

Use a delegated event:

$('#myTable tbody').on( 'click', 'tr', function () { ... } );

See http://datatables.net/faqs#events for more information.

answered Nov 27, 2013 at 10:40

Allan Jardine

1155 bronze badges

Comments

PREEB · Accepted Answer · 2013-11-26 21:25:19Z

Since no one actually posted the final answer, I'm following up with this because I had the same problem.

COS.coupon.table_columns_titles = new Array();
COS.coupon.table_columns_titles.push({"sTitle": "Code"});
COS.coupon.table_columns_titles.push({"sTitle": "Status"});
COS.coupon.table_columns_titles.push({"sTitle": "Date"});
COS.coupon.table_columns_titles.push({"sTitle": "","sClass": "hide"});

$j('#listcoupons').dataTable({
  "bProcessing":true,
  'bJQueryUI': true,
  'sPaginationType': 'full_numbers',
  'oLanguage': {'sSearch': 'Filter:', 'sEmptyTable': 'Processing...'},
  'aoColumns': COS.coupon.table_columns_titles,
  "sScrollX": "100%",
  "iDisplayLength": 10,
  "bAutoWidth": false
});

...

// So this is the on click. I'm referencing the tbody because it's there
// throughout all the pagination.
$j("table#listcoupons tbody").on("click", function(event) {

...

// This is how I'm refering the specific item I wanted.
// Then I do get the id from the hidden column.
  $j(event.target).closest('tr').children('td').eq(1).text()

The whole on click event looks like this ish.

$j("table#listcoupons tbody").on("click", function(event) {
    if ($j(event.target).closest('tr').children('td').eq(1).text() == 'Used') {
      // do some stuff/show a dialog
    } else {
      // do some other stuff/show a different dialog
    }
  });

Collectives™ on Stack Overflow

Making table rows clickable on all pages of Jquery DataTables

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related