Export Button in conjunction with Column Filters

Curtisf

Greetings. I'm using the custom filter select boxes on my dataTables, and trying to implement the export buttons. When I export, however, I'm getting <options> from the select showing up as a heading on the export. The code I'm using to generate the select filter is:

                                    this.api().columns([2, 3]).every( function () {
                                        var column = this;
                                        var select = $('<br/><select><option value=""></option></select>')
                                            .appendTo( $(column.header()) )
                                            .on( 'change', function () {
                                                var val = $.fn.dataTable.util.escapeRegex(
                                                    $(this).val()
                                                );

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

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

I'm turning on the buttons by using:

dom: 'Bfrtip', 
buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] }

And when I go to export the results get for the column heading are:

Created ByA. FadhelA. GarciaC. FullerD. HauserJ. Perdomo

The HTML after DataTables load is:

<th class="sorting" tabindex="0" aria-controls="table_iMZk6N3q3je7" rowspan="1" colspan="1" aria-label="Created By: activate to sort column ascending" style="width: 137px;">
  Created By
  <select>
    <option value=""></option>
    <option value="A. Fadhel">A. Fadhel</option>
    <option value="A. Garcia">A. Garcia</option>
    <option value="C. Fuller">C. Fuller</option>
    <option value="D. Hauser">D. Hauser</option>
    <option value="J. Perdomo">J. Perdomo</option>
  </select>
</th>

How can I get it to export without showing the options in the select?

Thanks!

colin

Hi @Curtisf ,

It sounds like there's a lot going on there. We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. 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

Curtisf

Sorry, here is a code sample:

http://live.datatables.net/qikifiki/1/

colin

Hi @Curtisf ,

Take a look at this example here. This does what you're after I believe. I've dropped the selects and the inputs to a second header. This has two advantages - 1, it doesn't show your initial problem, and 2, the order doesn't change whenever those elements (input & select) are clicked into.

Hope that works for you, if not, let us know,

Cheers,

Colin

Curtisf

Thank you so much!!! Your fix worked great, and will definitely improve my site. There is one thing that wasn't on the sample that I sent you that I've run into now. Here is another example: live.datatables.net/wesuquke/1/edit?html,css,js,output

Is there a way to make DataTables ignore the first column when it uses the buttons to export the table? The button image in the first column reveals a hidden div of menu items. When I go to export the table, all of the options form that menu are showing up, can I make it ignore that column on the export?

Thank you again!!

colin

Hi @Curtisf ,

You're welcome. Ignoring the first column is easily done using exportOptions.columns, as shown in this example here. Hope that gets you going,

Cheers,

Colin