通过jquery数据填充引导html表

Question

我想把它包含在一个简单而漂亮的引导表中，就像这样：http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html。

<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提要中显示什么，但通常您可以这样处理显示：

<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