problem with arrow and columns in responsive table
problem with arrow and columns in responsive table

Dear all,
I have made this table:
https://daado.altervista.org/debate.php
The table includes 9 columns. It is responsive. When the screen shrinks, an arrow appears on the right and when it is clicked upon, the hidden columns are shown. I guess I have placed the arrow in the 10th column.
There is a problem. When the page is loaded, the following error message is shown:
DataTables warning: table id=myTable - Requested unknown parameter '9' for row 0, column 9.
Here is my code. Can you help me figure out what the problem is?
<script>
$(document).ready(function() {
var dt = $('#myTable').DataTable({
searchHighlight: true,
responsive: {
details: {
display: DataTable.Responsive.display.modal({
header: function (row) {
var data = row.data();
return 'Dettagli di ' + data[4] + ' (di ' + data[0] + ')';
}
}),
renderer: DataTable.Responsive.renderer.tableAll()
}
},
mark: true,
"iDisplayLength": 6,
buttons: [
'colvis',
{
extend: 'searchPanes',
config: {
cascadePanes: true,
viewTotal: true,
orderable: true
}
}
],
columnDefs:[
{
className: 'dtr-control arrow-right',
orderable: false,
target: 9
},
{
"targets": [5,6,7,8],
"orderable": false
},
{
searchPanes: {
cascadePanes: true,
viewTotal: true,
orderable: true
},
},
{
searchPanes: {
show: true
},
targets: [0,1,2,3]
},
{
searchPanes: {
show: false
},
targets: [4,5,6,7,8]
}
],
responsive: {
details: {
type: 'column',
target: 9
}
},
dom: 'Bfrtip',
select: {
style: 'os',
selector: 'td:not(:last-child)'
},
order: [[ 4, 'asc' ]]
});
dt.on('select.dt', () => {
dt.searchPanes.rebuildPane(0, true);
});
dt.on('deselect.dt', () => {
dt.searchPanes.rebuildPane(0, true);
});
});
</script>
Answers
I had forgotten to add an empty column to my table.
Now it seems to work fine.
Thanks for the update - good to hear you've got it working as you need.
Allan