colReorder does not work when using PDF Export

Venky1995

Hi everyone,

I have been working with dataTables for a long time. I was wanting to download the current table as a PDF and followed the various steps provided in the documentation. It worked just fine. The only issue right now is that previously before the Script Tags and Styles were added to make the PDF download buttons work the 'colReorder' was working all fine. Now after the PDF export started working but it breaks the colReorder Functionality. Any idea what could've gone wrong.

Code for the Script and Style Tags:

 <!-- DATATABLES CDN - STARTS  -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/v/dt/dt-1.10.20/cr-1.5.2/datatables.min.css" />
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/cr-1.5.2/datatables.min.js"></script>
    <!-- DATATABLES CDN - ENDS  -->

    <!-- Style Sheets for PDF Maker - STARTS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.1/css/buttons.dataTables.min.css" />
    <!-- Style Sheets for PDF Maker - ENDS -->

    <!-- JS Dependencies for PDF Maker - STARTS -->
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
    <!-- JS Dependencies for PDF Maker - ENDS -->

Code for the dataTable Call (Colreorder worked in this before the buttons were added)

   $("#example2").DataTable({    
            "deferRender": true,
            "aLengthMenu": [[25, 50, 100, 500, 1000, -1], [25, 50, 100, 500, 1000, "All"]],
            "dom": 'Bflprtip',
                "buttons": [
                'pdfHtml5'
            ],
            "ordering": true,
            "pagingType": "full_numbers",           
            "colReorder": true,
            ajax: {
                url: 'some JSON URL ',
                dataSrc: 'features',
            },
            "columns": [
                { 'data': 'properties.sciname' },
                { 'data': 'properties.comname' },
                { 'data': 'properties.tax_level' },
                { 'data': 'properties.taxgroup' },
                { 'data': 'properties.taxgroup2' },
                { 'data': 'properties.wyndd_soc' },
                { 'data': 'properties.wy_contrib' },
                { 'data': 'properties.s_rank' },
                { 'data': 'properties.g_rank' },
                { 'data': 'properties.usfws_esa' },
                { 'data': 'properties.usfs_sens' },
                { 'data': 'properties.blm_wy' },
                { 'data': 'properties.usfs_solc' },
                { 'data': 'properties.wgfd_sgcn' },
                { 'data': 'properties.wgfd_nss' },
                { 'data': 'properties.wy_occur' },
                { 'data': 'properties.wy_origin' },
                { 'data': 'properties.res_status' }
            ],
           
            "responsive": true,
            "colReorder": true
            });

Any help is greatly appreciated!
Thanks!

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Looks like you aren't loading the colreorder.js. You have the concatenated Datatables CSS (which contains colreorder) in line 3 but you are not using the same concatenated Datatables JS. You are just loading the standard JS file. Try using the concatenated one with colreorder. In fact using the download builder you can generate a new set of files with everything you need.

Kevin