I am encountering an 'is not a function' error when calling API methods in Nuxt3

choongsil

Hello, I apologize for asking a very basic question.
I'm working on setting up a DataTable using Nuxt3 and TypeScript.
To implement the child row button event,
I followed the code from the official DataTables Vue manual, but I'm encountering an 'is not a function' error.

let dt;
const table = ref(); // This variable is used in the `ref` attribute for the component
onMounted(function () {
dt = table.value.dt;
}); 

Below is the code I've written.
I'm encountering an 'Uncaught TypeError: dt.closest is not a function' error on line 28.
Could you advise me on how to fix this?
Happy New Year.

<template>
    <div class="container">

      <DataTable
        ref="tables"
        :columns="columns"
        :data="data"
        class="table table-hover table-striped"
        width="100%"
      >
      </DataTable>
    </div>
  </template>

  <script setup lang="ts">
  import DataTable from 'datatables.net-vue3';
  import DataTablesCore from 'datatables.net-bs5';

  DataTable.use(DataTablesCore);

  let dt:any;
  const tables = ref();

  onMounted( ()=> {
      dt = tables.value.dt
      // 클릭 이벤트 리스너 추가
      dt.on('click', 'td.dt-control', function () {
          const tr =dt.closest('tr');
          const row = dt.row(tr);

          if (row.child.isShown()) {
              // 자식 행이 이미 보여지고 있으면 숨깁니다.
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // 자식 행이 숨겨져 있으면 보여줍니다.
              row.child(format(row.data())).show(); // 'format'은 자식 행을 구성하는 함수입니다.
              tr.addClass('shown');
          }
      });

  });

  function format(rowData:any) {
      // 여기에서 'rowData'를 사용하여 자식 행의 HTML을 생성합니다.
      return `<div>testData</div>`;
  }

  const columns = [
    { className: 'dt-control', orderable: false, data: null, defaultContent: ''},
    { data: 'name' ,title:"Name"},
    { data: 'position' ,title:"Position"},
    { data: 'office', title:"Office"},
    { data: 'extn', title:"Extn."},
    { data: 'start_date' ,title:"Start date"},
    { data: 'salary' ,title:"Salary"},
  ];

  const data = [
         {
          "id": "1",
          "name": "Tiger Nixon",
          "position": "System Architect",
          "salary": "$320,800",
          "start_date": "2011/04/25",
          "office": "Edinburgh",
          "extn": "5421"
        },
        {
          "id": "2",
          "name": "Garrett Winters",
          "position": "Accountant",
          "salary": "$170,750",
          "start_date": "2011/07/25",
          "office": "Tokyo",
          "extn": "8422"
        },
        {
          "id": "3",
          "name": "Ashton Cox",
          "position": "Junior Technical Author",
          "salary": "$86,000",
          "start_date": "2009/01/12",
          "office": "San Francisco",
          "extn": "1562"
        }
  ]
  </script>

  <style>
  @import 'bootstrap';
  @import 'datatables.net-bs5';
  </style>

allan

Can you use StackBlitz to create an example please?

This example shows how the API can be used.

Allan

choongsil

https://stackblitz.com/edit/nuxt-starter-ew253f?file=app.vue
Thank you for your response.
I've created an example using StackBlitz.
However, when I click the left toggle button, I'm getting an 'Uncaught TypeError: dt.closest is not a function' error.
Could you please advise on how I should be using this part?
Thank you.

colin

closest() is a jQuery method, not DataTables, so that's why you see the error. If you change that line to be

    const tr = dt.$(this).closest('tr');

everything appears to work as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Colin