CODEWITHSUNDEEP
datatablesresponsive
Anja R
Anja R

Reputation: 88

Responsive datatables handle row click

I'm using a responsive datatables on which I'm trying to handle click on a row, so you get redirected to a new page if you click on the row. This works fine, but if the table is collapsed I cannot show the child row, since clicking on the expand icon activates the row click and I get redirected.

So I'm trying to see if I can check whether the icon is clicked or not, but I cannot figure out how to do it

I have tried to use 

   $("#jobListTable").hasClass('collapsed')

in order to see, if the table is collapsed or not, but I still miss how to check what cell i clicked

Simplyfied fiddle can be found here: http://jsfiddle.net/Anja_Reeft/agouq6ts/5/

But my actually code is

$('#jobListTable tbody').on('click', 'tr', function (e) {

    var data = oTable.row( this ).data();
     if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        oTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }

    var selectedTaskID = data.taskID;
    var selectedJobNumber = data.jobNumber;
    var selectedReqno = data.reqno;
    var selectedPriority = data.priority;
    var selectedCreatedBy = data.createdBy;
    var selectedEmployeeInitials = data.employeeInitials;
    var selectedShortDescription = data.shortDescription;
    var selectedLongDescription = data.longDescription;
    var selectedSourceReference = data.sourceReference;
    var selectedAktivitetstype = data.aktivitetstype;
    var selectedDueDatetime = data.dueDatetime;
    var selectedRecurrence = data.recurrence;
    var selectedStatus = data.status;
    var selectedStatusColor = encodeURIComponent(data.statusColor);
    var teamID = "";
    if (sessionStorage.getItem("teamID")) {
      teamID = "&teamID="+sessionStorage.getItem("teamID");        
    }

    document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID;
} );

Please let me know if you need futher information.

Upvotes: 1

Views: 354

Answers (1)

Anja R
Anja R

Reputation: 88

In cases anyone has a simular problem:

I changed my code so I added a button to each row

"columns":  [
                {
                  data: null, // can be null or undefined
                  defaultContent: '<button type="button" id="jobInfoBtn" class="btn btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i></button>',
                },

and then changed my on click function

$('#jobListTable tbody').on('click', 'tr', function (e) {

     if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        oTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
} );


$('#jobListTable tbody').on('click', 'button', function (e) {

    var data = oTable.row( $(this).parents('tr') ).data();

    var selectedTaskID = data.taskID;
    var selectedJobNumber = data.jobNumber;
    var selectedReqno = data.reqno;
    var selectedPriority = data.priority;
    var selectedCreatedBy = data.createdBy;
    var selectedEmployeeInitials = data.employeeInitials;
    var selectedShortDescription = data.shortDescription;
    var selectedLongDescription = data.longDescription;
    var selectedSourceReference = data.sourceReference;
    var selectedAktivitetstype = data.aktivitetstype;
    var selectedDueDatetime = data.dueDatetime;
    var selectedRecurrence = data.recurrence;
    var selectedStatus = data.status;
    var selectedStatusColor = encodeURIComponent(data.statusColor);
    var teamID = "";
    if (sessionStorage.getItem("teamID")) {
      teamID = "&teamID="+sessionStorage.getItem("teamID");        
    }

    document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID;
} );

Upvotes: 2

Related Questions