如何使用HTML表格从json API创建表

Question

我们使用api从MySQL数据库检索数据并将其转换为json文件类型。将这些数据导入HTML表格的最佳方式是什么？

这是API：https://nauticmc.com/dev/top.php?type=kills&start=0&end=9

根据你改变什么类型它会改变数据即杀敌的升序将首先显示杀敌的高度量。

$(document).ready(function() { 
 
    var json = [{"uuid":"ba6df9ff-84fa-464b-a231-d36782a7fdba","username":"zFrost87","kills":"19","deaths":"6","broken":"34","placed":"34","fish":"15","onlinetime":"9493","mobskilled":"6","crops":"1"},{"uuid":"b07762f3-38a4-45b7-9f21-6147704aee4b","username":"frechette456","kills":"3","deaths":"11","broken":"33","placed":"61","fish":"0","onlinetime":"1251","mobskilled":"1","crops":"7"},{"uuid":"83af0a86-7c09-4c32-8fa5-65db3c50b4cf","username":"MineManFrost","kills":"1","deaths":"2","broken":"16","placed":"1","fish":"0","onlinetime":"238","mobskilled":"0","crops":"0"},{"uuid":"71cb5612-d586-4390-ad78-05d295d6d2bd","username":"Nikolassparrow","kills":"0","deaths":"2","broken":"1","placed":"2","fish":"0","onlinetime":"30","mobskilled":"0","crops":"0"},{"uuid":"c34f51b5-8f2a-4e08-8b83-99d5faf21ea9","username":"SetupS1CK","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"81","mobskilled":"0","crops":"0"},{"uuid":"80212863-9466-4a4b-852e-5812e77d075b","username":"PickCottonNig","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"835","mobskilled":"0","crops":"0"},{"uuid":"a64de20f-91e7-4bb0-80db-4f7f1614d693","username":"OstenGaming","kills":"0","deaths":"0","broken":"1","placed":"0","fish":"0","onlinetime":"213","mobskilled":"0","crops":"0"},{"uuid":"25c60209-9fd4-42b8-a2b7-d78e01c0b3ae","username":"OpTc","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"9","mobskilled":"0","crops":"0"},{"uuid":"3a1dc4c7-e9ec-425e-ad50-54ae37c5f1a7","username":"AutoDolphin","kills":"0","deaths":"11","broken":"20","placed":"1","fish":"0","onlinetime":"444","mobskilled":"0","crops":"0"}]; 
 
    var tr; 
 
    for (var i = 0; i < json.length; i++) { 
 
     tr = $('<tr/>'); 
 
     tr.append("<td>" + json[i].username + "</td>"); 
 
     tr.append("<td>" + json[i].kills + "</td>"); 
 
     tr.append("<td>" + json[i].deaths + "</td>"); 
 
     tr.append("<td>" + json[i].broken + "</td>"); 
 
     tr.append("<td>" + json[i].placed + "</td>"); 
 
     tr.append("<td>" + json[i].fish + "</td>"); 
 
     tr.append("<td>" + json[i].onlinetime + "</td>"); 
 
     tr.append("<td>" + json[i].mobskilled + "</td>"); 
 
     tr.append("<td>" + json[i].crops + "</td>"); 
 
     $('table').append(tr); 
 
    } 
 
});

我使用的，现在本地JSON，因为阿贾克斯不允许访问跨域但我想它解析为一个变种得到它。

我也希望人们能够看到在顶部什么样的数据在我试图用datatables.js每列相应的箭头，但没有，没有任何JS工作这么好

这只是表或JSON

https://strixdesigns.com/Stats1/ <我想的箭头，这样

Answer 1

为什么不使用的数据表，并设置您的JSON场数

这样 您THEAD字段中的选项必须在相同的工作

HTML

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Username</th> 
      <th>Kills</th> 
      .... 
     </tr> 
    </thead> 

</table> 

JQUERY

$(document).ready(function() { 
    $('#example').DataTable({ 
     "ajax": { 
      "url": "https://nauticmc.com/dev/top.php?type=kills&start=0&end=9", 
      "type": "POST", 
      "data":{ 
        'type': 'kills', 
        'start': 0, 
        'end': 9 
       } 
     }, 
     "columns": [ 
      { "data": "username " }, 
      { "data": "kills " }, 
      ... 
     ] 
    }); 
}); 

检查文档在这里：https://datatables.net/examples/ajax/custom_data_flat.html

Answer 2

另一种方式做，这是希望的顺序存储在数组中，并添加一个嵌套循环你的逻辑。这样做的好处是，您可以根据需要更改订单（username最后，第三等），并且您的标记不必更改以适应字段的重新排序。

$(document).ready(function() { 
 
    var json = [{"uuid":"ba6df9ff-84fa-464b-a231-d36782a7fdba","username":"zFrost87","kills":"19","deaths":"6","broken":"34","placed":"34","fish":"15","onlinetime":"9493","mobskilled":"6","crops":"1"},{"uuid":"b07762f3-38a4-45b7-9f21-6147704aee4b","username":"frechette456","kills":"3","deaths":"11","broken":"33","placed":"61","fish":"0","onlinetime":"1251","mobskilled":"1","crops":"7"},{"uuid":"83af0a86-7c09-4c32-8fa5-65db3c50b4cf","username":"MineManFrost","kills":"1","deaths":"2","broken":"16","placed":"1","fish":"0","onlinetime":"238","mobskilled":"0","crops":"0"},{"uuid":"71cb5612-d586-4390-ad78-05d295d6d2bd","username":"Nikolassparrow","kills":"0","deaths":"2","broken":"1","placed":"2","fish":"0","onlinetime":"30","mobskilled":"0","crops":"0"},{"uuid":"c34f51b5-8f2a-4e08-8b83-99d5faf21ea9","username":"SetupS1CK","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"81","mobskilled":"0","crops":"0"},{"uuid":"80212863-9466-4a4b-852e-5812e77d075b","username":"PickCottonNig","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"835","mobskilled":"0","crops":"0"},{"uuid":"a64de20f-91e7-4bb0-80db-4f7f1614d693","username":"OstenGaming","kills":"0","deaths":"0","broken":"1","placed":"0","fish":"0","onlinetime":"213","mobskilled":"0","crops":"0"},{"uuid":"25c60209-9fd4-42b8-a2b7-d78e01c0b3ae","username":"OpTc","kills":"0","deaths":"0","broken":"0","placed":"0","fish":"0","onlinetime":"9","mobskilled":"0","crops":"0"},{"uuid":"3a1dc4c7-e9ec-425e-ad50-54ae37c5f1a7","username":"AutoDolphin","kills":"0","deaths":"11","broken":"20","placed":"1","fish":"0","onlinetime":"444","mobskilled":"0","crops":"0"}]; 
 
    var tr, th; 
 
    var order = ['username', 'kills', 'deaths', 'broken', 'placed', 'fish', 'onlinetime', 'mobskilled', 'crops']; 
 
    
 
    for (var i = 0; i < json.length; i++) { 
 
     tr = $('<tr/>'); 
 
     th = $('<tr/>'); 
 
     
 
     if (i === 0) { // create table headers    
 
     for (var j = 0; j < order.length; j++) { 
 
      th.append("<th>" + order[j] + "</th>"); 
 
      $('table').append(th) 
 
     }   
 
     }  
 
     
 
     for (var j = 0; j < order.length; j++) { 
 
     tr.append("<td>" + json[i][order[j]] + "</td>"); 
 
     $('table').append(tr);  
 
     } 
 
    } 
 
});

table { 
 
    font-family:Arial, Helvetica, sans-serif; 
 
    color:#666; 
 
    font-size:12px; 
 
    text-shadow: 1px 1px 0px #fff; 
 
    background:#eaebec; 
 
    margin:20px; 
 
    border:#ccc 1px solid; 
 
    border-radius:3px; 
 
    box-shadow: 0 1px 2px #d1d1d1; 
 
    display: block; 
 
    max-width: 100%; 
 
    overflow: auto; 
 
} 
 

 
table th { 
 
    padding:21px 25px 22px 25px; 
 
    border-top:1px solid #fafafa; 
 
    border-bottom:1px solid #e0e0e0; 
 
    background: #ededed; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); 
 
    background: -moz-linear-gradient(top, #ededed, #ebebeb); 
 
} 
 
table th:first-child { 
 
    text-align: left; 
 
    padding-left:20px; 
 
} 
 
table tr:first-child th:first-child { 
 
    border-top-left-radius:3px; 
 
} 
 
table tr:first-child th:last-child { 
 
    border-top-right-radius:3px; 
 
} 
 
table tr { 
 
    text-align: center; 
 
    padding-left:20px; 
 
} 
 
table td:first-child { 
 
    text-align: left; 
 
    padding-left:20px; 
 
    border-left: 0; 
 
} 
 
table td { 
 
    padding:18px; 
 
    border-top: 1px solid #ffffff; 
 
    border-bottom:1px solid #e0e0e0; 
 
    border-left: 1px solid #e0e0e0; 
 

 
    background: #fafafa; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa)); 
 
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa); 
 
} 
 
table tr.even td { 
 
    background: #f6f6f6; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6)); 
 
    background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); 
 
} 
 
table tr:last-child td { 
 
    border-bottom:0; 
 
} 
 
table tr:last-child td:first-child { 
 
    border-bottom-left-radius:3px; 
 
} 
 
table tr:last-child td:last-child { 
 
    border-bottom-right-radius:3px; 
 
} 
 
table tr:hover td { 
 
    background: #f2f2f2; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0)); 
 
    background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table></table>