Filter global displays twice

Filter global displays twice

yinyangyinyang Posts: 25Questions: 3Answers: 0

Hi,

I've got a problem when filtering with custom filter global input. When I start to filter, a second filter displays (and the length control element too!) on the .top div of my datatable. however, these dom options aren't specified initially.

Here's my code :

<input v-if="projectsSearchInput" type="search" class="global-filter-input" @keyup="filterGlobal" data-datatable-id="dashboard_projectTable">
<table class="table responsive mb-0" id="dashboard_projectTable">
    <thead>
        <tr>
            <th scope="col" class="min-tablet-l">&nbsp;</th>
            <th scope="col">Titre <i class="fas fa-sort-down"></i></th>
            <th scope="col" class="min-tablet-l">Responsable <i class="fas fa-sort-down"></i></th>
            <th scope="col" class="min-tablet-l">Statut <i class="fas fa-sort-down"></i></th>
            <th scope="col">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(project, index) in projects"
            :key="index"
        >
            <td>
                <img
                    class="img-fluid"
                    src="@/assets/img/upload/project/project-1.png"
                    :alt="`${project.title}`"
                    width="68"
                    height="51"
                >
            </td>
            <td>{{ project.title }}</td>
            <td>{{ project.manager }}</td>
            <td>{{ project.status }}</td>
            <td>
                <router-link to="#"><i class="icon icon-eye"></i></router-link>
                <router-link to="#"><i class="icon icon-trash"></i></router-link>
                <router-link to="#"><i class="icon icon-horizontal-dots-menu"></i></router-link>
            </td>
        </tr>
    </tbody>
</table>

export default {
    data () {
        return {
            projectsSearchInput: false,
            projectTable: null,
            dataTableLanguages: {
                lengthMenu: 'Afficher _MENU_ groupes par page',
                zeroRecords: 'Aucun résultat',
                infoEmpty: 'Aucun résultat',
                paginate: {
                    previous: 'Précédent',
                    next: 'Suivant'
                }
            },
            projects: [
                {
                    title: 'De Finibus Bonorum et Malorum',
                    manager: 'Olivier Dupont',
                    status: 'En cours',
                    extract: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur, adipisci'
                },
                {
                    title: 'De Finibus Bonorum et Malorum',
                    manager: 'Olivier Dupont',
                    status: 'En cours',
                    extract: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur, adipisci'
                },
                {
                    title: 'Lorem ipsum dolor sic amet',
                    manager: 'Olivier Dupont',
                    status: 'En cours',
                    extract: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur, adipisci'
                },
                {
                    title: 'De Finibus Bonorum et Malorum',
                    manager: 'Olivier Dupont',
                    status: 'En cours',
                    extract: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur, adipisci'
                },
                {
                    title: 'De Finibus Bonorum et Malorum',
                    manager: 'Olivier Dupont',
                    status: 'En cours',
                    extract: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur, adipisci'
                },
                {
                    title: 'De Finibus Bonorum et Malorum',
                    manager: 'Olivier Dupont',
                    status: 'En cours',
                    extract: 'Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur, adipisci'
                }
            ]
        }
    },
    mounted () {
        this.projectTable = new DataTable('#dashboard_projectTable', {
            dom: '<"top">rt<"bottom"p><"clear">',
            language: this.dataTableLanguages,
            ordering: true
        })
    },
    watch: {
        projects (val) {
            this.projectTable.destroy()
            this.$nextTick(() => {
                this.projectTable = new DataTable('#dashboard_projectTable', {
                    dom: '<"top">rt<"bottom"p><"clear">',
                    language: this.dataTableLanguages,
                    ordering: true
                })
            })
        },
    },
    methods: {
        filterGlobal (e) {
            let value = e.target.value
            let datatableId = e.target.dataset.datatableId

            $(`#${datatableId}`).DataTable().search(
                value,
                false,
                true
            ).draw()
        }
    }
}

Here's an image of the render :

How can I fixed that ? Thank you.

