Question

我只是通过和服建立数据APIT - ＆gt; 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>

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

Answer 1

你可以通过javascript激活bootstrap表：

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

Answer 2

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

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

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

Answer 3

嗯..你需要在kimonoCallback被调用时实际制作表格。

请参阅？

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

通过jquery数据填充bootstrap html表

3 个答案: