Expandable and collapsible feature is working when

Question

I have created a table using jquery datatable. I am also using the responsive feature of the datatable for making it responsive. The code is working fine but the issue I am facing is that the the first column of the table is having a check-box and when we resize the table width to a lesser width collapsible option will appear like as shown below

Now when we click the checkbox the collapsible feature is working.

My code is as given below

Working Demo

<table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"> 
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            :
        </tbody>
   </table>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script src="dataTables.responsive.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $('#example')
                .DataTable({
                    "responsive": true,

                    "dom": '<"top"lf>t<"bottom"pi><"clear">'
                });
    });
</script>

Can anyone please tell me how to prevent collapsible and expandable when we click the checkbox

Answer 1

just replace

$(document).ready(function () {
    $('#example').DataTable({
       "responsive": true,
       "dom": '<"top"lf>t<"bottom"pi><"clear">'
    });
});

by

$(document).ready(function () {
    $('#example').DataTable({
       "responsive": true,
       "dom": '<"top"lf>t<"bottom"pi><"clear">'
    });

    $('td').on('click mousedown mouseup', function(e) {
        if (e.target.type === 'checkbox') {
           e.stopPropagation();
        }
    });
});

this part will stop click propagation if you clicked on a checkbox

$('td').on('click mousedown mouseup', function(e) {
    if (e.target.type === 'checkbox') {
        e.stopPropagation();
    }
});

plunker: http://plnkr.co/edit/PCHdDM7UGD0BLXoDhhD6?p=preview

EDIT:

To remove cell click functionnality and add it only to collapse/expend button, I had to create a new html element and put it in the cell: '<div class="clickBtn">+</div>'

Why? Because the old button was a before pseudo:element so it was not actually in the dom. I needed an element in the dom to only allow expend/collapse when this particular element is clicked and not the whole cell.

Then I'm giving this button the css of the old button

.clickBtn {
   -webkit-touch-callout: none;
   -webkit-user-select: none; 
   -khtml-user-select: none;
   -moz-user-select: none; 
   -ms-user-select: none; 
   user-select: none;        
   cursor: pointer;
   top: 9px;
   left: 4px;
   height: 14px;
   width: 14px;
   position: absolute;
   color: white;
   border: 2px solid white;
   border-radius: 14px;
   box-shadow: 0 0 3px #444;
   box-sizing: content-box;
   text-align: center;
   font-family: 'Courier New', Courier, monospace;
   line-height: 14px;
   background-color: #337ab7;
}

and remove the old one:

table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
   display: none;
}

Now I need to change the cell click behavior, to only occur if you click on the collapse/expend button.

$('td').on('click mousedown mouseup', function(e) {
   if (e.target.className === 'clickBtn showBtn') {
       if (e.target.innerText === '+') {
           e.target.innerText = '-';
           e.target.style.backgroundColor = 'red';
       } else {
           e.target.innerText = '+';
           e.target.style.backgroundColor = '#337ab7';
       }
   } else {
       e.stopPropagation();
   }
});

When you click on the cell, if the target of your click is not an element with 'clickBtn' and 'showBtn' class it stops the event propagation. That's why only the clickBtn can expend/collapse now.

this part just recreate the old button color and text changing :

if (e.target.innerText === '+') {
    e.target.innerText = '-';
    e.target.style.backgroundColor = 'red';
} else {
    e.target.innerText = '+';
    e.target.style.backgroundColor = '#337ab7';
}

EDIT 2 :

To remove the blue part, which is text selecting, I had to add this css to the button:

-webkit-touch-callout: none;
-webkit-user-select: none; 
-khtml-user-select: none;
-moz-user-select: none; 
-ms-user-select: none; 
user-select: none; 

Answer 2

just add one more td at position 0

Here is its working demo