Buttons Copy, Excel, PDF disappear after all page is loaded

Buttons Copy, Excel, PDF disappear after all page is loaded

bobino17bobino17 Posts: 7Questions: 2Answers: 0

My HEAD

<head><style type="text/css">
    <title>Train - Timetable</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://127.0.0.1:8000/css/style.css">

    
    <!-- <link rel="stylesheet" href="http://127.0.0.1:8000/css/select2.min.css">
    <link rel="stylesheet" href="http://127.0.0.1:8000/css/select2-bootstrap4.min.css"> -->
    <link rel="stylesheet" href="http://127.0.0.1:8000/css/adminlte.min.css">
    <!-- <link rel="stylesheet" href="http://127.0.0.1:8000/css/bootstrap-select.min.css"> -->
    <link rel="stylesheet" href="http://127.0.0.1:8000/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="http://127.0.0.1:8000/css/sweetalert2.css"> -->
 
    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"> 
    
    <!-- <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" /> -->
   
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.bootstrap4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.print.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.colVis.min.js"></script>

    <script src="http://127.0.0.1:8000/js/angular.min.js"></script>

    <!-- <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> -->
    
    <script src="http://127.0.0.1:8000/js/angular-animate.min.js"></script>
    <script src="http://127.0.0.1:8000/js/angular-sanitize.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angularjs-toaster/0.4.4/toaster.js"></script>
    
    <script type="text/javascript" src="http://127.0.0.1:8000/js/controller.js"></script>
    <script type="text/javascript" src="http://127.0.0.1:8000/js/service.js"></script>

    <script type="text/javascript" src="http://127.0.0.1:8000/js/angular-datatables.min.js"></script>
    
    
  
    
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css ">


<style></style></head>

My Table
````
<table id="example" ng-if="controls" datatable="ng" class="table table-bordered table-hover dataTable" ui-jq="dataTable"
ui-options="dataTableOpt" >
<thead>
<tr>
<th>Data</th>
<th>Treno</th>
<th>Orario</th>
<th>Luogo</th>
<th>Fattispecie</th>
<th>Quantità</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="control in controls">
<td>@{{control.date}}</td>
<td>@{{control.train.train}}</td>
<td>@{{control.train.time}}</td>
<td>@{{control.location}}</td>
<td>@{{control.case}}</td>
<td>@{{control.quantity}}</td>
</tr>
</tbody>
</table>
<script>

$(document).ready(function() {
var table = $('#example').DataTable( {
lengthChange: false,
buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
} );

table.buttons().container()
    .appendTo( '#example_wrapper .col-md-6:eq(0)' );

} );

</script>

```

The data are returned with a service in Angularjs.

Answers

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

    You need to 'B' in dom.

    if that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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

  • bobino17bobino17 Posts: 7Questions: 2Answers: 0

    I have the B in my dom.

    $(document).ready(function() {
        var table = $('#example').DataTable( {
            lengthChange: false,
            buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
        } );
     
        table.buttons().container()
            .appendTo( '#example_wrapper .col-md-6:eq(0)' );
    } );
    
    

    The problem is I think because I'm requesting data with angular $http.get, when i charge the page the button are shown but when page is loaded and data as well button disappear.
    It's a bit difficult to use a test case because I'm using laravel with blade template and creating the page is a bit longer.
    It's possible that is related to the http request ?

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

    No, you haven't set dom - see examples here.

    Colin

  • bobino17bobino17 Posts: 7Questions: 2Answers: 0

    I solved it, thank you!

This discussion has been closed.