Question

我使用html创建了一个表。现在我想使用json数据填充表格。我一直在使用示例https://www.youtube.com/watch?v=A20PY5RxdI8

我的JavaScript代码在这里

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

我想将json填充到我的表中，但是在所述表中不显示任何数据

Answer 1

您可以使用以下代码示例：

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

有关更多示例，请阅读$.getJson()文档。

Answer 2

我已经检查了示例中使用的Bootstrap表的文档。该文档写得不好，没有解释参数。这导致混乱。阅读文档并进行JS小提琴操作时，您将意识到 data-toggle 属性非常重要。此属性的值应与表的ID相同。您可以尝试删除提琴下方的数据属性以进行验证。

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

<script src="https://unpkg.com/bootstrap-table@1.15.3/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>

Answer 3

您将需要如下修改代码。 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>

和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'
    }]
  })
   });

注意：您的网址应返回json响应。另外，可以使用$ .ajax

代替getJSON。

在引导数据表中加载json数据

3 个答案: