Expandable and collapsible function works when you click on the checkbox

Question

I created a table using jquery datatable . I also use the responsive datatable function to make it responsive. The code works fine, but the problem I am facing is that there is a checkmark in the first column of the table, and when we change the size of the width table to a smaller width, the expandable option will appear as shown below.

Now when we press the checkbox button, the compressible function works.

My code is 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 someone tell me how to prevent build and extension when we click 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 the spread of the click if you click on the 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 the functional functionality of the cell and add it only to minimize / expand the 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 in front of the pseudo element: therefore, it was not actually in dom. I need an element in dom to allow wasting / crashing when I click on that particular element, not the whole cell.

Then I give 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 delete 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 behavior of clicks on the cell only if you click the minimize / 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 a cell, if the target of your click is not an element with the class "clickBtn" and "showBtn", it stops the event from propagating. This is why only clickBtn can spend / collapse now.

this part simply recreates the old button color and text:

 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 the text selection, 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 another td to position 0

Here is his working demonstration.