load json data in bootstrap data table

Question

i created a table using html . now i want to populate my table using json data. i have been using the example https://www.youtube.com/watch?v=A20PY5RxdI8

my javascript code is here

$(document).ready(function () {
	
	
	$.getJSON("my.php",  function(json){
	
    myjson = json;
	
	
}).done(function() {

 $('#tble').bootstrapTable('load', myjson);
			
			var $table = $('#tble');
$table.bootstrapTable('load', myjson);
		     $table.bootstrapTable({
	search: true,
			      pagination: true,
			      buttonsClass: 'primaryt',
			      showFooter: true,
				   minimumCountColumns: 2,
    columns: [ {
        field: 'one',
        title: 'ID'
    }, {
        field: 'two',
        title: 'f name'
    }, {
        field: 'three',
        title: 'last name'
    }],
    data: myjson
	

});
	
});
});

<table id = 'tble'>
<tr class=xl70 height=42 style='mso-height-source:userset;height:31.5pt'>
  <th height=42 class=xl72 width=57 style='height:31.5pt;border-top:none;
  border-left:none;width:43pt' data-field="one">1</th>
  <th class=xl72 width=80 style='border-top:none;border-left:none;width:60pt'>2</th>
  <th class=xl72 width=97 style='border-top:none;border-left:none;width:73pt'>3</th>
  
 </tr>
</table>

i want to populate json into my table but it does not display any data in the said table

Are you using any external jquery for bootstrap table function? — Sachin Vishwakarma
– Sachin Vishwakarma, Commented Jul 17, 2019 at 15:23

lgabster · Accepted Answer · 2019-07-17 15:32:01Z

1

You can use the following code example:

$.getJSON("my.php")
  .done(function(data) {
    $('#tble').bootstrapTable('load', data);
  })

Read the $.getJson() documentation for more example.

answered Jul 17, 2019 at 15:32

lgabster

7257 silver badges17 bronze badges

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

3 Comments

Sarah_Salar Over a year ago

then what should i write in html fields?

Sarah_Salar Over a year ago

i am stuck at displaying coming data into html table

lgabster Over a year ago

Use data-field attributes in <th> tags, like in the video or in the documentation examples: bootstrap-table.com/docs/getting-started/usage

Sachin Vishwakarma · Accepted Answer · 2019-07-17 16:28:23Z

0

I have checked the documentation of Bootstrap table which you are using in your example. The document is poorly written without explaining the parameters. Which results in confusion. When you read the document and do some JS fiddle you will realise that data-toggle attribute is very important. The value of this attribute should be the same as the Id of your table. you can try removing data attribute filed in below fiddle to verify it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<div id="toolbar">
  <button id="button" class="btn btn-secondary">load</button>
</div>
<table
  id="table"
  data-toggle="table"
  data-height="460">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')
  var $button = $('#button')

  function randomData() {
    var startId = ~~(Math.random() * 100)
    var rows = []

    for (var i = 0; i < 10; i++) {
      rows.push({
        id: startId + i,
        name: 'test' + (startId + i),
        price: '$' + (startId + i)
      })
    }
    return rows
  }

  $(function() {
  var someData = randomData();
     
     debugger;
     $table.bootstrapTable('load', someData)
  
    
  })
</script>

answered Jul 17, 2019 at 16:28

Sachin Vishwakarma

8697 silver badges9 bronze badges

2 Comments

Sarah_Salar Over a year ago

what should i do in my case?

Sarah_Salar Over a year ago

i am stuck at displaying data in table.

Sachin Vishwakarma · Accepted Answer · 2019-07-18 09:15:04Z

0

You will need to modify your code as below. HTML

<table id = 'tble' data-toggle="tble">
<thead>
<tr>
  <th data-field="one">ID</th>
  <th data-field="two">f name</th>
  <th data-field="three">last name</th>
</tr>
</thead>
</table>

and JS

$(document).ready(function () {
$('#table').bootstrapTable({
            url: 'my.php',
            pagination: true,
            search: true,
    columns: [{
    field: 'one',
    title: 'ID'
             }, {
       field: 'two',
      title: 'f name'
   }, {
     field: 'three',
      title: 'last name'
    }]
  })
   });

Note: your URL should return a json response. Else instead of getJSON you can use $.ajax

answered Jul 18, 2019 at 9:15

Sachin Vishwakarma

8697 silver badges9 bronze badges

4 Comments

Sarah_Salar Over a year ago

no it created a table new one i want to insert data in that html table

Sachin Vishwakarma Over a year ago

how are you creating that table?

Sarah_Salar Over a year ago

create static head using html as i have given my html code

Sachin Vishwakarma Over a year ago

Yes, But you are missing <thead> tag which seems necessary for bootstrap table

Collectives™ on Stack Overflow

load json data in bootstrap data table

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related