CODEWITHSUNDEEP
javascriptjqueryajaxdatatables
aligenie
aligenie

Reputation: 41

Datatables Buttons not displaying with ajax

I've searched and searched but just can't figure this out. I read in the documentation that you need to add initComplete to get the buttons to appear but I still have no luck.

Am I missing something? I've tried with and without dom, different ways of adding buttons, etc. I have no problem doing this without the ajax call, that works fine. There is something different here that I haven't figured out. 

!doctype html>
<html lang="en" dir="ltr">
  <head>
    <title>Forensics Sample Database</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=1000, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oxygen:400,700">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/buttons.bootstrap.min.css">
    <link rel="stylesheet" href="./layout.css"> 
    <script charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
    <script charset="utf-8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
    <script charset="utf-8" src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
    <script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"</script>
    <script charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"</script>
    <script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"</script>
    <script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"</script>
    <script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"</script>
    <script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"</script>
    <script charset="utf-8" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
    <script charset="utf-8" src="webapp.js"></script>
  </head>

and in my webapp.js file

$(document).ready(function(){

  // On page load: datatable
  var tablesamples = $('#tablesamples').DataTable({
    "ajax": "data.php?job=get_samples",
    "columns": [
      { "data": "sample_id" },
      { "data": "storage_location" },
      { "data": "depositor" },
      { "data": "sample_name",        "sClass": "sample_name" },
      { "data": "date_received" },
      { "data": "supplier" },
      { "data": "source" },
      { "data": "concentration" },
      { "data": "volume" },
      { "data": "prep_exp" },
      { "data": "age" },
      { "data": "gender" },
      { "data": "ethnicity" },
      { "data": "draw_date" },
      { "data": "extraction_date" },
      { "data": "screened" },
      { "data": "collection_tube" },
      { "data": "matrix" },
      { "data": "notes" },
      {"data": "functions", "sClass": "functions"}     
    ],
   "dom": '<"top"i>rt<"bottom"flp><"clear">',
 // "dom": 'Blfrtp',
    "scrollY": 400,
    "scrollX": true,
    buttons: [ 'excel '],
      "initComplete": function(settings, json) {
    alert( 'DataTables has finished its initialisation.' );
  }


  /*  initComplete: function(){
          var api = this.api();

          new $.fn.dataTable.Buttons(api, {
             buttons: [
                {
                   'excel'
                   }
                }
             ]
            });
           api.buttons().container().appendTo( 'tablesamples' + api.table().container().id + ' .col-sm-6:eq(0)' ); 
           */
  });
 table.buttons().container()
   .appendTo( '#tablesamples_wrapper .col-sm-6:eq(0)');

    enter code here

Upvotes: 2

Views: 3471

Answers (2)

user7153178
user7153178

Reputation:

This Worked For Me try to Customize it for your need : 

var table = $( document ).ready(function() {

        $('#clientTable').DataTable( {
            "processing": false,
            "dom": 'Bfrtip',
            "serverSide": false,
            "bSortable": true,
            "lengthChange": true,
            "responsive": true,

            "ajax": {
                    "url": "../resources/models/jsonListClient.php",
                    "type": "POST",
                    "dataSrc": ""
            },
            "columns": [
                    { "data": "nom" },
                    { "data": "ville" },
                    { "data": "ice" },
                    { "data": "adresse" },
            ],
            "language": {
            "sProcessing": "Traitement en cours...",
            "sSearch": "Rechercher&nbsp;:",
                        "sLengthMenu":     "Afficher _MENU_ &eacute;l&eacute;ments",
            "sInfo":           "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
            "sInfoEmpty":      "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
            "sInfoFiltered":   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
            "sInfoPostFix":    "",
            "sLoadingRecords": "Chargement en cours...",
            "sZeroRecords":    "Aucun &eacute;l&eacute;ment &agrave; afficher",
            "sEmptyTable":     "Aucune donn&eacute;e disponible dans le tableau",
                        "oPaginate": {
                "sFirst":      "Premier",
                "sPrevious":   "Pr&eacute;c&eacute;dent",
                "sNext":       "Suivant",
                "sLast":       "Dernier"
            },
            "oAria": {
                "sSortAscending":  ": activer pour trier la colonne par ordre croissant",
                "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
            }
            },

            buttons: [
                {
                        extend: 'print',
                        message: 'Imprimer',
                        text: 'Imprimer',
                },
                {
                        extend: 'copy',
                        message: 'Copier / Coller',
                        text: 'Copier',
                },
                {
                        extend: 'excelHtml5',
                        title: 'Export Liste'
                },
                {
                        extend: 'pdfHtml5',
                        title: 'Export Liste',
                }
                ,   {
                        extend: 'colvis',
                        text: 'Colonnes'
                } 
            ]

        });


    });

Upvotes: 1

aligenie
aligenie

Reputation: 41

So I'm not sure why this works but it does

$(document).ready(function(){
  // On page load: datatable
  var tablesamples = $('#tablesamples').DataTable({
   'ajax': 'data.php?job=get_samples',
   'dom': 'Bfrtip',
'buttons': [
    {
      text: 'Excel',
      extend: 'excel',
      exportOptions: {
        modifier: {
          page: 'current'
        }
      }
    }
],
'columns': [
  { 'data': 'sample_id' },
  { 'data': 'storage_location' }     
],
'oLanguage': {
  'oPaginate': {
    'sFirst':       ' ',
    'sPrevious':    ' ',
    'sNext':        ' ',
    'sLast':        ' ',
  },
  'sLengthMenu':    'Records per page: _MENU_',
  'sInfo':          'Total of _TOTAL_ records (showing _START_ to _END_)',
  'sInfoFiltered':  '(filtered from _MAX_ total records)'
},
'scrollX': true,  
initComplete: function () {
  var api = this.api();
    console.log( api.buttons().container()[0].nodeName );
}
});

Upvotes: 2

Related Questions