How to keep both Datatable "click" and "dblclick" both

Mahendra_P

Hello.

I am facing issue in Data-table row selection. i want to select the the entire row on single click- so that i have already written some code to retrieve the particular id and its working. But now i have another feature to implement to open a modal on double click - i already implemented this too. but if i implement the dblclick event, the single click event is not working.

below code is to single click:

$('#datatableID tbody').on('click', 'tr', function () {
                var table = $('#datatableID ').DataTable();
                $('#datatableID tbody > tr').removeClass('selected_dtrow');
                $(this).addClass('selected_dtrow');
                var data = table.row(this).data().recordNumber; $("#hdnStatusId").val("");
                $("#hdnStatusId").val(data);
                console.log(data);
            });

now this is to dblclick:

            $('#datatableID tbody').off().on('dblclick','tr', function () {
                var table = $('#datatableID ').DataTable();
                //$('#datatableID tbody > tr').removeClass('selected_dtrow');
                //$(this).addClass('selected_dtrow');
                var data = table.row(this).data().recordNumber; $("#hdnStatusId").val("");
                $("#hdnStatusId").val(data);
                $('#modalTitle').html('Edit the job');
                let loader = '<div class="d-flex justify-content-center"><div class="spinner-border" role="status"><span class="sr-only"></span></div></div>';
                $("#modalid.modal-body").html(loader);
                $("#modalid").modal("show");
                $("#modalid.modal-body").load("/siteview/Upsert?scheduleId=" + data, function (data) {
                    if (data != null) { $("#hide-content").show(); }
                });
            });

Can anyone help me in this.
If i double click i want to open modal and single click i want to select row but after the implementation of dblclick the single click event not working.

Thank you

colin

There are a few similar threads, such as this and this, that should get you going.

If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Mahendra_P

Colin, Thanks for your answer, but didn't work. i tried hard, no help.
I want to implement both click and dblclick.

dblclick is working infinite time

kthorngren

Having a click event and a double click event on the same element is tricky and a problem not specific to Datatables. Take a look at this SO thread and this SO thread for ideas of how you might implement this.

Kevin

isi_dwade

var dTable = $("#tableID).DataTable({});

$('#tableID tbody').on('dblclick', 'tr', function (e) {
   dTable.rows().deselect(); //force clear of any multiple selected rows
   dTable.rows(this).select();  //this will force-select the double clicked row
   <open dialog here>
});