Button Excel Missing After Add Filter Multiple Columns

numus175

please help i want make filter multiple columns and show button download excel.
i reffer from this link
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html
this works.

but my problem button download excel is missing.

when remove this code again.

                    initComplete: function () {
                        var api = this.api();

                        // For each column
                        api
                            .columns()
                            .eq(0)
                            .each(function (colIdx) {
                                // Set the header cell to contain the input element
                                var cell = $('.filters th').eq(
                                    $(api.column(colIdx).header()).index()
                                );
                                var title = $(cell).text();
                                $(cell).html('<input type="text" placeholder="' + title + '" />');

                                // On every keypress in this input
                                $(
                                    'input',
                                    $('.filters th').eq($(api.column(colIdx).header()).index())
                                )
                                    .off('keyup change')
                                    .on('change', function (e) {
                                        // Get the search value
                                        $(this).attr('title', $(this).val());
                                        var regexr = '({search})'; //$(this).parents('th').find('select').val();

                                        var cursorPosition = this.selectionStart;
                                        // Search the column for that value
                                        api
                                            .column(colIdx)
                                            .search(
                                                this.value != ''
                                                    ? regexr.replace('{search}', '(((' + this.value + ')))')
                                                    : '',
                                                this.value != '',
                                                this.value == ''
                                            )
                                            .draw();
                                    })
                                    .on('keyup', function (e) {
                                        e.stopPropagation();

                                        $(this).trigger('change');
                                        $(this)
                                            .focus()[0]
                                            .setSelectionRange(cursorPosition, cursorPosition);
                                    });
                            });
                    }


   <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.2.3/js/dataTables.fixedHeader.min.js"></script>

button excel show

Thank you in advance for you help

colin

It looks like you're missing the files needed for the export. If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table for the excel button. Note also that you need to include 'B' in dom,

Colin

numus175

Thank Collin.

done with this code:
https://live.datatables.net/tepozedi/41/edit

numus175

Hi @collin,

https://live.datatables.net/tepozedi/41/edit
why header column blank when export excel,

im already add
{ extend: 'excelHtml5', footer: true,header: true },

but still blank.

allan

Because DataTables is treating the second row in the header as the main row. You can use orderCellsTop to control that, but you do then need to update the selector for where the input should be inserted.

Updated example: https://live.datatables.net/tepozedi/45/edit .

Allan

kthorngren

Use orderCellsTop to move the sorting click events to the top row. The export will follow this setting and export the top row header instead of the second row header which is causing the empty fields.

Also you will probably need to use the code you first linked to, this example to have the search inputs populated in the second header.

Kevin

numus175

hi @allan and @kthorngren

thank for reply. now solve with this code

https://live.datatables.net/bosafozi/1/edit