我可以在 Datatablevue3 组件上调用 draw() 函数吗?

Can I invoke the draw() function on a Datatablevue3 component?

提问人:Zuby 提问时间:7/5/2023 最后编辑:Zuby 更新时间:7/5/2023 访问量:24

问:

我正在构建一个应用程序,我想将 Datatables 与 Vue 3 一起使用,并将 bootstrap 5 与服务器端选项一起使用。我将在很多页面中使用数据表,我不想独立获取数据并使用数据选项填充表。这意味着我必须将整个数据加载到客户端。

script setup>
import { Modal } from 'bootstrap'
import { onMounted, ref} from 'vue'
import DataTableLib from 'datatables.net-bs5'
import DatatablesVue from 'datatables.net-vue3'
import Buttons from 'datatables.net-buttons-bs5'
import ButtonsHtml5 from 'datatables.net-buttons/js/buttons.html5'
import Print from 'datatables.net-buttons/js/buttons.print'
import PdfMake from 'pdfmake'
import PdfFonts from 'pdfmake/build/vfs_fonts'
import KeyTable from 'datatables.net-keytable-bs5'
import FixedHeader from 'datatables.net-fixedheader-bs5'
import Select from 'datatables.net-select-bs5'
import 'datatables.net-responsive-bs5'
import JSZip from 'jszip'
import JsonData from '../helpers/data.json'
window.JSZip = JSZip

DatatablesVue.use(DataTableLib)
DatatablesVue.use(PdfMake)
DatatablesVue.use(FixedHeader)
DatatablesVue.use(KeyTable)
DatatablesVue.use(Select)
DatatablesVue.use(ButtonsHtml5)

const options = {
    serverSide: true,
    select: true,
    fixedHeader: true,
    keys: true,
    responsive: true,
    autoWidth: false,   
    lengthMenu: [30, 50, 100, 150]
}

const columns = [
    //......
]

<?script>

<template>
    <div class="container mt-5 table-responsive">
     <DatatablesVue
         :options="options"
         ajax="/api/data"
         :columns="columns"   
         class="table table-striped display table-compact">
         <thead>
            <tr>
              <th>Name</th>
              <th>Phone No.</th>
              <th>Email</th>
              <th>City</th>
              <th>Jobs</th>
              <th>Paid</th>
              <th>Created at</th>
             <th>Actions</th>
           </tr>
         </thead>
         <tbody></tbody>
         <tfoot class="fw-bolder text-primary">
           <tr>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
           </tr>
        </tfoot>
     </DatatablesVue>
   </div>
</template>

在我之前使用数据表的应用程序中,我使用 draw() 函数动态显示表上的最新记录(我可以方便地在不同事件后调用这些函数。真是太美了)但是对于 Datatablevue3 组件,DatatableVue.draw() 不是一个函数。

如何调用进行 Ajax 调用的函数来刷新表的数据?

ajax datatables vuejs3 服务器端

评论


答: 暂无答案