jquery datatable not working in firefox

Question

I use the below code

 $("body").html(tab).promise().done(function () {

            $('table').DataTable({
                initComplete: function () {
                    $('.buttons-excel').click()
                },
                paging: false,
                columnDefs: [{
                    targets: 'no-sort',
                    orderable: false
                }],

                dom: 'Bfrtip',
                fixedHeader: {
                    header: true
                },
                buttons: {
                    extend: 'excelHtml5',
                    customize: function( xlsx ) {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];

                        $('row c[r^="C"]', sheet).attr( 's', '2' );
                    },
                    buttons: [{
                        extend: 'excel',
                        text: '<i class="fa fa-print"></i> excel',
                        title: filename,
                        exportOptions: {
                            columns: ':not(.no-print)'
                        }
                    }],
                    dom: {
                        container: {
                            className: 'dt-buttons'
                        },
                        button: {
                            className: 'btn btn-default'
                        }
                    }
                }
            });
 });

This works fine in Chrome and IE

But in firefox, i get the below error

not well-formed (unknown)

Some background about the code:

The page is loaded inside iFrame

There will be only one table inside this page that uses jquery datatable

The page will automatically trigger click of excel to start downloading

I have read in few questions on SO that states that we should change MIME type for ajax calls, but here we have No ajax calls made, as the table will be loaded on pageload in server side code

Answer 1

This is wierd

Turns out that Firefox is not allowing downloads from an iFrame if its hidden

Previously the code was

  <iframe id="iframeFile" runat="server" style="display:none"></iframe>

Then I tried changing it to

  <iframe id="iframeFile" runat="server" style="width:0;height:0;overflow:hidden"></iframe>

it all started working! wierd

P.S: if someone can add information on how this worked in comments section, that would help people who read this in future

Answer 2

make sure you have followed HTML structure of table.

1. Well defined tabel start and end tag.

2. for header line make sure you have defined structure like this <thead><tr><th>...</th><th>...</th>...</tr></thead>

3. for all data record row make sure you have defined structure like this <tbody><tr><td>...</td><td>...</td></tr></tbody>

4. Number of column in each row must be equal.

5. If you have footer line make sure you have defined structure like this <tfoot><tr><td>...</td><td>...</td></tr></tfoot>