DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

hi i have problem im using datatable.net-vue3 and inertia so i have component reusable

hi i have problem im using datatable.net-vue3 and inertia so i have component reusable

hblmshblms Posts: 13Questions: 0Answers: 0
in Free community support

"datatables.net-dt": "^2.1.7",
"datatables.net-vue3": "^3.0.2",
///

import $ from 'jquery'; import DataTable from 'datatables.net-vue3'; import DataTablesLib from 'datatables.net'; import "datatables.net-dt/css/dataTables.dataTables.min.css"; DataTable.use(DataTablesLib); import { ref } from "vue"; const props = defineProps({ headers: Array, items: Array, }); const dataTableOptions = ref({ paging: true, searching: true, order: [], language: { search: "Recherche:", info: "Affichage de _START_ à _END_ sur _TOTAL_ entrées", lengthMenu: "Afficher _MENU_ entrées", emptyTable: "Aucune donnée disponible", zeroRecords: "Aucun enregistrement correspondant trouvé", infoEmpty: "Affichage de 0 à 0 sur 0 entrées", infoFiltered: "(filtré de _MAX_ entrées)", }, initComplete: function () { const api = this.api(); api.columns().every(function (index) { let column = this; // Skip the last column if (index < api.columns().count() - 1) { // Create input element let input = document.createElement('input'); input.placeholder = `Filtrer ${column.header().textContent}`; input.className = 'form-control form-control-sm'; // Append input to the respective header cell $(column.header()).html(input); // Event listener for user input input.addEventListener('keyup', () => { if (column.search() !== input.value) { column.search(input.value).draw(); } }); } else { $(column.header()).html(''); } }); }, });

<template>
<Division class="table-responsive">
<DataTable :options="dataTableOptions" class="display table">
<thead>
<tr>
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
<tr data-dt-order="disable">
<th v-for="header in headers" :key="header">{{ header }}</th>
</tr>
</thead>
<tbody>
<slot name="tbody" />
</tbody>
</DataTable>
</Division>
</template>

<style scoped>
.table-responsive {
min-height: 500px;
}
</style>
i have this components so in index i have used like this
<DataTable :items="subRentals" :headers="['Réf', 'Sous-traitant', 'Actions']">
<template #tbody>
<tr v-for="subRental in subRentals" :key="subRental.id" class="text-sm">
<td>
<SimpleLink v-tooltip="Voir le contrat en PDF" :href="/p/sub-rental/${subRental.id}">{{ subRental.ref }}</SimpleLink>
</td>
<td>{{ subRental.company.name }}</td>

                            <td>
                                <Division class="dropdown position-relative">
                                    <Button class="btn btn-sm btn-outline-primary rounded dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
                                        Actions
                                    </Button>
                                    <ul class="dropdown-menu dropdown-menu-end text-sm" aria-labelledby="dropdownMenuButton">
                                            <li><Button class="dropdown-item text-success" @click="closeSubRentalFunc(subRental)">Fermer sous-location</Button></li>

                                    </ul>
                                </Division>
                            </td>
                        </tr>
                    </template>
                </DataTable>

when i close an subRental i lclosed with form PUT on modal make it closed so it should removed from datatable but it stack like datatable preserve old state this the problem

and i juust change the databale.net i was used but when i have one record on datatable it stack and show error of nextSubling on null

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin 
    <tr v-for="subRental in subRentals" :key="subRental.id" class="text-sm">

    You can't use v-for to create the DataTable. You have to use the techniques shown in the documentation, otherwise you end up with both Vue and DataTables trying to control the same DOM elements, and that obviously won't work.

    Allan

  • hblmshblms Posts: 13Questions: 0Answers: 0
    edited October 9

    so how about if i have complex data like this as columns

     <td>
                                    <NavLink class="" :href="`/contracts/${contract.id}/edit`">{{ contract.ref }}</NavLink>                                
                                </td>
                                <td>
                                    <SpanField class="badge px-2" :class="contract.client.is_company ? 'bg-danger' : 'bg-success'">
                                        {{ contract.client.is_company ? "SOCIÉTÉ" : "PARTICULIER" }}
                                    </SpanField>
                                </td>
                                <td>
                                    <NavLink class="" :href="`/clients/${contract.client.id}/edit`">
                                        {{ contract.client.is_company ? (contract.client.company_name?.trim() || contract.client.fullname) : contract.client.fullname }}
                                    </NavLink>
                                </td>
                                <td>
                                    <Division class="d-flex">
                                        <Image :height="30" class="me-2 my-auto" :width="30" :src="'/images/brands/' + contract.vehicle.brand.logo" />
                                        <Division class="my-auto">
                                            <NavLink class="text-nowrap" :href="`/vehicles/${contract.vehicle.id}`">
                                                {{ contract.vehicle.registration || contract.vehicle.registration_ww }}
                                            </NavLink>
                                            <br />
                                            <SpanField class="text-uppercase bg-teal-600 badge px-1">{{ contract.vehicle.model }}</SpanField>
                                        </Division>
                                    </Division>
                                </td>
                                <td>
                                    {{ formatDateTime(contract.start_date) }}
                                    <SpanField class="badge bg-orange">
                                        {{ contract.duration }} {{ contract.is_monthly ? 'Mois' : `Jour${contract.extended_duration !== 1 ? 's' : ''}` }}
                                    </SpanField>
                                    <Comment class="ms-1 text-danger" v-if="contract.remarks" v-tooltip="contract.remarks" />
                                </td>
                                <td>
                                    {{ formatDateTime(contract.end_date) }}
                                </td>
                                <td>
                                    {{ formatCurrency(contract.rent_price) }}
                                </td>

    Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

  • hblmshblms Posts: 13Questions: 0Answers: 0

    and i have used Datatable simpler withou library of datatable-net-vue3 it work good just one problem when i have the just one record in datatable and i closed it show me this
    nextSubling on null

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    For syntax highlighting see this guide.

    To use Vue components inside a DataTables column, please see the documentation here.

    If you are getting an error, please create a test case using StackBltiz or a minimal git repo showing the issue.

    Allan

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.