I am using latest bootstrap-Table for Table with Dynamic data from JSON url. I tried with static header and TD fields (jsfiddle-1) from JSON from bootstrap-Table also I used data-field option in th (jsfiddle-2) but What I am looking is Dynamic Header and Dynamic TD from URL using foreach. I checked with bootstrap-Table samples but not available. Please share the samples and ideas.

Fiddle 1 :

$(function() {

$('#table').bootstrapTable({
    url: 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data',
    pagination: true,
    height: 450,
    locale: 'en-US',
    pageList: [30,55,80,100],
    pageSize: 30,
    columns: [
      [ {
        title: 'Site ID',
        field: 'id',          
        align: 'center',
        valign: 'middle',
        sortable: true,
        
      } ,
      {
        field: 'name',
        title: 'Customer Name',
        sortable: true,
        
        align: 'center'
      }, {
        field: 'price',
        title: 'Depot',
        sortable: true,
        align: 'center',
      
      } ]
    ] 
    

}); });

Fiddle 2:

$(function() {

$('#table').bootstrapTable({
    url: 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data',
    pagination: true,
    height: 450,
    locale: 'en-US',
    pageList: [30,55,80,100],
    pageSize: 30 

}); });