web-dev-qa-db-fra.com

Comment personnaliser l'exportation des tables de données jquery telles que PDF Excel Print et CSV?

J'utilise un jQuery DataTables de datatables . Je souhaite personnaliser le plugin d'exportation de fichiers de ces tableaux tels que CSV, Excel, PDF et le bouton Imprimer. Si j'imprime un PDF il est toujours indiqué dans l'en-tête le titre de l'exportation du fichier de table de données jQuery. Comment puis-je personnaliser cela? Je veux également personnaliser le nom du fichier lorsque j'exporte le CSV, PDF et fichier Excel. J'ai vérifié le code dans les plugins et je ne vois pas le code dans les options d'exportation du fichier pour le personnaliser. Ai-je besoin d'une extension pour télécharger? Désolé, je suis nouveau dans les tables de données jQuery.

Voici un exemple ci-dessous enter image description here

Comment puis-je personnaliser cela et même pour le fichier PDF, CSV et Excel. Désolé pour la mauvaise retouche.

Comment puis-je également personnaliser le nom de fichier en cours de téléchargement?

Appréciez si quelqu'un peut vous aider.

Merci d'avance.

jquerydatatablesdatatables-1.10
5
Jaaayz

Vous pouvez personnaliser le nom et le titre du fichier à l'aide des options boutons . Tous les boutons contiennent des options pour personnaliser filename et title sauf csv button. csv button n'a que l'option filename.

Voici la liste des références des options des boutons:

Voici l'extrait.

$(document).ready(function() {
  $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [{
      extend: 'pdf',
      title: 'Customized PDF Title',
      filename: 'customized_pdf_file_name'
    }, {
      extend: 'Excel',
      title: 'Customized Excel Title',
      filename: 'customized_Excel_file_name'
    }, {
      extend: 'csv',
      filename: 'customized_csv_file_name'
    }]
  });
});
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.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.4.2/js/buttons.html5.min.js"></script>
<div class="container">
  <table id="example" class="display nowrap" 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>

    <tfoot>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </tfoot>

    <tbody>
      <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120</td>
      </tr>
      <tr>
        <td>Garrett Winters</td>
        <td>Director</td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>
    </tbody>
  </table>
</div>
6
Prashant Pokhriyal