我想将Json数据显示到表[duplicate]中

Question

null

var $table = $('#table');
var mydata =
	[
		{
			"id": 0,
			"name": "test0",
			"price": "$0"
		},
		{
			"id": 1,
			"name": "test1",
			"price": "$1"
		},
		{
			"id": 2,
			"name": "test2",
			"price": "$2"
		},
		{
			"id": 3,
			"name": "test3",
			"price": "$3"
		},
		{
			"id": 4,
			"name": "test4",
			"price": "$4"
		},
		{
			"id": 5,
			"name": "test5",
			"price": "$5"
		},
		{
			"id": 6,
			"name": "test6",
			"price": "$6"
		},
		{
			"id": 7,
			"name": "test7",
			"price": "$7"
		},
		{
			"id": 8,
			"name": "test8",
			"price": "$8"
		},
		{
			"id": 9,
			"name": "test9",
			"price": "$9"
		},
		{
			"id": 10,
			"name": "test10",
			"price": "$10"
		},
		{
			"id": 11,
			"name": "test11",
			"price": "$11"
		},
		{
			"id": 12,
			"name": "test12",
			"price": "$12"
		},
		{
			"id": 13,
			"name": "test13",
			"price": "$13"
		},
		{
			"id": 14,
			"name": "test14",
			"price": "$14"
		},
		{
			"id": 15,
			"name": "test15",
			"price": "$15"
		},
		{
			"id": 16,
			"name": "test16",
			"price": "$16"
		},
		{
			"id": 17,
			"name": "test17",
			"price": "$17"
		},
		{
			"id": 18,
			"name": "test18",
			"price": "$18"
		},
		{
			"id": 19,
			"name": "test19",
			"price": "$19"
		},
		{
			"id": 20,
			"name": "test20",
			"price": "$20"
		}
	];

$(function () {
	$('#table').bootstrapTable({
		data: mydata
	});
	//console.log(mydata);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.min.js"></script>

<div class="container">
    <table id="table">
        <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

null

Answer 1

你有什么问题？您的代码运行得很好。以下是一个小提琴链接:
HTML:

<div class="container">
    <table id="table">
        <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
        </thead>
    </table>
</div>

工作小提琴

Answer 2

我强烈建议您使用jQuery DataTable。

一个将任何数组或JSON数据转换为HTML表的简单插件

只需像这样调用datatable init

$(function () {
  $('#table').DataTable({ 
    ajax: {
      url: "../call/Mydata.php",  // will return the JSON as response
      type: 'GET'
    },
    columns: [
      { data: "users.id" },
      { data: "users.name" },
      { data: "users.price" }, 
    ]
  })
};