Answers

  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin

    You might need to put the table into a div which has v-once on it to stop Vue from rebuilding the DOM, since DataTables controls its own DOM.

    Allan

  • yinyangyinyang Posts: 25Questions: 3Answers: 0

    Thank you

  • yinyangyinyang Posts: 25Questions: 3Answers: 0

    Hi, I come back to you because v-once doesn't work :

    <div v-if="projectsView === 'list'">
        <div v-once>
        <table class="table responsive mb-0" id="dashboard_projectTable">
            <thead>
            <tr>
                <th scope="col" class="min-tablet-l">&nbsp;</th>
                <th scope="col">Titre <i class="fas fa-sort-down"></i></th>
                <th scope="col" class="min-tablet-l">Responsable <i class="fas fa-sort-down"></i></th>
                <th scope="col" class="min-tablet-l">Statut <i class="fas fa-sort-down"></i></th>
                <th scope="col">Action</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <img
                        class="img-fluid"
                        src="@/assets/img/upload/project/project-1.png"
                        alt="project 1"
                        width="68"
                        height="51"
                    >
                </td>
                <td>De Finibus Bonorum et Malorum</td>
                <td>Olivier DUPONT</td>
                <td>En cours</td>
                <td>
                    <router-link to="#"><i class="icon icon-eye"></i></router-link>
                    <router-link to="#"><i class="icon icon-trash"></i></router-link>
                    <router-link to="#"><i class="icon icon-horizontal-dots-menu"></i></router-link>
                </td>
            </tr>
            <tr>
                <td>
                    <img
                        class="img-fluid"
                        src="@/assets/img/upload/project/project-1.png"
                        alt="project 1"
                        width="68"
                        height="51"
                    >
                </td>
                <td>De Finibus Bonorum et Malorum</td>
                <td>Olivier DUPONT</td>
                <td>En cours</td>
                <td>
                    <router-link to="#"><i class="icon icon-eye"></i></router-link>
                    <router-link to="#"><i class="icon icon-trash"></i></router-link>
                    <router-link to="#"><i class="icon icon-horizontal-dots-menu"></i></router-link>
                </td>
            </tr>
            <tr>
                <td>
                    <img
                        class="img-fluid"
                        src="@/assets/img/upload/project/project-1.png"
                        alt="project 1"
                        width="68"
                        height="51"
                    >
                </td>
                <td>De Finibus Bonorum et Malorum</td>
                <td>Olivier DUPONT</td>
                <td>En cours</td>
                <td>
                    <router-link to="#"><i class="icon icon-eye"></i></router-link>
                    <router-link to="#"><i class="icon icon-trash"></i></router-link>
                    <router-link to="#"><i class="icon icon-horizontal-dots-menu"></i></router-link>
                </td>
            </tr>
            <tr>
                <td>
                    <img
                        class="img-fluid"
                        src="@/assets/img/upload/project/project-1.png"
                        alt="project 1"
                        width="68"
                        height="51"
                    >
                </td>
                <td>De Finibus Bonorum et Malorum</td>
                <td>Olivier DUPONT</td>
                <td>En cours</td>
                <td>
                    <router-link to="#"><i class="icon icon-eye"></i></router-link>
                    <router-link to="#"><i class="icon icon-trash"></i></router-link>
                    <router-link to="#"><i class="icon icon-horizontal-dots-menu"></i></router-link>
                </td>
            </tr>
            <tr>
                <td>
                    <img
                        class="img-fluid"
                        src="@/assets/img/upload/project/project-1.png"
                        alt="project 1"
                        width="68"
                        height="51"
                    >
                </td>
                <td>De Finibus Bonorum et Malorum</td>
                <td>Olivier DUPONT</td>
                <td>En cours</td>
                <td>
                    <router-link to="#"><i class="icon icon-eye"></i></router-link>
                    <router-link to="#"><i class="icon icon-trash"></i></router-link>
                    <router-link to="#"><i class="icon icon-horizontal-dots-menu"></i></router-link>
                </td>
            </tr>
            <tr>
                <td>
                    <img
                        class="img-fluid"
                        src="@/assets/img/upload/project/project-1.png"
                        alt="project 1"
                        width="68"
                        height="51"
                    >
                </td>
                <td>De Finibus Bonorum et Malorum</td>
                <td>Olivier DUPONT</td>
                <td>En cours</td>
                <td>
                    <router-link to="#"><i class="icon icon-eye"></i></router-link>
                    <router-link to="#"><i class="icon icon-trash"></i></router-link>
                    <router-link to="#"><i class="icon icon-horizontal-dots-menu"></i></router-link>
                </td>
            </tr>
            </tbody>
        </table>
        </div>
    </div>
    
  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin

    I'm going to need a link to your page showing the issue so I can help to debug it in that case.

    Allan

Sign In or Register to comment.