[英]Loading data into HTML Tables using AJAX JavaScript don't work
我將數據存儲在 json 文件中,如下所示:
[
["cell1", "cell2", "cell3"],
["cell4", "cell5", "cell6"]
...
]
我想將 json 數據轉換為 html 表,所以我創建了以下代碼(html 結構 + 從位於同一目錄“rows.json”中的專用 json 數據文件中單獨加載數據):
<body>
<table id="tab">
<thead>
<tr>
<th>column_1</th>
<th>column_2</th>
<th>column_3</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
const TabBody = document.querySelector("#tab > tbody")
function loadData() {
const request = new XMLHttpRequest();
request.open("get", "rows.json");
request.onload = () => {
try {
const json = JSON.parse(request.responseText);
populateTable(json);
} catch (e) {
console.warn("error");
}
};
request.send();
}
function populateTable(json){
while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}
json.forEach((row) => {
const tr = document.createElement("tr");
row.forEach((cell) => {
const td = document.createElement("td");
td.textContent = cell;
tr.appendChild(td);})
TabBody.appendChild(tr);
})
}
</script>
</body>
代碼不起作用,並且表體未加載顯示。 也許代碼不正確,或者效率不高,並且有更好的方法來做到這一點..
您populateTable
function 似乎是正確的,我將它復制到一個片段中,它工作正常。
XMLHttpRequest
獲得正確的數據?loadData
function? 你忘了叫它嗎? const data = [ ["cell1", "cell2", "cell3"], ["cell4", "cell5", "cell6"] ] const TabBody = document.querySelector("#tab > tbody"); function populateTable(json) { while (TabBody.firstChild) { TabBody.removeChild(TabBody.firstChild); } json.forEach((row) => { const tr = document.createElement("tr"); row.forEach((cell) => { const td = document.createElement("td"); td.textContent = cell; tr.appendChild(td); }) TabBody.appendChild(tr); }) } populateTable(data);
<table id="tab"> <thead> <tr> <th>column_1</th> <th>column_2</th> <th>column_3</th> </tr> </thead> <tbody> </tbody> </table>
在這種情況下,您可以使用 Tabulator。 您可以在其中加載 json 數據,它為您提供了許多功能和設置表格樣式的能力。
在這里您可以了解如何從 ajax 請求中插入數據: http://tabulator.info/docs/4.1/data#ajax
如果您想發出請求並在表格中輸入響應,可以在您的代碼得到響應后執行此操作:
var table = new Tabulator("#example-table", {
height: '70%', // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: res.json, //assign data to table, json response
layout: "fitDataFill", //fit columns to width of data
pagination: "local",
paginationSize: 10,
paginationSizeSelector: [5, 10, 15, 20],
movableColumns: true,
selectable: true,
columns: [
{
formatter: "buttonCross", align: "center", title: "del", headerSort: false, cellClick: function (e, cell) {
if (confirm('Are you sure you want to delete this entry?'))
cell.getRow().delete();
console.log(rowJson = cell.getRow().getData())
}
},
{ title: "id", field: "id", sorter: "number" },
{ title: "Name", field: "name", sorter: 'string' },
{ title: "phone", field: "phone", sorter: "number" },
{ title: "email", field: "email", sorter: 'string' },
{ title: "location", field: "location", sorter: 'string' },
{ title: "price/night", field: "price", sorter: 'number' },
{ title: "number of rooms", field: "roomsnumber", sorter: 'number' },
{ title: "capacity", field: "capacity", sorter: 'number' },
{ title: "available", field: "available", sorter: 'string' },
{ title: "start time", field: "startTime", sorter: 'string' },
{ title: "date", field: "date", sorter: "date", },
]
});
它非常易於使用,並且有很多功能..
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.