Upgrade to Buttons 1.2.1 loses Excel and PDF button

brianjaikens-msl

Hi,
We updated a project we are currently developing from Datatables 1.10.07 to 1.10.12 and buttons 1.1.2 to buttons 1.2.1.
The excel and pdf buttons we had on the bottom of our tables disappeared. The other buttons (csv, copy & print) are still there and function OK.

The init for the excel button is: -

buttons: [
{
extend: 'excelHtml5',
title: 'Client Portal Compliance List',
exportOptions: { columns: [0,1,2] },
sheetName: 'Job List'
}
]

So there is no reason we can see why this is the case. For now we have had to go back to Buttons 1.1.2.

Any ideas as to why they no longer appear?

allan

Can you link to the page showing the issue please? I can only guess that the page isn't including the dependencies, since as you can see from this example the buttons should work.

Allan

brianjaikens-msl

Thanks for the reply Allan, but the site is not public.

However I can give you as much code as I can. There are no issues (404) with any links.

                        <div class="table-responsive">

                        <link rel="stylesheet" type="text/css" href="assets/plugins/datatables/css/jquery.datatables.css" />
                        <link rel="stylesheet" type="text/css" href="assets/plugins/datatables/Buttons-1.2.1/css/buttons.dataTables.min.css"/>

                        <table id="complisttable" class="table display table-condensed table-striped">
                        <thead>
                            <tr>
                                <th rowspan="2" width="24%">Compliance Type</th>
                                <th rowspan="2" width="8%">Frequency</th>
                                
                                <th rowspan="2" width="9%">Status<br>Unknown</th>
                                <th rowspan="2" width="9%">Fully<br>Compliant</th>
                                <th rowspan="2" width="9%">Compliant Further Works Recommended</th>
                                <th colspan="3" class="text-center">Non Compliant</th>
                                
                                <th rowspan="2" width="7%">&nbsp; </th>
                                <th rowspan="2" width="7%">&nbsp; </th>
                            
                            </tr>
                            <tr>
                                <th width="9%" class="active">Further Works Required</th>
                                <th width="9%" class="active">Passed Attendance Date / Awaiting Certification</th>
                                <th width="9%" class="active">Non Compliant Other</th>
                            </tr>
                        </thead>
                        <tbody>
<!-- row rendering code -->
                        </tbody>    
                        </table>
                        </div>

<script type="text/javascript" src="assets/plugins/datatables/js/jquery.datatables.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/Buttons-1.2.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/Buttons-1.2.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="assets/plugins/datatables/Buttons-1.2.1/js/buttons.print.min.js"></script>    
<script type="text/javascript" src="assets/plugins/jszip/jszip.min.js"></script>
<script type="text/javascript" src="assets/plugins/pdfmake/pdfmake.min.js"></script>
<script type="text/javascript" src="assets/plugins/pdfmake/vfs_fonts.js"></script>

<script type="text/javascript" src="assets/plugins/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="assets/plugins/flot/jquery.flot.resize.min.js"></script>
<script type="text/javascript" src="assets/plugins/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="assets/js/dashboard.js"></script>

