0

Buenas a todos, estoy creando dos tablas en un mismo archivo html solo que en diferentes pestañas, en cada tabla se manejan encabezados y un boton de exportar a excel, el problema que me genera es que al momento de exportar las tablas, solo me funciona el boton de la primer tabla, el de la segunda se crea pero no realiza la funcion... les presento mi codigo y espero que alguien pueda ayudarme...

Esto es el script para agregarle las propiedades a la tabla

<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>

Con esto lo mando a llamar a mis tablas

<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>

como repito, mi problema es al momento de hacer click en el boton, el de la primer tabla si funciona y el de la segunda tabla no realiza la funcion...

3 respuestas 3

1

Ya no es posible usar "sPaginationType": "bootstrap",.

He colocado un par de tablas con botones de exportacion. Se llaman desde el mismo document ready y cada boton funciona con su tabla.

Las pestañas al final es solo cosa de 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>

0

Todavia estoy estudiando JS pero creo que el error esta en lo siguiente: invocas el $(document).on('ready', function(){}); lo que hace es que cuando termine de cargar la pagina se ejecute el codigo deberias poner todo dentro del $(document).on('ready', function(){}); de la siguiente manera:

<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>
2
  • 1
    Tener uno o dos $(document).on('ready', function(){}); realmente no importa: si hay uno, se ejecutará cuando se cargue la página; si hay más de uno, se ejecutarán cuando se cargue la página en el orden en el que fueron definidos. El resultado debería ser el mismo.
    – Alvaro Montoro
    Commented el 17 ene. 2017 a las 15:46
  • sigue igual bro, solo funciona el primer boton, el segundo sigue sin funcionar Commented el 17 ene. 2017 a las 19:26
0

Ya he solucionado el problema, no se trataba de algun error en los scripts donde creia que era, el error estaba mas adelante, yo muestro dichas tablas en pestañas diferentes y el error se provocaba porque en la segunda pestaña (Donde el boton no realizaba la funcion) me faltaban un par de clases, espero y sirva mas adelante si alguien se presenta con este error, el codigo anterior de las pestañas era...

 // 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>

Solo tuve que agregarle el active in en la segunda pestaña y funciono

// 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>
1
  • Recuerda que puedes dar por aceptada tu respuesta.
    – Davlio
    Commented el 7 ago. 2017 a las 20:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.