it-swarm.com.de

Bootstrap Table json von ajax

Ich habe ein Problem mit Ajax und Bootstrap-Tabelle. Ich habe einen Ajax-JSON, den ich mit dieser Methode aufrufe:

$(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);
       }
    });
 });

Mein JSON scheint korrekt zu sein, aber die Tabelle zeigt keinen Datensatz an. Was mache ich falsch?

Hier ist auch die Tabellendefinition

<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>

Dies ist auch ein Teil des zurückgegebenen json

[{"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"},
4
cristianbregant

check this Fiddle

sie müssen den data-field in jeder th angeben. Sie müssen auch den data-toggle="table" entfernen.

data-toggle="table" as documentation : Aktiviere die Bootstrap-Tabelle, ohne JavaScript zu schreiben. Setzen Sie data-toggle = "table" für eine normale Tabelle.

in Ihrem Fall, wenn Sie kein Javascript verwenden möchten, machen Sie einfach Ihre Tabelle wie unten

<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>
8
Sherif Ahmed

Aus Dokumentation :

HTML

<table id="table"></table>

JS

$('#table').bootstrapTable({
    columns: [{
        field: 'id',
        title: 'Item ID'
    }, {
        field: 'name',
        title: 'Item Name'
    }, {
        field: 'price',
        title: 'Item Price'
    }],
    data: [{
        id: 1,
        name: 'Item 1',
        price: '$1'
    }, {
        id: 2,
        name: 'Item 2',
        price: '$2'
    }]
});

Dies bedeutet, dass Sie die Spalten angeben müssen, die in Javascript und nicht in HTML verwendet werden. Hoffe das hilft