i have a problem of using pdf buttons and selection filter column together

shkohamid

i used datatable buttons like pdf, excel and everything work fine until i add a code for Individual column searching (select inputs) it is work fine but damaged a button for pdf, excel when i click button it download pdf file with only id column data the other data disappear and that is my code

    // DataTable
    let table = new DataTable('#dataTable', {
        select:true,
        responsive: true,
        info: true,
        ordering: true,
        paging: true,
        stateSave: false,
        layout: {            
            bottomEnd: {
                paging: {
                    firstLast: true
                }
            }            
        },
        // //this function used for search
        initComplete: function () {

            // Apply the search
            this.api()
            .columns([1,2])
            .every(function () {
                let column = this;
                let title = column.footer().textContent;

                // Create input element
                let input = document.createElement('input');
                input.placeholder = title;
                column.footer().replaceChildren(input);

                // Event listener for user input
                input.addEventListener('keyup', () => {
                    if (column.search() !== this.value) {
                        column.search(input.value).draw();
                    }
                });
            });

            // // this function used for filter selection
            this.api()
                    .columns([0,3])
                    .every(function () {
                        let column = this;

                        // Create select element
                        let select = document.createElement('select');
                        select.add(new Option(''));
                        column.footer().replaceChildren(select);

                        // Apply listener for user change in value
                        select.addEventListener('change', function () {
                            column
                                .search(select.value, {exact: true})
                                .draw();
                        });

                        // Add list of options
                        column
                            .data()
                            .unique()
                            .sort()
                            .each(function (d, j) {
                                select.add(new Option(d));
                            });


                    });
        },
        buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]

    });
    table.buttons().container().appendTo( '#toolbar' );

allan

Exclude the footer from the PDF export using the footer option. See this example.

Allan

shkohamid

thanks a lot it solved my problem