TypeError: Cannot read properties of undefined (reading 'recalc')
TypeError: Cannot read properties of undefined (reading 'recalc')
nongtan
Posts: 11Questions: 3Answers: 0
Now I fixed the problem that pressing the sidebar button makes the header shrink but it shows this error.
menu-designate-student-cohort.vue:627 Uncaught TypeError: Cannot read properties of undefined (reading 'recalc')
at HTMLButtonElement.<anonymous> (menu-designate-student-cohort.vue:627:38)
at HTMLButtonElement.dispatch (jquery.js:5145:27)
at elemData.handle (jquery.js:4949:28)
my code in vue3
<div class="w-full text-sm text-gray-700 mt-3">
<DataTable
:columns="columns2"
:options="options2"
:data="
storePost._getDesignateStudentCohort1 ? storePost._getDesignateStudentCohort1 : ''
"
class="display nowrap w-full"
id="example2"
>
<thead class="w-full bg-gray-800 text-white">
</thead>
</DataTable>
</div>
<script>
const columns2 = ref([
{
title: '#',
render: function (data, type, row, meta) {
return meta.row + 1
}
},
{ title: 'รหัส นศ.', data: 'stu_id' },
{ title: 'ชื่อ-นามสกุล', data: 'StuName' },
{
title: 'บันทึกทั้งหมด',
data: null,
defaultContent: `<button type="button" id="saveAll" class="inline-flex w-full justify-center rounded-md bg-green-700 px-3 py-2 text-sm text-white shadow-sm sm:mt-0">บันทึก</button>`
},
{ title: 'ชื่อสถานประกอบการ', data: 'cor_name' },
{ title: 'รุ่นที่', data: 'train_period' },
{ title: 'เริ่ม', data: 'train_datestart' },
{ title: 'ถึง', data: 'train_dateend' },
{ title: 'ปรับปรุงแก้ไข', data: 'train_modify' }
])
const options2 = ref({
columnDefs: [
{
targets: '_all',
className: 'dt-head-center'
},
{
targets: [0, 1, 3, 5, 6, 7, 8],
className: 'dt-body-center'
}
],
language: {
decimal: '',
emptyTable: 'ไม่มีรายการข้อมูล',
info: 'แสดงรายการที่ _START_ ถึง _END_ จาก _TOTAL_ รายการ',
infoEmpty: 'ไม่มีรายการข้อมูล',
infoFiltered: '(กรองจากทั้งหมด _MAX_ รายการ)',
infoPostFix: '',
thousands: ',',
lengthMenu: 'แสดง _MENU_ รายการ',
loadingRecords: 'กำลังโหลดข้อมูล...',
processing: 'กำลังประมวลผล...',
search: 'ค้นหา:',
zeroRecords: 'ไม่พบรายการที่ค้นหา',
paginate: {
first: 'หน้าแรก',
last: 'หน้าสุดท้าย',
next: 'ถัดไป',
previous: 'ก่อนหน้า'
}
},
destroy: true,
scrollX: true,
autoWidth: false,
responsive: true,
pageLength: 10
})
</script>
window.$(document).ready(function () {
const table = window.$('#example2').DataTable()
window.$(window).on('resize', function () {
table.columns.adjust().responsive.recalc()
})
window.$('#toggle_sidebar').on('click', function () {
table.columns.adjust().responsive.recalc()
})
})
my code in main
import 'datatables.net-dt/css/dataTables.dataTables.min.css'
import 'datatables.net-dt/js/dataTables.dataTables.min.mjs'
import 'datatables.net-buttons-dt'
import 'datatables.net-buttons/js/buttons.colVis.mjs'
import 'datatables.net-buttons/js/buttons.html5.mjs'
import 'datatables.net-buttons/js/buttons.print.mjs'
import jszip from 'jszip'
import pdfmake from 'pdfmake'
import DataTable from 'datatables.net-vue3'
import DataTablesCore from 'datatables.net'
DataTable.use(DataTablesCore)
DataTablesCore.Buttons.jszip(jszip)
DataTablesCore.Buttons.pdfMake(pdfmake)
app.component('DataTable', DataTable)
And I'm sorry I can't simulate it because it's an internal api.
Answers
Now I have a problem where pressing the sidebar button causes the datatable header to shrink, showing this error.
Happy to take a look at a test case showing the issue. Please use StackBltiz or create a minimal git repo showing the issue so I can take look at it.
Without a test case, there is very little help I can offer I'm afraid. Your resize click handler might be the answer, but it is just running before the side bar is actually hidden? I don't know!
Allan
It shrunk.
If I use it like this it shows this error.
menu-designate-student-cohort.vue:627 Uncaught TypeError: Cannot read properties of undefined (reading 'recalc')
at HTMLButtonElement.<anonymous> (menu-designate-student-cohort.vue:627:38)
at HTMLButtonElement.dispatch (jquery.js:5145:27)
at elemData.handle (jquery.js:4949:28)
It suggests to me you don't have Responsive loaded. But there is no test case, so I can't check.
Allan
I tried installing and importing responsive and the error went away but it gave me this alert.
DataTables warning: table id=example2 - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see https://datatables.net/tn/4
My guess is you won't need these event handlers now that you have Responsive loaded:
The place to start troubleshooting is to use the steps at the linked technote:
https://datatables.net/tn/4
Kevin
But even if I don't use the event handler It happens anyway when I import
I mentioned that you probably don't need the event handlers because Responsive should kick in when the window size changes and adjust the displayed columns appropriately. The
Requested unknown parameter '0' for row 0, column 0.error is something different not related to Responsive.Let us know what you find with the troubleshooting steps at the link:
https://datatables.net/tn/4
For us to help debug we will need to see the problem to inspect the row data. Please post a test case so we can see what Datatables is trying to load:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Possibly Allan can glean the need information with the debugger information.
Kevin