Trigger click event on Datatables row with jquery by the row's data attribute

Question

I'm using Datatables 1.10.7. I have a table initialized with Datatables like so:

var user_table = $("#user_table").DataTable({
    "bInfo":false,
    "bLengthChange":false
});

I've written code that triggers a series of events when someone clicks a row in that table like this:

$("#user_table tbody").on('click', 'tr', function () {
    // Series of actions here
});

My #user_table has rows like this:

<tr data-user-id="4287">
    <td>Jane Smith</td>
    <td>Senior VP</td>
</tr>
<tr data-user-id="2442">
    <td>John Doe</td>
    <td>HR Manager</td>
</tr>

On page load, I want to trigger the click event on rows with the data-user-id matching a list of dynamically generated user-id's. For the sake of this question, how would I trigger the click event on the row with a data-user-id of 4287? Keep in mind, because of Datatables pagination, the row may not exist in the DOM - only in the Datatables variables - so I need a solution that utilizes the Datatables API.

Is the purpose of this simply to select the rows that match the dynamic user ids? — jonmrich
– jonmrich, Commented Jul 10, 2015 at 14:00
The purpose is to trigger the click event on the rows that match the dynamic list of user-id's so that the series of actions from the click event is performed on those rows when you come to the page. — Nick Petrie
– Nick Petrie, Commented Jul 10, 2015 at 14:33
Would waiting until the table is fully loaded and then triggering the actions work? — jonmrich
– jonmrich, Commented Jul 10, 2015 at 14:39
Yes, the table will be fully loaded and initialized as a DataTable. Then I set the click event (which works fine using the page) and then I want to trigger the click event on certain rows. — Nick Petrie
– Nick Petrie, Commented Jul 10, 2015 at 15:42

Sudharsan S · Accepted Answer · 2015-07-10 13:23:57Z

1

Use event delegation like

$("#user_table tbody").on('click', 'tr[data-user-id="4287"]', function () {
    // Series of actions here
}).click(); // trigger the click

answered Jul 10, 2015 at 13:23

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

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

6 Comments

noahdotgansallo Over a year ago

How will this work if the element is not yet loaded into the DOM?

Nick Petrie Over a year ago

This isn't going to work. The row is potentially not in the DOM.

Sudharsan S Over a year ago

If it is dynamically added in the dom so only i used event delegation. if it is not added in the dom it never triggers that solve

davidkonrad Over a year ago

This is the correct answer, imho - but I fail to see the meaning with .click(). It does not do anything at all. To match multiple id's use $("#usertable tbody").on('click', 'tr[data-user-id="4287"],tr[data-user-id="2442"]', function () {

Sudharsan S Over a year ago

'.click()' it usually trigger the click event initaily and manually

|

jonmrich · Accepted Answer · 2015-07-10 17:02:13Z

I've solved something similar to this, but I was just selecting a single row. Here's how I did it. This will look through all the rows and even will page directly to the page where the row exists automatically. Not an exact solve for your problem, but might be able to point you in the right direction.

Start with a script like this:

 jQuery.fn.dataTable.Api.register( 'selectData()', function ( data, dataPoint ) {
    var table = this;

    this.rows({order:'current'}).iterator( 'row', function (ctx, idx, t, i) {
      if ( table.row(idx).data()[dataPoint] === data ) {
        var page = Math.floor( i / table.page.info().length );
        table.page( page ).draw( false );

        // Select row using TableTools
        var tt = $.fn.dataTable.TableTools.fnGetInstance( table.table().node() );
        tt.fnSelect( table.row(idx).node() );
      }
    } );

    return this;
} );

And call with this:

$('#user_table').DataTable().selectData( row_value, 'column name' );

You can get the rows selected with something like this and give you an array of all the selected rows:

var selected_things =[];
$("#user_table tbody").on('click', 'tr', function () {
selected_things.push(table.row( this ).data() );
});

In the above row_value should be a variable that you define based on the JSON values passed into the table. 'column name' should be name of your column in the table. On suggestion to make this work is to pass the user-id as column and dont' display it, then you can use the above otherwise it won't quite fit for your need.

This will select all of the rows with the variables you want. I haven't tested passing multiple values into the script you call, but it should work with some tweaking.

Leonard2 · Accepted Answer · 2016-04-07 07:09:46Z

0

though it is a late answer, you can use initComplete of datatables options;

DataTable({
    ...
    "initComplete": function() {
        $("DOM element").click(); // or
        $("DOM element").trigger("click");
    },
...
});

answered Apr 7, 2016 at 7:09

Leonard2

8908 silver badges21 bronze badges

Comments

sorvik · Accepted Answer · 2019-03-21 15:03:02Z

0

$("#user_table tbody tr[data-inst='50821'] td.details-pmt-control").click();

this approach worked for me, it generates click event (in my case on specific td inside the row). in the tr as you see i had to add "data-inst" attribute to find the correct row. place this line after preparing datatables and connecting events to it.

answered Mar 21, 2019 at 15:03

sorvik

12 bronze badges

Collectives™ on Stack Overflow

Trigger click event on Datatables row with jquery by the row's data attribute

4 Answers 4

6 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Linked

Related