我要顯示JSON數據到表

-3

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

 
$(function() { 
 
\t $('#table').bootstrapTable({ 
 
\t \t data: mydata 
 
\t }); 
 
\t //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>

來源

2017-10-11 Balaji Dongare

你需要什麼？反正前請閱讀問你的問題https://stackoverflow.com/help/how-to-ask – core114

什麼錯誤/問題？ –

使用datatables https://datatables.net/ – juntapao

我會強烈建議您使用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" }, 
    ] 
    }) 
};

來源

2017-10-11 07:05:58

什麼問題了嗎？你的代碼工作完美。這裏是一個小提琴鏈接：
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

來源

2017-10-11 07:08:19

它只顯示錶頭，但它在小提琴上工作。 –

沒有你能做到這一點的任何插件，這樣

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

來源

2017-10-11 07:34:00

我要顯示JSON數據到表

回答

相關問題