dataTables editable plugin multiple select

If you are using the jQuery datatable with the editable extension, you probably know that you can only highlight one single row (tr). In my opinion, that’s really for the purpose of integrating the single row add/delete functions.

If you need to implement multiple row operations, thus needing multiple row selection, here is how you can do it:

  1. Open up jquery.dataTables.editable.js
  2. Toward the end of the file, look for

    $(oTable.fnSettings().aoData).each(function () {
        $(this.nTr).removeClass(properties.sSelectedRowClass);
    });

  3. Comment that out.

Obviously by doing this we are breaking the single row add/del feature. So, you will need to make sure you are not using the builtin add/del buttons, namely btnAddNewRow and btnDeleteRow.

Now, how to grab the highlighted rows? If you follow the user manual, each of your tr should have an ID.

$('#myTable_id .row_selected').each(function () {
	item_id = this.id;
	// then do something with this id
});

Whatever you do, consider refreshing your table or the whole page to reflect the latest table content.

One thought on “dataTables editable plugin multiple select

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s