提问人:Zuby 提问时间:7/5/2023 最后编辑:Zuby 更新时间:7/5/2023 访问量:24
我可以在 Datatablevue3 组件上调用 draw() 函数吗?
Can I invoke the draw() function on a Datatablevue3 component?
问:
我正在构建一个应用程序,我想将 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 调用的函数来刷新表的数据?
答: 暂无答案
评论