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
The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With