What is the difference between table.on('select' and table.on('click'

bvelasquez

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?

bindrid

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.

allan

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

bvelasquez

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:

• Get the DT row (ID) of the button that was clicked
• Manipulate that row data

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

    <!-- Confirm Clear Modal -->
    <div class="modal fade" id="modal-confirm-clear" tabindex="-1" role="dialog" aria-labelledby="Clear entries for this day" style="display: none" hidden>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="modal-confirm-clear-label">Clear</h3>
        </div>
        <div class="modal-body">
            Are you sure you wish to clear out this day and all the associated project entries for this day?
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" id="modal-confirm-clear-ok" class="btn btn-default btn-danger" tabindex="0">Clear</button>
        </div>
        </div>
    </div>
    </div>

Defining Table

            var datatables_viewer_init = $('#myTable').DataTable({

                "ajax": 
                    "url": devApiURL + "TimesheetClocks?$select=SeqNumForFrontEnd,UserID,WorkDateKey,ClockIn,ClockOut,Lunchbreak,Hours,Comments&$orderby=WorkDateKey,
                    "type": "GET",
                    "dataSrc": "",
                },
                "columns": [ 
                    {
                        // Control Buttons
                        data: null,  
                        // className: "selectButton",
                        defaultContent: 
                            // '<button type="button" class="btn btn-default">Select</button>' + 
                            '<button type="button" class="btn btn-default editor_edit">Edit</button>' +
                            // '<button type="button" data-toggle="modal" data-target="#modal-confirm-clear" class="btn btn-default editor_clear">Clear</button>',
                            '<button type="button" class="btn btn-default editor_clear">Clear</button>',
                        searchable: false,
                        orderable: false
                    }, {
                        "data": "SeqNumForFrontEnd",
                        "visible": true,
                        "searchable": false
                    }, {
                        "data": "Hours",
                        "type": "num",
                    }
                ],
                "rowId": "SeqNumForFrontEnd",
                "order": [
                    [3, "asc"] // 0 is first column on left
                ],
                "select": {
                    "style": "single"
                },
            });

Event Handler

datatables_viewer_init.on('click', 'button.editor_clear', function(e) {
// datatables_viewer_init.on('click', 'button.editor_clear', function(e, dt, type, indexes) {      
// If I do this, the params are undefined...
// How can I get them when someone clicks on the button alone?          

console.log("CLICK event on CLEAR BUTTON");
                // Clicking the button triggeres "Select" ROW, CLICK BUTTON and CLICK ROW EVENT
                e.preventDefault();

                console.log("e", e);
                console.log("dt", dt);
                console.log("type", type);
                console.log("indexes", indexes);                
                console.log("this", this);

                var id = datatables_viewer_init.row(this).id();
                console.log( 'Clicked row id '+ id );

                // console.log(datatables_viewer_init.row(this));

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.

allan

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:

$('#myTable').on( 'click', 'button', function () {
  var row = $(this).closest('tr');

  editor.edit( row )
    .message( 'Are you sure you want to remove this row?' )
    .hide()
    .val( 'myField', '' )
    .buttons( 'Save' );
} );

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 be null - you need to set the server to treat the empty string as null using a formatter) and buttons() to set the buttons the user can use.

Allan

bvelasquez

Thank you Alan, that helped me put it all together!