Bootstrap Table json from ajax
35,213
check this Fiddle
you must specify the data-field
in each th
also you must remove the data-toggle="table"
data-toggle="table"
as documentation : Activate bootstrap table without writing JavaScript. Set data-toggle="table" on a normal table.
in your case if you don't want to use javascript just do your table as below
<table data-toggle="table" class="display table table-bordered" data-url="php/process.php?method=fetchdata">
<thead>
<tr>
<th data-field="Nome">Nome</th>
<th data-field="Cognome">Cognome</th>
<th data-field="DataN">Data Nascita</th>
<th data-field="Provincia">Provincia</th>
<th data-field="Comune">Comune</th>
<th data-field="CAP">CAP</th>
<th data-field="Indirizzo">Indirizzo</th>
<th data-field="Fisso">Fisso</th>
<th data-field="Mobile">Cellulare</th>
<th data-field="Note">Note</th>
</tr>
</thead>
</table>
Author by
Cristian Bregant
Updated on July 16, 2022Comments
-
Cristian Bregant almost 2 years
I have a problem with ajax and bootstrap table. I have an ajax JSON I call with this method:
$(document).ready(function(){ $.ajax({ url: 'php/process.php?method=fetchdata', dataType: 'json', success: function(data) { $('#clienti').bootstrapTable({ data: data }); }, error: function(e) { console.log(e.responseText); } }); });
My JSON seems correctly but the table doesn't show any record. What am I doing wrong?
Here is also the table definition
<table data-toggle="table" class="display table table-bordered" id="clienti"> <thead> <tr> <th>Nome</th> <th>Cognome</th> <th>Data Nascita</th> <th>Provincia</th> <th>Comune</th> <th>CAP</th> <th>Indirizzo</th> <th>Fisso</th> <th>Cellulare</th> <th>Note</th> </tr> </thead> </table>
This is also a part of the json that is returned
[{"Nome":"","Cognome":"","DataN":"0000-00-00","Provincia":"","Comune":"","CAP":"","Indirizzo":"","Fisso":"","Mobile":"","Note":""},{"Nome":"Federico","Cognome":"Lupieri","DataN":"2015-09-16","Provincia":"","Comune":"","CAP":"34170","Indirizzo":"Via Ascoli 1","Fisso":"00112233445566","Mobile":"00112233445566","Note":"Vediamo se funziona questo"},