Column headings not printed when I have a search on each column.

Glyndwr

I am following: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html to search each column. The issue is that when I print the column headings are not printed. Same issue with export, PDF, etc. I do not want the search at the end of each column as the user will miss this functionality.

My code is:

            //Setup - add a text input to each header cell
    $('#menuTable thead tr').clone(true).appendTo( '#menuTable thead' );
    $('#menuTable thead tr:eq(1) th').each( function (i) {
        if (i < 7){
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( menuTable.column(i).search() !== this.value ) {
                    menuTable
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        }
    } );

    var menuTable = $('#menuTable').DataTable( {

        "info":     false,
        dom: 'Bfrtip',

        buttons: [
                  {
                      extend: 'copy',
                      exportOptions: {
                          columns: [ 1, 2, 3, 4, 5, 6 ]
                      }
                  },
                  {
                      extend: 'csv',
                      exportOptions: {
                          columns: [ 1, 2, 3, 4, 5, 6 ]
                      }
                  },
                  {
                      extend: 'excel',
                      exportOptions: {
                          columns: [ 1, 2, 3, 4, 5, 6 ]
                      }
                  },
                  {
                      extend: 'pdf',
                      exportOptions: {
                          columns: [ 1, 2, 3, 4, 5, 6 ]
                      }
                  },
                  {
                      extend: 'print',
                      exportOptions: {
                          columns: [ 1, 2, 3, 4, 5, 6 ]
                      }
                  },
              ],
        columns: [
              {data: 'hmId',
                      visible: false,
                      searchable: false},
              {data: 'hmType'},
              {data: 'hmName'},
              {data: 'hmDiet', "defaultContent": ""},
              {data: 'hmReligious', "defaultContent": ""},
              {data: 'hmWeight', "defaultContent": ""},
              {data: 'hmkJ', "defaultContent": ""},
              {data: null,
                  className: "center",
                  defaultContent: '<button id="select">Select</button>'
              },
              {data: null,
                  className: "center",
                  defaultContent: '<button id="delete">Delete</button>'
              }
             ],
    } );

colin

Hi @Glyndwr ,

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

kthorngren

Not sure I understand exactly what you are looking for but it sounds like you may need to add the orderCellsTop option as shown in the example you linked to. This will move the sorting to the top header row and use that row for the export.

Kevin