<script type="text/javascript" src="assets/plugins/bootstrap-select/js/bootstrap-select.min.js"></script>

    <script type="text/javascript">

        $(document).ready( function ()
        {
            ShowHideContactDetails();

            var table1 = $('#complisttable').DataTable(
                {
                    aLengthMenu: [
                            [10, 25, 50, 100, -1],
                            [10, 25, 50, 100, "All"]
                    ],
                    //http://stackoverflow.com/questions/9443773/how-to-show-all-rows-by-default-in-jquery-datatable
                    iDisplayLength: -1,

                    aoColumnDefs:[{"bSortable": false, "aTargets":[8,9]}],

                    stateSave: true,
                    
                    language: {
                        "emptyTable": "No compliance programmes / asset registers found."
                        },

                    dom: 'lfrtip<"clear"B>',
                    buttons: [ 
                                { 
                                    extend: 'excelHtml5', 
                                    title: 'Client Portal Compliance List',
                                    exportOptions: { columns: [0,1,2,3,4,5,6,7] },
                                    sheetName: 'Job List' 
                                },
                                { 
                                    extend: 'pdfHtml5', 
                                    title: 'Client Portal Compliance List', 
                                    //message: ' from MSL Property Care Services Ltd',
                                    orientation: 'landscape',
                                    //orientation: 'portrait',
                                    exportOptions: { columns: [0,1,2,3,4,5,6,7] }, 
                                    customize: function ( doc ) {
                                            var cols = [];
                                            cols[0] = {text: 'Created by MSL Client Portal', alignment: 'left', margin:[20] };
                                            cols[1] = {text: 'MSL Property Care Services Ltd', alignment: 'right', margin:[0,0,20] };
                                            var objFooter = {};
                                            objFooter['columns'] = cols;
                                            doc['footer']=objFooter;
                                    }
                                }, 
                                { 
                                    extend: 'csvHtml5', 
                                    title: 'Client Portal Compliance List',
                                    exportOptions: { columns: [0,1,2,3,4,5,6,7] } 
                                }, 
                                { 
                                    extend: 'copyHtml5',
                                    exportOptions: { columns: [0,1,2,3,4,5,6,7] }
                                },
                                {
                                    extend: 'print',
                                    exportOptions: { columns: [0,1,2,3,4,5,6,7] }
                                } 
                            ]                        
                }
            );
                

            var table2 = $('#compIssuesTable').DataTable(
                {
                    aLengthMenu: [
                            [10, 25, 50, 100, -1],
                            [10, 25, 50, 100, "All"]
                    ],
                    iDisplayLength: 50,

                    stateSave: true,

                    language: {
                        "emptyTable": "No compliance errors found."
                        },
                    
                    dom: 'lfrtip<"clear"B>',
                    buttons: [ 
                                { 
                                    extend: 'excelHtml5', 
                                    title: 'Client Portal Compliance Issues List',
                                    sheetName: 'Job List' 
                                }, 
                                { 
                                    extend: 'pdfHtml5', 
                                    title: 'Client Portal Compliance Issues List', 
                                    //message: ' from MSL Property Care Services Ltd',
                                    //orientation: 'landscape',
                                    orientation: 'portrait',
                                    customize: function ( doc ) {
                                            var cols = [];
                                            cols[0] = {text: 'Created by MSL Client Portal', alignment: 'left', margin:[20] };
                                            cols[1] = {text: 'MSL Property Care Services Ltd', alignment: 'right', margin:[0,0,20] };
                                            var objFooter = {};
                                            objFooter['columns'] = cols;
                                            doc['footer']=objFooter;
                                    }
                                }, 
                                { 
                                    extend: 'csvHtml5', 
                                    title: 'Client Portal Compliance Issues List',
                                }, 
                                { 
                                    extend: 'copyHtml5',
                                },
                                {
                                    extend: 'print',
                                } 
                            ]                        
                }
            );
            
            var chartDataURL = <% response.write """" & BuildLink("chartdata.asp", Array("fi","ty","st","d","rf","sf")) & "&gt=""" %>
        
            ShowOverallComplianceStatusPiechart("complianceStatusPieChart", chartDataURL + "203");
            
        } ) 

    </script>

brianjaikens-msl

I'm currently still experimenting with you're live site so you may want to hold off looking at the above code until I've finished

brianjaikens-msl

Hi Allan,

You will be glad to know I've managed to sort the problem out. It seems the new versions are much pickier on the order of the dependencies.

Moving the javascript references of "buttons.html5.min.js" and "buttons.print.min.js" to the bottom of the list sorted the problem.

Couldn't help but notice that there are still a lot of references to a very old version of jQuery in your examples and the live site. Is there a reason for that?

allan

Thanks for the updates. Yes, I was just looking through the code and spotted the ordering as well.

The reason for this order dependency now is that Buttons provides the option for the CommonJS loader to pass in previously loaded dependencies. So Buttons, at that point, takes the value of the global variables if they weren't passed in. Thus before they were holding undefined. Using a function might be an option to solve this if it trips more people up.

Couldn't help but notice that there are still a lot of references to a very old version of jQuery in your examples and the live site. Is there a reason for that?

The examples use jQuery 1.12.3 which is just one behind the current 1.12.4 release (for the 1.x branch). The live site could definitely do with being updated.

I use jQuery 1.x in the examples for compatibility with older browsers.

Allan