Search code examples
djangodatatabledjango-datatabledatatable-buttons

How to show dataTable.Buttons in django app

I utilized dataTable.view to show particular data in my Django app and I'd like to show buttons such as csv and excel.

I add buttons in options but when I want to construct them (according to the document), this error: $.fn.dataTable.Buttons is not a constructor appears.

I also added buttons.dataTables.min.js , buttons.html5.min.js, buttons.foundation.min.js in the UI.

var options = {
.....
buttons: [
    'excel', 'csv'
     ],
     sDom: 'Bfrtip'
}//end of defaultDataTableOptions


var datatable = datatableview.initialize($('.datatable'), options);
var table = $('#DataTables_Table_0').DataTable();
new $.fn.dataTable.Buttons( table, {
        buttons: [
            'copy', 'excel'
        ]
    } );
 table.buttons().container().appendTo( $('#buttons', table.table().container() ) );


$.fn.dataTable.Buttons is not a constructor
Solution

  • I also wasn't able to show export buttons using $.fn.dataTable..

    But I was able to find another solution to show export buttons:

     $(document).ready(function() {
            $('#exampleTable').DataTable( {
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ]
            } );
        } );

    This will show the following: Datatables export

    Used cdn's:

    <link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/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/2.4.2/js/buttons.html5.min.js"></script>

    Full tested file:

    <!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" rel="stylesheet">
        <link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css" rel="stylesheet">

        <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
        <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/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/2.4.2/js/buttons.html5.min.js"></script>
    </head>
    <body>
        <table id="exampleTable" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011-04-25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011-07-25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009-01-12</td>
                    <td>$86,000</td>
                </tr>
            </tbody>
        </table>

    <script>
        $(document).ready(function() {
            $('#exampleTable').DataTable( {
                dom: 'Bfrtip',
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5'
                ]
            } );
        } );
    </script>
    </body>
</html>

    (As Stack Overflow isn't able to let users use a download button, these export buttons will not work in the snippet.)

    --EDIT (after @NASRIN's comment):

    To export all table data, you would need to add a "all" or "show all" button, so instead of 10-per-page, as you normally would, you would show all table data on the same page, and export. This is because the export will only download the currently shown table data.

    See example:

    all data example

    You can do this by using the following:

    lengthMenu: [
        [10, 25, 50, -1],
        [10, 25, 50, 'All']
    ]

    Source: https://datatables.net/examples/advanced_init/length_menu

    More information can be found on this question.