Tengo un problema con Datatables y los botones de exportar paginacion y sow pages

cecillapur

Hola buenas tardes tengo un problema con mi datatables y no estoy pudiendo encontrar la solucion, tengo una tabla dentro de otra y me trae los datos y los muestra perfectamente el tema es que cuando puse la otra tabla dentro de esa el search show y boton exportar desparecieron, alguno podra ayudarme les adjunto el codigo de mi html y del js

kthorngren

Hello good afternoon I have a problem with my datatables and I am not being able to find the solution, I have a table inside another and brings me the data and shows them perfectly the issue is that when I put the other table inside that the search show and export button disappeared, someone can help me I attach the code of my html and js

Sorry but the link doesn't seem to work. Can you build a simple test case showing the issue?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

cecillapur

I don't have it uploaded to a server, what I sent was the html file

cecillapur

kthorngren

I don't have it uploaded to a server,

Maybe you can use one of the sites listed at how to provide a test case to build a simple test case showing the issue.

what I sent was the html file

As I said the link to download the file isn't working. Try posting it again.

Kevin

cecillapur

https://live.datatables.net/sawuluxu/1/edit?html,css,js,output

kthorngren

The test case doesn't run due to many errors like incorrect paths to the CSS and JS library includes. I used the Download Builder to get the necessary files for Datatables to run and made a couple other changes like removing the CSS tab as that is too much for the JS Bin environment. The test case isn't expected to be a full replication of your environment. Its meant to have enough code to replicate the issue you are having. Here is the updated test case:
https://live.datatables.net/tapusulo/1/edit

lIt looks like the HTML you have is the HTMl generated by Datatables when it enhances the table. It would be better to use the raw HTML before Datatables makes the changes.

I think the problem you are having is with the child table, correct? You test case doesn't seem to have the code for this. Please update the test case to show the issue and provide the steps needed to cause the issue to occur.

Kevin

cecillapur

i dont know how to make it work sorry, but thanks for your time

kthorngren

Maybe all you need to do is add the code that shows the extra data?

As I understand the problem, by looking at the screenshot, the page length and search inputs aren't displayed. Are they displayed before you show the extra details and are removed when showing the extra details?

Are you showing the child rows like this example?

Kevin

cecillapur

exactly when i add the other table, it dissapear
this is the 1st table
<div class="card">

      <div class="card-datatable table-responsive">
        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
          <div class="card-header flex-column flex-md-row">
            <div class="head-label text-center">
              <h5 class="card-title mb-0">Listado / Incidencias</h5>
            </div>
            <div class="dt-action-buttons text-end pt-3 pt-md-0">
              <div class="dt-buttons btn-group flex-wrap mt-5">
                <div class="btn-group">
                  <button class="btn buttons-collection dropdown-toggle btn-label-primary me-2" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bx bx-export me-sm-1"></i>
                    <span class="d-none d-sm-inline-block">Exportar</span>
                  </button>
                  <div class="dropdown-menu" id="exportMenu">
                    <!-- DataTables export buttons will be dynamically inserted here -->
                  </div>
                </div>

                <a href="{{ url_for('nueva_incidencia') }}"><button
                    class="btn btn-secondary create-new btn-primary" tabindex="0"
                    aria-controls="DataTables_Table_0" type="button">
                    <span><i class="bx bx-plus me-sm-1"></i>
                      <span class="d-none d-sm-inline-block">Nuevo Incidencia</span>
                    </span>
                  </button></a>
              </div>
            </div>
          </div>
          <div id="DataTables_Table_1_wrapper" class="dataTables_wrapper dt-bootstrap5">

            {% if incidencias %}
              <table class="dt-fixedheader table border-top dataTable dtr-column mt-5" id="DataTables_Table_1"
              aria-describedby="DataTables_Table_1_info" style="width: 1200px;">
                <thead>
                  <tr>
                    <th class="control sorting_disabled" rowspan="1" colspan="1" style="width: 0px;"
                      aria-label="">Mas Info
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
                      style="width: 100px;" aria-label="Name: activate to sort column ascending">#</th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
                      style="width: 200px;" aria-label="Name: activate to sort column ascending">Tipo Incidencia
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
                      style="width: 250px;" aria-label="Name: activate to sort column ascending">Descripcion</th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
                      style="width: 150px;" aria-label="Name: activate to sort column ascending">Empresa</th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
                      style="width: 200px;" aria-label="Name: activate to sort column ascending">Nivel de
                      Criticidad
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
                      style="width: 150px;" aria-label="Name: activate to sort column ascending">Estado</th>
                    <th class="sorting" tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
                      style="width: 150px;" aria-label="Name: activate to sort column ascending">Alta</th>
                    <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 87px;"
                      aria-label="Actions">
                      Acciones</th>
                  </tr>
                </thead>
                    <tbody>                                                                                                        

and the 2 second one is this <tr id="collapseTable{{ incidencia.idIncidencia }}" class="collapse">
<td colspan="9">
<table id="DataTables2_Table_2 "
class="dt-fixedheader table border-top dataTable2 dtr-column display">
<thead>
<tr>
<th tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
style="width: 72px;" aria-label="Name: activate to sort column ascending">Nª Etapa
</th>
<th tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
style="width: 100px;" aria-label="Name: activate to sort column ascending">
Descripcion
Trabajo</th>
<th tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
style="width: 105px;" aria-label="Name: activate to sort column ascending">Hora
Estimada
</th>
<th tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
style="width: 97px;" aria-label="Name: activate to sort column ascending">Tecnico
</th>
<th tabindex="0" aria-controls="DataTables_Table_1" rowspan="1" colspan="1"
style="width: 107px;" aria-label="Name: activate to sort column ascending">
Observaciones
</th>
<th rowspan="1" colspan="1" style="width: 87px;" aria-label="Actions">Acciones</th>
</tr>
</thead>

kthorngren

I updated the test case to change data-bs-target="#collapseTable{{ incidencia.idIncidencia }}" to valid selector using data-bs-target="#collapseTable1". Also changed the ID of the 2nd table to match. Clicking the first column does show the 2nd table without removing the length and search inputs.

However there is an issue. The second table is in the second tr of the first table:

                          <tr id="collapseTable1" class="collapse">
                            <td colspan="9">

Datatables doesn't support colspan nor rowspan in the tbody. See the HTML requirements for details. This is why the test case has this error:

DataTables warning: table id=DataTables_Table_1 - Requested unknown parameter '1' for row 1, column 1. For more information about this error, please see https://datatables.net/tn/4

It seems like you are trying to implement a form of child rows based of the main table's rows. The example I linked to earlier shows how Datatables supports this type of display.

How are you initially populating the table data?

Kevin

cecillapur

right! thank you so much for your time i really appreciate