dataTable does not work with genereted html

dataTable does not work with genereted html

beegeezzzbeegeezzz Posts: 12Questions: 3Answers: 0
edited August 2017 in Free community support

HI,

With raw HTML code, it's working, but not with the code below...

I'm creating a table with PHP and ajax

$.ajax
            (
                {
                    method : 'POST',
                    //la route (controleur) et le paramètre (id à supprimer)
                    url: url + "/professionnels/filtreProfessionnels",
                    dataType: 'html',
                    data:{
                        filtre : formulaire
                    },
                    success:function(result)
                    {
                  
                        $('#tab_pro').html(result);
                        
                        
                    }
                
                }
            );      
        });
      
      
      $('#example').DataTable();

This is the genereted HTML code

<table class="display dataTable" id="example" width="100%" cellspacing="0">
            <thead style="background-color: #ddd; font-weight: bold;">
                
                <tr>
                    <td>Catégorie</td>
                    <td>Nom</td>
                    <td>Prénom</td>
                    <td>Adresse</td>
                    <td>N°</td>
                    <td>CP</td>
                    <td>Ville</td>
                    <td>Email</td>
                    <td>INAMI</td>
                    <td>TVA</td>
                    <td>Disponibilité</td>
                    <td>Commentaire</td>
                    
                    
                    
                </tr>
            </thead>
             <tbody id="tab_pro">
                            <tr>
                    <td><select>
                        <option>
                            
                        </option>
                    </select></td>
                    <td>Amandier</td>
                    <td>Laurence</td>
                    <td>9335 Cras Road</td>
                    <td>15</td>
                    <td>93-572</td>
                    <td>Ilhéus</td>
                    <td>feugiat@nisi.ca</td>
                    <td>1611051781999</td>
                    <td>691983</td>
                    <td>17916631299</td>
                    <td>a felis ullamcorper viverra. Maecenas iaculis aliquet diam. Sed diam</td>
                    <td>bibendum. Donec felis orci, adipiscing non, luctus sit amet, faucibus</td>
                    
                    <td><button class="supprimer_pro#5"> Supprimer ce prestataire</button></td>
                    <td><a href="//localhost:8888/bd_gic/professionnels/updateProfessionnel/5">edit</a></td>
                </tr>
</table>

I put $('#example').DataTable();, but the datatable does not work.

The dataType returned by ajax is html (not json).

Thanks for your help.

Answers

  • TeroaTeroa Posts: 9Questions: 3Answers: 0

    There are too less head cels. this doensn't match with your data cells

  • beegeezzzbeegeezzz Posts: 12Questions: 3Answers: 0

    Thanks for your reply.

    This is ok now, I have another problem with reload...

    https://stackoverflow.com/questions/45907514/datatable-reload-not-working-json-not-valid

  • kthorngrenkthorngren Posts: 20,145Questions: 26Answers: 4,736

    ajax.reload() uses the AJAX URL defined within the Datatables initialization code. Based on the above you aren't defining the AJAX config within Datatables. Instead of ajax.reload() I think you will want to use clear() followed by rows.add().

    In order to have Datatables add the rows to your table you will need to resturcture your JSON response. Currently it looks like this:

    {
        "0": {
            "id": "123",
            "nom": "G\u00e9om\u00e8tre",
            "prenom": "Barack",
            "adresse": null,
            "numero": null,
            "boite": null,
            "cp": null,
            "ville": null,
            "mail": null,
            "telephone": null,
            "inami": null,
            "tva": null,
            "disponibilite": null,
            "commentaire": null
        },
        "1": {
            "id": "128",
            "nom": "G\u00e9om\u00e8tre-expert",
            "prenom": "Barack",
            "adresse": null,
            "numero": "6",
            "boite": "3",
            "cp": "1300",
            "ville": "Bruxelles",
            "mail": "contact@dubinfo.be",
            "telephone": "0471301253",
            "inami": "5533434343",
            "tva": "BE 0832.581.586",
            "disponibilite": null,
            "commentaire": null
        }
    }
    

    This doc examples the data structure Datatables expects:
    https://datatables.net/manual/data/

    Kevin

This discussion has been closed.