DataTables技术求助：lengthMenu失效及Excel导出列标题缺失

我对DataTables做了这些修改：启用列搜索、添加Excel导出功能、设置部分列不导出，但遇到两个问题：

• lengthMenu消失且无法正常使用；
• 启用列搜索后，导出的Excel文件中对应列的标题不完整。

相关代码 #

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css">

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"></script>

<!-- DataTables Buttons JS -->
<script src='https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'></script>
<script src='https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js'></script>

<!-- DataTables Buttons CSS -->
<link rel='stylesheet' href='https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css'>


        <script>
            $(document).ready(function() {
              // Initialize DataTable
              var table = $('#dataTable').DataTable({
                // Enable searching
                searching: true,
                // Enable export buttons
                dom: 'Bfrtip',
                buttons: [{
                  extend: 'excelHtml5',
                  text: 'Download Excel File', // set button text
                  title: $('title').text() + ' - ' + (new Date()).toLocaleString('en-US', {day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit'}).replace(/[\/\,\:]/g, '-'),
                  filename: $('title').text() + '-' + (new Date()).toLocaleString('en-US', {day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit'}).replace(/[\/\,\:]/g, '-') + '.xlsx',
                  exportOptions: {
                    orthogonal: 'export',
                    columns: ':not(:eq(4))' // Avoid export column in excel file 
                  },
                  customize: function(xlsx) {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    $('row c[r^="C"]', sheet).attr('s', '0'); 
                  }
                }],
                // Add length menu options
                lengthMenu: [10, 25, 50, 100],
                // Set default page length
                pageLength: 25
              });

              // Define array of column indexes that are searchable
              var searchableColumns = [1,2,3]; // write the column number -1 to acrive column search

              // Add input fields for each searchable column
              $('#dataTable thead th').each(function(index) {
                if (searchableColumns.includes(index)) {
                  var title = $(this).text();
                  $(this).html('<input type="text" class="form-control" placeholder="Search ' + title + '&quot;>');
                }
              });

              // Apply input field search to each searchable column
              table.columns().every(function(index) {
                if (searchableColumns.includes(index)) {
                  var that = this;
                  $('input', this.header()).on('keyup change clear', function() {
                    if (that.search() !== this.value) {
                      that.search(this.value).draw();
                    }
                  });
                }
              });

              // Apply global search
              $('#global_filter').on('keyup change clear', function() {
                table.search(this.value).draw();
              });
            });
          </script>


                    <table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead style="background-color: #EFF2F7;color:#39579A;">
                        
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">title 1</th>
                                <th class="text-center">title 2</th>
                                <th class="text-center">title 3</th>
                                <th class="text-center">title 4</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">title 1</th>
                                <th class="text-center">title 2</th>
                                <th class="text-center">title 3</th>
                                <th class="text-center">title 4</th>
                            </tr>
                        </tfoot>
                        <tbody>
                                <tr>
                                    <td class="text-center">1</td>
                                    <td class="text-center">aaa</td>
                                    <td class="text-center">abc</td>
                                    <td class="text-center">jklmn</td>
                                    <td class="text-center">stuvwxyzabc</td>
                                </tr>

                                
                                <tr>
                                    <td class="text-center">2</td>
                                    <td class="text-center">bbb</td>
                                    <td class="text-center">def</td>
                                    <td class="text-center">lmnop</td>
                                    <td class="text-center">xyzabcdefghi</td>
                                </tr>

                                
                                <tr>
                                    <td class="text-center">3</td>
                                    <td class="text-center">ccc</td>
                                    <td class="text-center">ghi</td>
                                    <td class="text-center">nopqr</td>
                                    <td class="text-center">cdefghijklmnop</td>
                                </tr>
                                
                            </tbody>
                    </table>

lengthMenu示例图 #

求解决思路！

内容的提问来源于stack exchange，提问作者Lab Devices