Export dataTable to PDF and Excel

Question

Export dataTable to PDF and Excel

Navigation

#1 by (0 votes)
#2 by (-1 votes)

0

I need to export data from a dataTable to Excel and PDF but I have a problem. When wanting to add the Excel and PDF export buttons, the number of records selector disappears to show why that place happens to occupy the Excel and PDF buttons and I want the record number selector to be shown as well.

Libraries used

<link href="plugins/datatables/extensions/Responsive/css/responsive.bootstrap.min.css" rel="stylesheet"/>
<link href="plugins/datatables/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="plugins/datatables/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">


<script src="plugins/datatables/jquery.dataTables.min.js"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script src="plugins/datatables/extensions/Responsive/js/responsive.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.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/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js"></script>

Properties that the table has

<table id="mtable" class="table table-striped table-condensed table-bordered dt-responsive nowrap table-hover" cellspacing="0" width="100%">

DataTable script

<!-- Inicio DataTable -->
<script type="text/javascript">
$(document).ready(function() {
    $('#myTable').DataTable({
      "language":{
       "lengthMenu":"Mostrar _MENU_ registros por página.",
       "zeroRecords": "Lo sentimos. No se encontraron registros.",
             "sInfo": "Mostrando: _START_ de _END_ - Total registros: _TOTAL_ ",
             "infoEmpty": "No hay registros aún.",
             "infoFiltered": "(filtrados de un total de _MAX_ registros)",
             "search" : "Búsqueda",
             "LoadingRecords": "Cargando ...",
             "Processing": "Procesando...",
             "SearchPlaceholder": "Comience a teclear...",
             "paginate": {
     "previous": "Anterior",
     "next": "Siguiente", 
     }
      }
     });
 } );
</script>
<!-- Fin DataTable -->

Excel buttons script, PDP, Print

<script type="text/javascript">
$(document).ready(function() {
    $('#mtable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'excel', 'pdf', 'print'
        ]
    } );
} );
</script>

What must be done so that the select also appears, allowing you to display the records you want. And also how do I do if I do not want to export all the columns? And how you can change the title that comes out when you export the files, because a title appears that I do not know where it comes from.

php datatables

asked by Horus 15.02.2018 в 02:28

source

2 answers

-1

I tell you that with that code you should go out to load the buttons but the flash ones that are by default, I recommend that you look for those of html5 link

try the following

 table =  $("element").DataTable({
        buttons:[
            'excelHtml5'
        ],
        dom: 'lBf',

answered by 15.02.2018 в 02:43

Problem receiving Push Notifications FCM with the app closed. Ionic 3 and Angular How would you look for a log of a sql database from java

score 0 · Accepted Answer

After so much searching I was able to get what I wanted and it was to show me the search engine and the select to show the number of records and the buttons to export the DataTable data without losing the record selector. The solution was to implement the following code with the libraries that I wrote in the question.

<script type="text/javascript"> 
var table = $('#myTable').DataTable( {
    buttons: [
        'copy', 'print', 'excel', 'pdf'
    ]
} );
  
table.buttons().container()
    .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
</script>

The last part is the one that allows to add the buttons outside the div where the selector and the searcher of the dataTable is displayed, leaving the following way as the image is seen.