TypeError: Cannot read properties of undefined (reading 'recalc')

nongtan

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.

nongtan

Now I have a problem where pressing the sidebar button causes the datatable header to shrink, showing this error.

allan

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.

And I'm sorry I can't simulate it because it's an internal api.

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

nongtan

It shrunk.

nongtan

 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()
  })

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)

allan

It suggests to me you don't have Responsive loaded. But there is no test case, so I can't check.

Allan

nongtan

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-responsive/js/dataTables.responsive.min.mjs' 
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)

I tried installing and importing responsive and the error went away but it gave me this alert.

import 'datatables.net-responsive/js/dataTables.responsive.min.mjs' 

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

kthorngren

My guess is you won't need these event handlers now that you have Responsive loaded:

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()
 })

equested unknown parameter '0' for row 0, column 0.

The place to start troubleshooting is to use the steps at the linked technote:
https://datatables.net/tn/4

Kevin

nongtan

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()
 })

But even if I don't use the event handler It happens anyway when I import

import 'datatables.net-responsive/js/dataTables.responsive.min.mjs'

kthorngren

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