-1

I have a problem with one of my tables, it doesn't show as a DataTable while the other one does... I can't see where I'm failing, so here it goes:

WORKING DATATABLE (it looks as a DataTable)

<table id="tabla-diccionarios" class="display table table-bordered table- 
striped table-hover tabla-usuarios" width="75%">
                            <thead>
                                <tr>
                                    <!-- <th>ID</th>
                                    <th>Tipo</th> -->
                                    <th>Nombre</th>
                                    <!-- <th data-orderable="false">Ver 
elementos</th> -->
                                </tr>
                            </thead>
                            <tbody> 
                                <?php foreach ($diccionarios as 
$diccionarios): ?>
                                    <tr>
                                        <!-- <td><?php echo 
$diccionarios['DICC_Id']; ?></td>
                                        <td><?php echo 
$diccionarios['DICC_Tipo'];?></td> -->
                                        <td><a href="<?php echo 
base_url('diccionarios/elementos_diccionario/'.$diccionarios['DICC_Id']); ? 
>"><?php echo $diccionarios['DICC_Nombre'];?></td>
                                        <!-- <td>
                                            <a href="<?php echo 
 base_url('diccionarios/elementos_diccionario/'.$diccionarios['DICC_Id']); ? 
 >">
 <i class="material- icons">info_outline</i></a>
                                        </td> -->
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>

TABLE THAT ISN'T WORKING (it looks like a normal table)

<table id="tabla-elementos" class=" display table table-bordered table- 
striped table-hover tabla-usuarios">
                            <thead>
                                <tr>
                                    <th>Key</th>
                                    <th>Display</th>
                                    <th colspan="2">Acciones</th>
                                </tr>
                            </thead>
                            <tbody> 
                                <?php foreach ($elementos as $elementos): ?>
                                    <tr data-id='<?php echo 
$elementos['ELDI_Id']; ?>'>
                                        <td><?php echo 
$elementos['ELDI_Key'];?></td>
                                        <td><?php echo 
$elementos['ELDI_Display'];?></td>
                                        <td>
                                            <span class="btn btn-default 
editar_elemento" id='<?php echo $elementos['ELDI_Id']; ?>' value="<?php echo 
$elementos['ELDI_Id'];?>">
                                                <a href="<?php echo base_url('diccionarios/elemento_diccionario').'/'.$elementos['ELDI_Id'];?>" title="Editar">
                                                    <i class="material-icons">edit</i>
                                                </a>
                                            </span>
                                        </td>
                                        <td>
                                        <span class="btn btn-default borrar_elemento" id='<?php echo $elementos['ELDI_Id']; ?>' value="<?php echo $elementos['ELDI_Id'];?>">
                                                <i class="material-icons">delete_outline</i>    
                                            </span>
                                        </td>
                                    </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>

JS (it's the same for both tables, changing just the ID)

$('#tabla-diccionarios').DataTable( {
    "pagingType": "simple_numbers",
    "lengthMenu": [[-1, 10, 25, 50], ["Todos", 10, 25, 50]],
    "language": {
        "lengthMenu": "Mostrar registros _MENU_ ",
        "zeroRecords": "No se encontraron resultados.",
        "info": "Mostrando registros del _START_ al _END_ de un total de 
_TOTAL_ registros.",
        "infoEmpty": "No hay registros disponibles",
        "infoFiltered": "(filtrado de un total de _MAX_ registros)",
        "paginate": {
            "previous": "Anterior",
            "next": "Siguiente",
        },
        "search": "Buscar: ",
    }
});

Thanks for your time!

Nira
  • 197
  • 1
  • 1
  • 12
  • Check the browser's console. There's usually some Javascript error, making Javascript not run, and not executing the DataTable code. – KIKO Software Jul 25 '18 at 10:24
  • 1
    because the number of tags are less than the number of tags, datatables have very strict checking . So add one more as Action – Sanjit Bhardwaj Jul 25 '18 at 10:25
  • That's not the best way to show us an error. It's better to add it to the question. However, I would start by making sure there's the same amount of columns in the header as there are in the rows, like Sanjit Bhardwai suggested. – KIKO Software Jul 25 '18 at 10:30
  • @SanjitBhardwaj that's it!! Thanks! But I need to add colspan so visually there's only 1 column occupying 2 cols... What should I do then, please? – Nira Jul 25 '18 at 10:30
  • Always first investigate yourself, before asking. You'll find answers like this one: https://stackoverflow.com/questions/19426972/datatables-not-working-when-added-colspan-for-the-last-column – KIKO Software Jul 25 '18 at 10:32
  • @KIKOSoftware I didn't know colspan affected DataTable, so couldn't do such a specific search – Nira Jul 25 '18 at 11:17
  • You said: "But I need to add colspan... What should I do then?", so you did know. – KIKO Software Jul 25 '18 at 11:28
  • I said that after @SanjitBhardwaj answered to me giving me the hint, but ok dude, whatever. – Nira Jul 26 '18 at 07:53

1 Answers1

0

you have total 3 "<th>" column and 4 "<td>" column in your table that's why its not working.

Funk Forty Niner
  • 74,450
  • 15
  • 68
  • 141
Alpa Bhanderi
  • 41
  • 2