通过 jquery 数据填充引导 html 表答案

【问题标题】：populating a bootstrap html table via jquery data通过 jquery 数据填充引导 html 表
【发布时间】：2014-11-05 14:56:56
【问题描述】：

我只是通过和服构建数据 APIT -> https://www.kimonolabs.com/api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m。我想将它包含在一个简单而漂亮的引导表中，如下所示：http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html。

我只是尝试插入和服给出的jquery代码

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function kimonoCallback(data) {
// do something with the data
// please make sure the scope of this function is global
}

$.ajax({
"url":"https://www.kimonolabs.com/api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
 </script>

但我没有设法创建表。有什么建议吗？

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

嗯.. 当kimonoCallback 被调用时，您需要实际制作表格。

看到了吗？

// do something with the data
// please make sure the scope of this function is global

【讨论】：

【解决方案2】：

我不知道你想从 JSONP 提要中显示什么，但通常你可以像这样处理显示：

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Href</th>
      <th>Text</th>
    </tr>
  </thead>
  <tbody id="loadHere">
  </tbody>
</table>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function kimonoCallback(data) {
  // this will help you see data structure while you develop the table
  console.log(data);
  // then create your table
  var results = data.results.collection1,
     i;
  for (i = 0; i < results.length; i += 1) {
    $('#loadHere').append(
      '<tr>' +
        '<td>' + results[i].nome.href + '</td>' +
        '<td>' + results[i].nome.text + '</td>' +
      '<td>' +
    '</table>');
  }
}

$.ajax({
"url":"https://www.kimonolabs.com/api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
 </script>

请务必查看控制台以了解数据的结构，以便确定使用哪些字段填充表格。

【讨论】：

【解决方案3】：

您可以通过 javascript 激活引导表：

<table id="table">
  <thead>
    <tr>
      <th data-field="nome" data-formatter="linkFormatter">Nome</th>
      <th data-field="descrizione" data-formatter="linkFormatter">Descrizione</th>
    </tr>
  </thead>
</table>

<script>
function linkFormatter(value) {
  return '<a href="' + value.href + '">' + value.text + '</a>';
}

function kimonoCallback(data) {
  $('#table').bootstrapTable({
    data: data.results.collection1
  });
}

$.ajax({
  "url":"https://www.kimonolabs.com/api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
  "crossDomain":true,
  "dataType":"jsonp"
});
 </script>

jsFiddle：http://jsfiddle.net/wenyi/8svjf80g/33/

【讨论】：