populating a bootstrap html table via jquery data

Question

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

i just tried to insert the jquery code given by kimono

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

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

wenyi · Accepted Answer · 2014-10-23 17:20:55Z

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

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

answered Oct 23, 2014 at 17:20

wenyi

1,3848 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brett · Accepted Answer · 2014-09-11 15:53:34Z

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

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.

animatedgif · Accepted Answer · 2014-09-11 15:16:08Z

-1

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

answered Sep 11, 2014 at 15:16

animatedgif

1,10912 silver badges17 bronze badges

Collectives™ on Stack Overflow

populating a bootstrap html table via jquery data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related