javascript - populating a bootstrap html table via jquery data - Stack Overflow

admin管理员组

文章数量:1426033

i just buil a data APIT trough Kimono -> . i would like to include it in a simple and nice bootstrap table, like this: .html.

i just tried to insert the jquery code given by kimono

<script src=".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":";callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
 </script>

but i didn't manage to create the table. any advice?

i just buil a data APIT trough Kimono -> https://www.kimonolabs./api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m. i would like to include it in a simple and nice bootstrap table, like this: http://wenzhixin.cn/p/bootstrap-table/docs/examples.html.

i just tried to insert the jquery code given by kimono

<script src="http://code.jquery./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./api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
 </script>

but i didn't manage to create the table. any advice?

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Sep 11, 2014 at 15:14 andriatzandriatz 62222 gold badges99 silver badges2222 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

you can active bootstrap table via 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./api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
  "crossDomain":true,
  "dataType":"jsonp"
});
 </script>

jsFiddle: http://jsfiddle/wenyi/8svjf80g/33/

I have no idea what you want to display from your JSONP feed, but generally you can handle the display like so:

<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./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./api/2ewmh21u?apikey=lvafgzGqR6fOqrI0mXAbiPEmQGh7rR4m&callback=kimonoCallback",
"crossDomain":true,
"dataType":"jsonp"
});
 </script>

Be sure to look at the console to see how the data is structured so you can determine which fields to populate the table with.

Well.. You need to actually make the table when kimonoCallback gets called.

See?

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

本文标签： javascriptpopulating a bootstrap html table via jquery dataStack Overflow