Trigger click event on Datatables row with jquery

问题:

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.

回答1:

Use event delegation like

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

回答2:

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.

回答3:

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

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

回答4:

$("#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.