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>
Share:
35,213
Cristian Bregant
Author by

Cristian Bregant

Updated on July 16, 2022

Comments

  • Cristian Bregant
    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"},