通过jquery数据填充引导程序html表

populating a bootstrap html table via jquery data

本文关键字：html 引导程序 填充 jquery 数据 通过      更新时间：2023-09-26

我刚刚通过Kimono->建立了一个数据APIThttps://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:激活引导表

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

我不知道你想从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>

请务必查看控制台以了解数据的结构，这样您就可以确定用哪些字段填充表。

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

看到了吗？

// do something with the data
// please make sure the scope of this function is global
相关文章：