Javascript 来自ajax的Bootstrap Table json

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/33247486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 14:50:28  来源:igfitidea点击:

Bootstrap Table json from ajax

javascriptjqueryjsonajaxtwitter-bootstrap

提问by Cristian Bregant

I have a problem with ajax and bootstrap table. I have an ajax JSON I call with this method:

我有 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);
       }
    });
 });

My JSON seems correctly but the table doesn't show any record. What am I doing wrong?

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

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

这也是返回的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"},

回答by Sherif Ahmed

check this Fiddle

检查这个小提琴

you must specify the data-fieldin each thalso you must remove the data-toggle="table"

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

data-toggle="table"as documentation: Activate bootstrap table without writing JavaScript. Set data-toggle="table" on a normal table.

data-toggle="table"作为文档无需编写 JavaScript 即可激活引导表。在普通表上设置 data-toggle="table"。

in your case if you don't want to use javascript just do your table as below

在您的情况下,如果您不想使用 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>

回答by Alexandru Chichinete

From documentation:

文档

HTML

HTML

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

JS

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: ''
    }, {
        id: 2,
        name: 'Item 2',
        price: ''
    }]
});

This means that you have to specify the columns that will be used in javascript not in HTML. Hope this helps

这意味着您必须指定将在 javascript 中而不是在 HTML 中使用的列。希望这可以帮助