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

时间：2017-07-04 00:49:59

标签： html ajax html-table

我们正在使用api从MySQL数据库中检索数据并将其转换为json文件类型。将数据放入HTML表格的最佳方法是什么。

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

根据您更改的内容，类型将改变数据的升序I.E Kills将首先显示杀戮的高度。

$(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，因为Ajax不允许访问跨域，但我会将其解析为var以获取它。

我还希望人们能够通过我尝试使用datatables.js的每一列中的相应箭头来查看最顶层的数据，但是效果不是很好

这只是没有任何js或json的表

https://strixdesigns.com/Stats1/＆lt;我希望箭头像这样工作

2 个答案:

答案 0 :(得分：0)

为什么不使用数据表并设置这样的选项 您的thead字段在json字段数上必须相同

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 " },
            ...
        ]
    } );
} );

在此处查看文档：{​​{3}}

答案 1 :(得分：0)

另一种方法是在数组中存储所需的顺序，并在逻辑中添加嵌套循环。这里的优点是您可以将订单更改为您想要的任何内容（C = cell(5, 6, 7); [C{:}] = deal(ones(10, 1)); for i = 1:5 for j = 1:6 for k = 1:7 C{i,j,k}(end) = 0; end end end 最后，第三个等等），并且您的标记不必更改以适应字段的重新排序。

＆＃13;
＆＃13; 
username
＆＃13; 
$(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);      
      }
    }
});
＆＃13; 
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);  
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题