Problems with jquery buttons (dataTables)

Navigation
0

Good morning, I am creating two tables in the same html file only in different tabs, in each table headings are handled and an export button to excel, the problem that generates me is that when exporting the tables, only the button of the first table works for me, the second one is created but it does not perform the function ... I present my code and hope that someone can help me ...

This is the script to add properties to the table 

<script> // tabla 1
    $(document).on('ready', function(){
        $("#datosConciliacionSinFactura").dataTable({
            "sPaginationType": "bootstrap",
             dom: 'T<"clear">lfrtip',
            tableTools: {
                aButtons: [{
                    "sExtends": "xls",
                    "sButtonText": "Exporta a Excel",
                }]
            },
            "aLengthMenu": [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "Todo"]
            ],
        });

    });
    </script>

    <script> //tabla 2
    $(document).on('ready', function(){
        $("#datos_Conciliacion").dataTable({
            "sPaginationType": "bootstrap",
             dom: 'T<"clear">lfrtip',
            tableTools: {
                aButtons: [{
                    "sExtends": "xls",
                    "sButtonText": "Exporta a Excel",
                }]
            },
            "aLengthMenu": [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "Todo"]
            ],
        });

    });
</script>

With this I send him to call my tables 

<table id="datos_Conciliacion" class="table table-striped table-bordered table-condensed">
.......
</table>
<table id="datosConciliacionSinFactura" class="table table-striped table-bordered table-condensed">
.....
</table>

As I repeat, my problem is when I click on the button, the one in the first table if it works and the one in the second table does not perform the function ...

    
asked by Eliobeth Ruiz Hernandez 16.01.2017 в 19:21
source

3 answers

1

It is no longer possible to use "sPaginationType": "bootstrap", .

I have placed a couple of tables with export buttons. They are called from the same document ready and each button works with its table.

The tabs at the end are just css. 

$(document).ready(function(){
    $('#datos_Conciliacion').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
    $('#datosConciliacionSinFactura').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
});
<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://cdn.datatables.net/buttons/1.4.1/js/dataTables.buttons.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.4.1/js/buttons.html5.min.js"></script>

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

<table id="datos_Conciliacion" class="display" cellspacing="0" 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>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
  </tbody>
</table>

<hr/>

<table id="datosConciliacionSinFactura" class="display" cellspacing="0" 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>$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>
  </tbody>
</table>
    
answered by 11.09.2017 в 12:35
0

I am still studying JS but I think the error is in the following: you invoke the $(document).on('ready', function(){}); what it does is that when it finishes loading the page the code is executed you should put everything inside the $(document).on('ready', function(){}); as follows: 

<script>
    $(document).on('ready', function(){
        $("#datosConciliacionSinFactura").dataTable({
            "sPaginationType": "bootstrap",
             dom: 'T<"clear">lfrtip',
            tableTools: {
                aButtons: [{
                    "sExtends": "xls",
                    "sButtonText": "Exporta a Excel",
                }]
            },
            "aLengthMenu": [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "Todo"]
            ],
        });
        $("#datos_Conciliacion").dataTable({
            "sPaginationType": "bootstrap",
             dom: 'T<"clear">lfrtip',
            tableTools: {
                aButtons: [{
                    "sExtends": "xls",
                    "sButtonText": "Exporta a Excel",
                }]
            },
            "aLengthMenu": [
                [25, 50, 100, 200, -1],
                [25, 50, 100, 200, "Todo"]
            ],
        });
    });
</script>
    
answered by 17.01.2017 в 14:55
0

I have already solved the problem, it was not some error in the scripts where I thought it was, the error was later, I show these tables in different tabs and the error was caused because in the second tab (Where the button I did not perform the function) I was missing a couple of classes, I hope and serve later if someone is presented with this error, the previous code of the tabs was ... 

 // tabla 1    
    <div id="NoFacturados" class="tab-pane fade active in">
                <div class="table-responsive">
                    <table id="datos_Conciliacion" class="table table-striped table-bordered table-condensed">
        ...........
        </table>

    </div>



// tabla 2    
<div id="NoFacturados" class="tab-pane fade">
     <div class="table-responsive">
         <table id="datosConciliacionSinFactura" class="table table-striped table-bordered table-condensed">
                    ...........
 </table>
</div>

I just had to add the active in in the second tab and it worked 

// tabla 1    
    <div id="NoFacturados" class="tab-pane fade active in">
                <div class="table-responsive">
                    <table id="datos_Conciliacion" class="table table-striped table-bordered table-condensed">
        ...........
        </table>

    </div>



// tabla 2    
<div id="NoFacturados" class="tab-pane fade active in">
     <div class="table-responsive">
         <table id="datosConciliacionSinFactura" class="table table-striped table-bordered table-condensed">
                    ...........
 </table>
</div>
    
answered by 17.01.2017 в 22:49
Send data from a table in a modal to a php table using php and jquery How to login in ReactJS?