Dropdown Button for Filter Stopped Working

sachiel

jQuery version: 3.7.1
Datatables: 2.3.7
Buttons: 3.2.6

Did the collectionLayout: function() {} stop working in the most recent release of DataTables? I was calculating the visible columns based on the window width, but now I get an error message and no dropdown is showing.

Error from browser:

dataTables.buttons.min.js:4 
** Uncaught TypeError: h.collectionLayout.includes is not a function**
_popover    @   dataTables.buttons.min.js:4
(anonymous) @   dataTables.buttons.min.js:4
map @   dataTables.min.js:4
(anonymous) @   dataTables.buttons.min.js:4
(anonymous) @   dataTables.min.js:4
action  @   dataTables.buttons.min.js:4
s   @   dataTables.buttons.min.js:4
r   @   dataTables.buttons.min.js:4
(anonymous) @   dataTables.buttons.min.js:4
dispatch    @   jquery.js:2
v.handle    @   jquery.js:2

Portion of code:
layout: {
top2Start: {
buttons: [{
text: '<span class="fa-layers fa-fw"><i class="fa fa-ban"></i><i class="fa fa-filter" data-fa-transform="shrink-7"></i></span> Clear Filter',
action: function(e, dt, node, config) {
// Clear Filter Button
$('#dogs tfoot th').find('input,select').val('');
$('input.flt:checkbox').prop('checked', false).parent().removeClass('active');
$('input.flt:text,select.flt,input.flt:hidden').val('').data('null', '');
$('.fltcol').addClass('d-none');
$('#dogs').DataTable().columns().search('').draw();
window.history.pushState({}, document.title, "<?= $us_url_root ?>index.php?view=dogs");
}
}
<? if ($user->isLoggedIn()) { ?>,
{
extend: 'collection',
text: '<span class="fa-layers fa-fw"><i class="fa fa-filter" data-fa-transform="shrink-2 down-3 left-3"></i><i class="fa fa-plus" data-fa-transform="shrink-7 up-5 right-5"></i></span> Add Filter',
buttons: [
//{ text: '<? //=$lang['DOG_SIRE'] ?? 'Sire' ?>', action: function () {showFormControl('sire-id');} },
//{ text: '<? //=$lang['DOG_DAM'] ?? 'Dam' ?>', action: function () {showFormControl('dam-id');} },
<? if ($GLOBALS['config']['fields']['breeder'] == 0 || ($user->isLoggedIn() && hasPerm($GLOBALS['config']['fields']['breeder'], $user->data()->id))) { ?> {
text: '<?= $lang['DOG_BREEDER'] ?? 'Breeder' ?>',
action: function() {
showFormControl('breeder-id');
}
},
<? } ?>
more fields ...
{
text: '<?= $lang['DOG_ADMIN_NOTES'] ?? 'Hidden Notes' ?>',
action: function() {
showFormControl('hiddenNotes');
}
}
<? } ?>
],
autoClose: true,
collectionLayout: function() {
var colsAllow = Math.floor(window.innerWidth / 300);
if (colsAllow >= 4) {
return 'four-column';
} else if (colsAllow == 3) {
return 'three-column';
} else if (colsAllow == 2) {
return 'two-column';
} else {
return 'one-column';
}
},
fade: true
}

kthorngren

According to the collection collectionLayout docs it expects a string. Not sure what version you were using but I believe the later versions are more strict on what is accepted and generally ony allow what is stated in the docs. @allan can confirm this.

I suspect you will need to execute that function before initializing Datatables to set a variable used for the collectionLayout option.

Kevin

sachiel

Kevin, thanks. Yeah, it's been in there that way for a few years. I switched to "dropdown columns" and that's got it.