dataTable does not work with genereted html

beegeezzz

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.

Teroa

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

beegeezzz

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

kthorngren

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