Buttons Excel Export and Search Headers not working

acctsw11

Hi,

I can't get Button's Excel export to work with search in header rows. I am getting the error message:
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
at buttons.html5.min.js:8:21584
at _Api.action (buttons.html5.min.js:8:21899)
at run (dataTables.buttons.js:807:19)
at dataTables.buttons.js:822:7

Please see test case: https://live.datatables.net/kitekage/1/edit

Thank you very much!

Regards, Stu

acctsw11

Hi,

Upon further research it appears that in order for the button's Excel download to work, the controls cannot be dynamically created. Here is my fix:

    initComplete: function () {
        this.api()
            .columns()
            .every(function () {
                // Get the input element from the second header row
                let input = this.header(1).querySelector('input');
                let column = this;
 
                // Event listener for user input
                input.addEventListener('keyup', () => {
                    if (column.search() !== input.value) {
                        column.search(input.value).draw();
                    }
                });
            });
    }
});

 <thead>
     <tr>
         <th>num</th>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Extn.</th>
         <th>Start date</th>
         <th>Salary</th>
     </tr>
     <tr data-dt-order="disable">
         <th><input type="text" placeholder="Search..."></th>
         <th><input type="text" placeholder="Search..."></th>
         <th><input type="text" placeholder="Search..."></th>
         <th><input type="text" placeholder="Search..."></th>
         <th><input type="text" placeholder="Search..."></th>
         <th><input type="text" placeholder="Search..."></th>
         <th><input type="text" placeholder="Search..."></th>
     </tr>
 </thead>

This is also the case with select boxes too, fix:
   var table= new DataTable('#example', {
          initComplete: function () {
           var api = this.api();
            api.columns().every( function (dt){
           var column=this;
                let select = $(column.header(1).querySelector('select'));
                select
                .appendTo( select ).on( 'change', function () {
                    var vals = $('option:selected', select).map(function (index, element) {

                        return $.fn.dataTable.util.escapeRegex($(element).val());
                    }).toArray().join('|');
                      let th = column.header();
                      let idx = [...th.parentNode.children].indexOf(th);


                      table.column(idx + ':visible').search( vals.length > 0 ? '^('+vals+')$' : '',true, false )
                        .draw();
                  } );


                column.data().unique().sort().each( function ( d, j ) {
                    if(d)
                     select.append( '<option value="'+d+'">'+d+'</option>' );

                } );
            });

      } ,
  <thead>

      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>

      <tr data-dt-order="disable">
          <th><select multiple="multiple"><option></option></select></th>
          <th><select multiple="multiple"><option></option></select></th>
          <th><select multiple="multiple"><option></option></select></th>
          <th><select multiple="multiple"><option></option></select></th>
          <th><select multiple="multiple"><option></option></select></th>
          <th><select multiple="multiple"><option></option></select></th>

      </tr>
   </thead>