Cannot read properties of null (reading 'columns')
Cannot read properties of null (reading 'columns')
m75sa
Posts: 132Questions: 30Answers: 0
I have the following datatable code. It seems to work all perfectly.
The only thing that I note is an errore in the chrome console:
jquery.min.js:2 jQuery.Deferred exception: Cannot read properties of null (reading 'columns') TypeError: Cannot read properties of null (reading 'columns')
at s.<anonymous> (https://www.mysite.com/index.php:1223:33)
at s.<anonymous> (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:140:320)
at s.iterator (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:100:432)
at s.<anonymous> (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:140:287)
at s.every (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:103:3)
at S.fn.init.initComplete (https://www.mysite.com/index.php:1202:34)
at https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:76:160
at Function.map (https://www.mysite.com/ca/an/plugins/jquery/jquery.min.js:2:3536)
at r (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:76:109)
at ua (https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js:49:293) undefined
S.Deferred.exceptionHook @ jquery.min.js:2
jquery.min.js:2 Uncaught TypeError: Cannot read properties of null (reading 'columns')
at s.<anonymous> (sctan_index.php:1223:33)
at s.<anonymous> (jquery.dataTables.min.js:140:320)
at s.iterator (jquery.dataTables.min.js:100:432)
at s.<anonymous> (jquery.dataTables.min.js:140:287)
at s.every (jquery.dataTables.min.js:103:3)
at S.fn.init.initComplete (sctan_index.php:1202:34)
at jquery.dataTables.min.js:76:160
at Function.map (jquery.min.js:2:3536)
at r (jquery.dataTables.min.js:76:109)
at ua (jquery.dataTables.min.js:49:293)
This is the code i used:
<script src="plugins/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="plugins/jszip/jszip.min.js"></script>
<script src="plugins/pdfmake/pdfmake.min.js"></script>
<script src="plugins/pdfmake/vfs_fonts.js"></script>
<script src="plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="dist/js/adminlte.min.js"></script>
<script type="text/javascript" src="../build/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<script src="plugins/sweetalert2/sweetalert2.min.js"></script>
<link rel="stylesheet" href="plugins/sweetalert2/sweetalert2.min.css">
<script src="//cdn.datatables.net/plug-ins/1.10.13/sorting/datetime-moment.js"></script>
var groupColumn = 0;
var table = $('#tbl').DataTable({
paging: false,
responsive: true,
stateSave: true,
dom: 'Bfrtip',
"ordering": false,
columnDefs: [
{
"targets": [ 0,6,7 ],
"visible": false,
"searchable": false
},
{
"orderable": false,
targets: 10,
render: function (data, type, row) {
if ( type === 'filter' ) {
return data.replace(/<[^>]*>?/gm, '');
}
return data;
}
}
],
buttons: [
{
text: 'TEXT1',
attr: {id: 'tabtop_inarrivo' },
action: function ( e, dt, node, conf ) {
window.location.assign("index.php")
}
},
{
text: 'TEXT2',
attr: {id: 'tabtop_inprevisione' },
action: function ( e, dt, node, conf ) {
window.location.assign("index_2.php")
}
}
],
initComplete: function () {
var states = this.api().state.loaded();
this.api().columns( [11] ).every( function () {
this.visible(false);
} );
this.api().columns( [10] ).every( function () {
var column = this;
var select = $('<select><option value="" style="text-align: center"><strong>STATUS</strong></option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d.replace(/<[^>]*>?/gm, '')+'">'+d+'</option>' )
} );
var colIndex = column.index();
var searchTerm = states.columns[colIndex].search.search;
searchTerm = searchTerm.replace(/^\^/gm ,'')
searchTerm = searchTerm.replace(/\$$/gm ,'')
$( 'select', column.header() ).val(searchTerm);
} );
},
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
if (group == moment().format('DD/MM/YYYY') ) {
$(rows).eq( i ).before(
'<tr class="group" style="background-color: #41617e !important; color:#FFFFFF; font-weight: bold; font-size: 14px; margin-top: 40px"><td colspan="10">'+group+' <sup style="background-color: #FFFFFF; color: #003768; padding: 0 2px 0 2px; border-radius: 2px; font-size: 11px; margin-left: 5px; top: -1px !important;">TODAY</sup></td></tr>'
);
last = group;
}
else {
$(rows).eq( i ).before(
'<tr class="group" style="background-color: #41617e !important; color:#FFFFFF; font-size: 14px; font-weight: bold;"><td colspan="10">'+group+'</td></tr>'
)
last = group;
}
}
})
},
});
new $.fn.dataTable.Buttons( table, {
buttons: [
{ extend: 'csv', text: 'CSV',
exportOptions: {
"format": {
"header": function(content, index) {
return index === 10 ? "STATE" : content;
},
},
columns: [ 0, 1, 2, 3, 4, 11, 10 ]
},
},
{ extend: 'excel', text: 'EXCEL', title: 'LOADING',
exportOptions: {
"format": {
"header": function(content, index) {
return index === 10 ? "STATE" : content;
},
},
columns: [ 0, 1, 2, 3, 4, 11, 10 ]
},
},
{ extend: 'pdf', text: 'PDF', title: 'LOADING',
exportOptions: {
"format": {
"header": function(content, index) {
return index === 10 ? "STATE" : content;
},
},
columns: [ 0, 1, 2, 3, 4, 11, 10]
},
},
{ extend: 'print', text: 'STAMPA', title: 'LOADING',
exportOptions: {
"format": {
"header": function(content, index) {
return index === 10 ? "STATE" : content;
},
},
columns: [ 0, 1, 2, 3, 4, 11, 10]
},
}
]
} );
table.buttons( 1, null ).container().appendTo(
table.table().container()
);
When i refresh the page the error in the console doesn't show anymore... but when i reload for the first time the error is there again...
Answers
That's quite an old version of DataTables. The first thing to do might be to upgrade to the current release 1.13.4. If that doesn't resolve the issue, then can you give me a link to your page so I can debug it please?
Allan