来自ajax的Bootstrap表json

cri*_*ant 4 javascript ajax jquery json twitter-bootstrap

我有ajax和bootstrap表的问题.我有一个用这个方法调用的ajax JSON:

$(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);
       }
    });
 });
Run Code Online (Sandbox Code Playgroud)

我的JSON似乎正确,但表格没有显示任何记录.我究竟做错了什么?

这也是表定义

<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>
Run Code Online (Sandbox Code Playgroud)

这也是返回的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"},
Run Code Online (Sandbox Code Playgroud)

She*_*med 10

检查这个小提琴

你必须data-field在每个中指定th你必须删除data-toggle="table"

data-toggle="table"作为文档:激活bootstrap表而不编写JavaScript.在普通表上设置data-toggle ="table".

在你的情况下,如果你不想使用JavaScript只是做你的表如下

<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>
Run Code Online (Sandbox Code Playgroud)

  • 您拥有相同的代码,但为每个 `th` 添加 `data-field` 属性并删除 `data-toggle="table"` (2认同)