Export Button in conjunction with Column Filters

Export Button in conjunction with Column Filters

CurtisfCurtisf Posts: 3Questions: 1Answers: 0

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!

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • CurtisfCurtisf Posts: 3Questions: 1Answers: 0

    Sorry, here is a code sample:

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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • CurtisfCurtisf Posts: 3Questions: 1Answers: 0

    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!!

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

This discussion has been closed.