What is the difference between table.on('select' and table.on('click'
What is the difference between table.on('select' and table.on('click'
bvelasquez
Posts: 28Questions: 7Answers: 0
I am kind of confused, is there any difference between something like:
var table = $('#myTable').DataTable();
$('#myTable').on( 'click', 'tr', function () {
var id = table.row( this ).id();
alert( 'Clicked row id '+id );
} );
and
var table = $('#example').DataTable();
table.on( 'select', function ( e, dt, type, indexes ) {
if ( type === 'row' ) {
var data = table.rows( indexes ).data().pluck( 'id' );
// do something with the ID of the selected items
}
} );
When should we use select and when should we use click?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
For one thing, the click will fire every single time you click the row. Select only fires when the row becomes selected. It does not fire when it is deselected, there is a separate event for that.
But, its within the context of what you are trying to accomplish that determines which one to use.
They are often linked since a click can be used to trigger a select, but as @bindrid says, they are not the same thing. For example you can use the API (
row().select()) to select a row without a click event).Allan
Here is what I am trying to do, I have an inline button in my Datatable named Clear.
When the user clicks the button, the associated row should not be deleted, instead, the record values defined in the Datatable Editor should be set to NULL.
Not only this, but a confirmation dialog should be displayed before the Clear function occurs.
The problem is I am having trouble getting the data and ID of the row when the user clicks the button.
So, I need to know how to:
I don't have multiple selections on, but I would like to in the future.
A top button with a custom function on select will not do, it must be inline.
Here are the relevant portions of my code.
Defining Bootstrap Modal For Confirmation Dialog
Defining Table
Event Handler
To further elaborate my setup, I have two Datatables on the page. The top is the master and the bottom is the detail.
The Master only has it's edit functionality defined while the bottom has all three functionals enabled.
When someone clicks on a row on the top, the details for that row (each row is a day with mutliple records) comes up on the bottom. So I am using the select event to do that.
A soft delete like this is something that does come up now and then. I'm going to write it up into a blog post at some point.
What you basically need to do is something like:
We are using
edit()to edit the row,message()to set the question to the user,hide()to hide all the inputs,val()to set the value to be an empty string (its an HTTP variable submission, so it can't benull- you need to set the server to treat the empty string asnullusing a formatter) andbuttons()to set the buttons the user can use.Allan
Thank you Alan, that helped me put it all together!