Can't get header name when exporting to excel

JacobZ

I'm pretty desperate here, I've picked up some unfinished code by ex worker and I can't get this to work.

most of the columns have indvidual searach/select and when exporting to excel it shows the full tag instead of the header.

var tablelListGenerator = $('#tblListGenerator').DataTable({                
            "bDestroy": true,
            data: returnedData.Companies,
            "ordering": false,                
            columns: [                    
                { "data": "companyID" },
                { "data": "rank" },
                { "data": "companyName" },
                { "data": "score" },
                { "data": "size" },
                { "data": "accreditationRating" },                    
                { "data": "responseRate" },
                { "data": "isEligible" },
                { "data": "culturalInsightComplete" },
                { "data": "coquValidated" },
                { "data": "fraudCheckStatus" },
                { "data": "prCheckStatus" },
                { "data": "recognitionSector" },
                { "data": "open", "name": "open" }                   

            ],
            columnDefs: [
                {
                    render: function (data, type, row) {
                        if (data === true) {
                            return "Yes";
                        }
                        else {
                            return "No";
                        }
                    },
                    targets: ["js-col-coquValidated", "js-col-is-eligible","js-col-cultureal-insight-complete"]
                },
                {
                    render: function (data, type, row) {                            
                        return parseFloat(data).toFixed(0) + '%';
                    },
                    targets: "js-col-response-rate"
                },
            ],

            dom: '<lf<t><ip><"clearfix"><"mt-10"B>>',
            buttons: [
                {
                    extend: 'excelHtml5',
                    text: 'Export .xlsx',
                    title: returnedData.ExportFileName,
                    customize: function (xlsx) {                            
                        $('sheets sheet', xlsx.xl['workbook.xml']).attr('name', returnedData.ExportTabName);
                    },
                    exportOptions: {
                        modifier: {
                            page: 'all'
                        },
                        format: {
                            header: function (data, columnIdx) {
                                return data.trim();
                            },
                            body: function (data, row, column) {

                                return data;
                            }
                        }
                    }
                }
            ],

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

                this.api().columns()
                    .eq(0)
                    .each(function (colIdx) {
                        if (colIdx === 5) {
                            console.log($(api.column(colIdx)));
                            $(api.column(colIdx)).attr("display", "none");
                        }

                        // 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+'" class="table-col-search-header" />'); //this currently appears in the export!!!

                        // On every keypress in this input
                        $(
                            'input',
                            $('.filters th').eq($(api.column(colIdx).header()).index())
                        )
                            .off('keyup change')
                            .on('keyup change', function (e) {
                                e.stopPropagation();

                                // 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();

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

                //dropdown filters
                this.api().columns([5, 7, 8, 9, 10, 11, 12, 13]).every(function () {
                    var column = this;
                    var columnHeader = $(column.header()).text().trim();
                    var select = $('<select class="js-table-filter" style="display: block"><option value="">' + columnHeader +'</option></select>')
                        .appendTo($(column.header()).empty())
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    column.data().unique().sort().each(function (data, j) {
                        var optionValue = data;

                        if (data === true) {
                            optionValue = 'Yes';
                        }

                        if (data === false) {
                            optionValue = 'No';
                        }

                        select.append('<option value="' + optionValue + '">' + optionValue + '</option>')
                    });
                });

                this.api().columns([3]).every(function () {
                    //var column = this;                        
                    //do some custom filtering here or hide the input element.
                });

                this.api().columns([4]).every(function () {
                    //TODO - hide this conditionally without breaking the rules defined above.
                    this.visible(returnedData.ShowSizeColumn);
                });

                //override columns that don't need filters
                var cellSize = $('.filters th.js-col-size');
                $(cellSize).html('');

                var cellScore = $('.filters th.js-col-score');
                $(cellScore).html('');

                var cellResponseRate = $('.filters th.js-col-response-rate');
                $(cellResponseRate).html('');
            }
        });
    },
    complete: function () {

        $('#dvContent').unblock();
    }

colin

I'm not clear what you mean by the full tag. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin