Why does the select "show 10 entries" with of Dom Bfrtip disappear in Vue 3?

ag281198

Hello I have the problem that when I use the dom Bfrtip disappears the select of the number of entries that I want to display, does anyone know why? This is my code:

import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net';
import Buttons from 'datatables.net-buttons-bs5';
import print from 'datatables.net-buttons/js/buttons.print';
import ButtonsHtml5 from 'datatables.net-buttons/js/buttons.html5';
import pdfmake from 'pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import JsZip from 'jszip';
pdfmake.vfs = pdfFonts.pdfMake.vfs;
window.JSZip = JsZip;
DataTable.use(Buttons);
DataTable.use(pdfmake);
DataTable.use(print);
DataTable.use(ButtonsHtml5);
DataTable.use(DataTablesCore);

export default {
    props: {
        fetchUrl: {
            type: String,
            required: true
        }
    },
    components: {
        DataTable,
    },
    data() {
        return {
        data: [],
        tableOptions: {
            dom: 'Bfrtip',
            responsive: false,
            paging: true,
            pageLength: 10,
            ordering: true,
            searching: true,
            autoWidth: false,
            buttons: [
            {
                title: 'Excel',
                extend: 'excelHtml5',
                text: '<i class="fa-solid fa-file-excel"></i>',
                className: 'btn-Excel'
            },
            {
                title: 'PDF',
                extend: 'pdfHtml5',
                text: '<i class="fa-solid fa-file-pdf"></i>',
                className: 'btn-PDF'
            },
            {
                title: 'Print',
                extend: 'print',
                text: '<i class="fa-solid fa-print"></i>',
                className: 'btn-print'
            },
            
            ],
            language: {
            paginate: {
                first: 'First',
                previous: 'Previous',
                next: 'Next',
                last: 'Last',
            },
            search: 'Filter:',
            emptyTable: 'No data',
            },
        },
        tableColumns: [
            { title: 'ID', data: 'Id' },
            { title: 'Name', data: 'Name' },
            { title: 'Description', data: 'Description' },
            { title: 'Building', data: 'Building' },
            { title: 'Country', data: 'Country' },
            {
                title: 'Actions',
                data: null,
                render: function(data, type, row) {
                    return '<button class="btn btn-primary" @click="handleActionClick(' + row.Id + ')">Details</button>';
                }
            },
        ],
        }
    },
    created() {
        fetch(this.fetchUrl)
        .then((response) => response.json())
        .then((data) => {
        this.data = data || [];
        })
        .catch((error) => {
        console.error('Error:', error);
        });
    },
}

allan

Like your other posts, please link to a test case (StackBlitz is good for Vue questions) showing the issue.

Allan

r0bertinski

Hi ag281198 ,
the answer of your question is here:
https://datatables.net/extensions/buttons/index#dom-parameter

var table = $('#example').DataTable( {
buttons: [
'copy', 'excel', 'pdf'
]
} );

table.buttons().container()
.appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );