我想将 Json 数据显示到表中[重复]答案

【问题标题】：I want to display Json Data into table [duplicate]我想将 Json 数据显示到表中[重复]
【发布时间】：2018-03-22 17:51:38
【问题描述】：

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>

【问题讨论】：

你需要什么？无论如何请在提问之前阅读stackoverflow.com/help/how-to-ask
错误/问题是什么？
使用数据表datatables.net
将您的代码转换为 sn-p。它工作正常。

标签： jquery html twitter-bootstrap

【解决方案1】：

我强烈建议您使用jQuery dataTable。

一个将Any Array 或 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" }, 
    ]
  })
};

【讨论】：

【解决方案2】：

你有什么问题？您的代码运行良好。这是一个小提琴链接：
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>

Working Fiddle

【讨论】：

它只显示 Table Head ，但它在 Fiddle 上工作。

【解决方案3】：

不用任何插件你也可以这样做

$.each(mydata,function(id,val){
   var tableData = "<tr>";
   $.each(val,function(column,value){

     tableData = tableData + "<td>"+ value +"</td>";

   });
   tableData = tableData+ "</tr>";
   $('#tableBody').append(tableData);
});

并更改您的 HTML 表格并添加表格正文。

<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>
<tbody id="tableBody">
<tbody>

【讨论】：