CODEWITHSUNDEEP
javascriptjquerypdfdatatableyadcf
cterra
cterra

Reputation: 55

Incorrect header when exporting to PDF with yadcf filter

When I am trying to export to pdf my Datatable with a filter yadcf, the header show always every case from my filter, how can I hide that?

My javascript is :

var vsan = $('#vsan').DataTable( {
    "lengthMenu": [ [-1, 10, 40, 50], ["All", 10, 40, 50] ],
    "sDom": '<"top"i>fBltif',    
    "buttons": [
        { 
            extend: 'print',
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'excel',
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'pdfHtml5',
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'copyHtml5',
            exportOptions: {
                columns: ':visible'
            }
        },
        {
            extend: 'csv',
            exportOptions: {
                columns: ':visible'
            }
        }
    ],
    "bJQueryUI": true,  //Enable jQuery UI ThemeRoller support
    "bAutoWidth": false,
    "bDestroy": true,
    //"order": [[ 3, "desc" ]], //tri par défaut
    "bStateSave": false, //plante ?
    "bPaginate": true, //Enable or disable pagination.
    "bInfo": true,
});

yadcf.init(vsan, [{column_number : 0, filter_type : "none"}, {column_number : 1, filter_type : "none"}, {column_number : 2, filter_type : "none"}, {column_number : 3, filter_type : "select"}, {column_number : 4, filter_type : "auto_complete"}, {column_number : 5, filter_type : "range_number_slider"},{column_number : 6, filter_type : "none"}, {column_number : 7, filter_type : "range_number_slider"}]);

Here is the problem : enter image description here

i'm using : 

http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js
https://rawgit.com/vedmack/yadcf/8e071af195106fa702f942373c65164b89ca40ff/jquery.dataTables.yadcf.js

Thanks

Upvotes: 1

Views: 1753

Answers (2)

Rahul Jain
Rahul Jain

Reputation: 3141

I too faced this issue and I did something like below:-

exportOptions: { 
columns: ':visible' , 
format: { 
          header: function ( data, column, row ) 
            {
              return data.split('<')[0]; 
            }
       }
}

It worked for me. This will remove the div which is getting added. When I checked my header data was something like: -

column name<div id="yadcf-filter-wrapper--crime_table-7" class="yadcf-filter-wrapper"><select id="yadcf-filter--crime_table-7" class="yadcf-filter " onchange="yadcf.doFilter(this, '-crime_table', 7, 'contains');" onkeydown="yadcf.preventDefaultForEnter(event);" onmousedown="yadcf.stopPropagation(event);" onclick="yadcf.stopPropagation(event);"><option value="-1">Select Column</option>............................<button type="button" id="yadcf-filter--crime_table-7-reset" onmousedown="yadcf.stopPropagation(event);

So I split the div from the column name and kept just the header.

Upvotes: 0

cterra
cterra

Reputation: 55

Ok i did it, but i think it s very weird : 

exportOptions: { 
    columns: ':visible' , 
    format: { 
              header: function ( data, column, row ) 
                {
                  return data.substring(data.indexOf("inline-block")+15,data.indexOf("<span")); 
                }
           }
    }

I don't know if is it to me to patch that, or maybe there is a bug, but the point is that it works !

works

Upvotes: 2

Related Questions