I'm trying to use jQuery selectable in a datatable column checkbox list. The fiddle shows the 'Office location' list of checkboxes which all function correctly when selectable is turned off.
With selectable turned on however all I've managed to get working so far is checkbox highlighting and assignment of classes when dragging across checkbox labels. The problem is that the datatable doesn't filter in accordance with the selections - neither with dragging, nor with individual label selections.
Interestingly the filtering works if I just check the small input boxes, but not sure why. I've tried all combinations of ul, li and label in the .selectable() and its filter, but nothing gets the table to filter.
I sense that the function might be disconnected from the datatable but simply don't understand how to put this right.
Can anyone help?
$(document).ready(function() {
function cbDropdown(column) {
return $('<ul>', {
'class': 'cb-dropdown'
}).appendTo($('<div>', {
'class': 'LEVEL-TWO'
}).appendTo($('<div>', {
'class': 'LEVEL-ONE'
}).appendTo($('<div>', {
'class': 'cb-dropdown-wrap'
}).appendTo(column))));
}
$('#example').DataTable({
scrollY: 'calc(100vh - 270px)',
scrollX: '100%',
fixedHeader: true,
scrollCollapse: true,
paging: false,
processing: true,
orderCellsTop: true,
select: true,
"language": {
"search": "",
"searchPlaceholder": "Search",
},
initComplete: function() {
this.api().columns([2]).every(function(i) {
var column = this;
var ddmenu = cbDropdown($(column.header())).on('change', ':checkbox', function() {
var active;
var vals = $(':checked', ddmenu).map(function(index, element) {
active = true;
return $.fn.dataTable.util.escapeRegex($(element).val());
}).toArray().join('|');
column.search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false).draw();
if (this.checked) {
$(this).closest('li').addClass('active');
} else {
$(this).closest('li').removeClass('active');
}
var active2 = ddmenu.parent().is('.active');
if (active && !active2) {
ddmenu.parent().addClass('active');
} else if (!active && active2) {
ddmenu.parent().removeClass('active');
}
});
column.data().unique().sort().each(function(d, j) {
var $label = $('<label>'),
$text = $('<span>', {
text: d
}),
$cb = $('<input>', {
type: 'checkbox',
value: d
});
$text.appendTo($label);
$cb.appendTo($label);
ddmenu.append($('<li>').append($label));
});
});
}
});
//Multi-checkbox dragging
$(".cb-dropdown-wrap ul").selectable({
filter: 'li',
stop: function() {
$(".ui-selected input[type='checkbox']", this).each(function() {
this.checked = !this.checked;
if ($(this).is(':checked')) {
$(this).parent().addClass("LabelHighlight")
$(this).parent().parent().addClass("active")
} else {
$(this).parent().removeClass("active LabelHighlight")
$(this).parent().parent().removeClass("active")
}
});
}
});
});.cb-dropdown-wrap {
position: relative;
height: 125px;
}
.cb-dropdown,
.cb-dropdown li {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.cb-dropdown {
position: absolute;
width: 100px;
height: 130px;
overflow: hidden;
background: #fff;
border: 1px solid #888;
}
li:hover {
border: 1px solid blue;
}
.LabelHighlight {
border: 1px solid #7392a5;
background-color: #e3edf9;
color: black;
}<script type="text/javascript" src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script type="text/javascript" src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
<script type="text/javascript" src='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css'></script>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<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>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<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>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$92,575</td>
</tr>
</tbody>
</table>
