Quantcast
Viewing all articles
Browse latest Browse all 82150

Changing the click listener for user selected rows (TableTools)

Hey all,

In my DataTables implementation we are using multi-row select to perform specific actions on inventory items. Everything is working great and there are no bugs, however, I'm using mRender to generate a column of checkboxes for the first column, i.e.:

"aoColumns": [ { "sClass": "center", "sWidth": "28px", "mRender": function (data, type, full) {
return '<input type="checkbox" name="vehicle_checks" id="vehicle_checks" class="vehicle_checks" value="' + data + '">';}
},null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,/*null,null,null,*/],

Then I added this line to TableTools.js within the "_fnRowSelect" context:

$(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', 'checked');

and this one to "_fnRowDeselect":

$(data[i].nTr).closest("tr").find('input[type="checkbox"]').prop('checked', '');

to ensure that a row's checkbox always gets checked on selection, and unchecked again on de-selection. The checkbox is a nice visual mechanism to show the end user s/he can click a TR node and perform on action on that row.

So far so good right? Yup, I thought so too; however, some of the columns have hrefs and the boss (justifiably) doesn't like highlighting the whole row if the end user's action is just clicking an href to navigate to a different page - in such a case the row highlights first (very briefly) and then the page redirects.

So I've been asked to trigger row selection only by clicking the row's checkbox instead of anywhere in the <tr>. At first I thought it would be a simple task of changing an event listener's binding, but maybe it's more complex? How would this be done?

Viewing all articles
Browse latest Browse all 82150

Trending Articles