我有以下陣列，它是使用 PDO 從 MySQL 資料庫中提取的。
[{
"tbl":"1",
"orid":"915",
"date":"2021-12-30 12:46:48",
"flag":0
},
{
"tbl":"2",
"orid":"914",
"date":"2021-12-30 12:46:21",
"flag":0
},
{
"tbl":"3",
"orid":"913",
"date":"2021-12-30 12:45:00",
"flag":0
},
{
"tbl":"1",
"orid":"911",
"date":"2021-12-30 12:27:17",
"flag":1
}]
我正在嘗試通過 Ajax 檢索此資料并相應地構建/附加 div。它不起作用，因為我什至無法顯示資料引數和鍵。這是成功（資料）函式：
$.each(data,function(i,j){
content ='<span>' j[i] '<br /></span>';
$('.timeline').append(content);
});
我想按以下格式放置資料：
<div tbl="1">
<span class="header">Ref 1</span>
<div orid="915" class="order">...</div>
<div orid="911" class="order">...</div>
</div>
<div tbl="2">
<span class="header">Ref 2</span>
<div orid="914" class="order">...</div>
</div>
<div tbl="3">
<span class="header">Ref 3</span>
<div orid="913" class="order">...</div>
</div>
棘手的部分是將每個訂單/orid 附加到現有的 tbl div，或者如果由于重復的 ajax 呼叫（每次加載 10 行）而尚不存在，則創建一個新的 tbl div。
uj5u.com熱心網友回復：
這是您的示例資料的示例，而不是tbl, orid我使用的data-tbl和data-orid屬性。
const data = [{
"tbl": "1",
"orid": "915",
"date": "2021-12-30 12:46:48",
"flag": 0
},
{
"tbl": "2",
"orid": "914",
"date": "2021-12-30 12:46:21",
"flag": 0
},
{
"tbl": "3",
"orid": "913",
"date": "2021-12-30 12:45:00",
"flag": 0
},
{
"tbl": "1",
"orid": "911",
"date": "2021-12-30 12:27:17",
"flag": 1
}
]
$.each(data, function(i, data) {
let target = $(`div[data-tbl=${data.tbl}]`)
if (target.length == 0) {
target = $(`<div data-tbl="${data.tbl}"><span >Ref ${data.tbl}</span></div>`);
$('.timeline').append(target)
}
const content = `<div data-orid="${data.orid}" >${data.orid}</div>`;
target.append(content);
});.header{
color: green;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="timeline"></div>uj5u.com熱心網友回復：
考慮以下。
$(function() {
var resultData = [{
"tbl": "1",
"orid": "915",
"date": "2021-12-30 12:46:48",
"flag": 0
},
{
"tbl": "2",
"orid": "914",
"date": "2021-12-30 12:46:21",
"flag": 0
},
{
"tbl": "3",
"orid": "913",
"date": "2021-12-30 12:45:00",
"flag": 0
},
{
"tbl": "1",
"orid": "911",
"date": "2021-12-30 12:27:17",
"flag": 1
}
];
function makeNewTable(tableData, target) {
if (tableData == undefined || target == undefined) {
return false;
}
var tableId = tableData.tbl;
var table = $("<div>", {
id: "table-" tableId,
class: "table"
}).appendTo(target);
$("<div>", {
class: "header"
}).html("Ref " tableId).appendTo(table);
$("<div>", {
class: "order"
}).data("orid", tableData.orid).html(tableData.date).appendTo(table);
$("<input>", {
type: "checkbox",
}).prop({
checked: tableData.flag == 1 ? true : false,
disabled: true
}).appendTo(table);
};
function updateTable(newData, target) {
if (newData == undefined || target == undefined) {
return false;
}
$("<div>", {
class: "order"
}).data("orid", newData.orid).html(newData.date).appendTo(target);
$("<input>", {
type: "checkbox",
}).prop({
checked: newData.flag == 1 ? true : false,
disabled: true
}).appendTo(target);
}
function showData(data, target) {
if (data == undefined || target == undefined) {
return false;
}
var tbl;
$.each(data, function(index, row) {
if ($("#table-" row.tbl).length == 0) {
makeNewTable(row, $("#results-table"));
} else {
updateTable(row, $("#table-" row.tbl));
}
});
}
showData(resultData, $("#results-table"));
});.header {
font-weight: bold;
padding: 0.2em 0.4em;
}
.order {
display: inline-block;
padding: 0.2em 0.4em;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="results-table">
</div>您可以在此處看到如何使用 Functions 更輕松地分解不同的場景。通過這種方式，您可以根據需要創建新表或更新現有表。
更新
您可以考慮使用資料表。示例：https : //jsfiddle.net/Twisty/u6bdcsqz/51/
主要代碼：
function makeTable(keys, data, parent) {
var table = $("<table>").appendTo(parent);
$("<thead>").appendTo(table);
$("<tr>").appendTo($("thead", table));
$.each(keys, function(i, k) {
$("<th>").html(k).appendTo($("thead tr", table));
});
$("<tbody>").appendTo(table);
var row;
$.each(data, function(i, r) {
row = $("<tr>").appendTo($("tbody", table));
$("<td>").html("Table " r.tbl).appendTo(row);
$("<td>", {
class: "order"
}).html(r.orid).appendTo(row);
$("<td>", {
class: "date"
}).html(r.date).appendTo(row);
$("<td>", {
class: "flag"
}).html(r.flag == 1 ? "X" : " ").appendTo(row);
});
var groupColumn = 0;
dataTable = table.DataTable({
"paging": false,
"columnDefs": [{
"visible": false,
"targets": groupColumn
}],
"order": [
[groupColumn, 'asc']
],
"drawCallback": function(settings) {
var api = this.api();
var rows = api.rows({
page: 'current'
}).nodes();
var last = null;
api.column(groupColumn, {
page: 'current'
}).data().each(function(group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr ><td colspan="3">' group '</td></tr>'
);
last = group;
}
});
}
});
table.on('click', 'tr.group', function() {
var currentOrder = table.order()[0];
if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
table.order([groupColumn, 'desc']).draw();
} else {
table.order([groupColumn, 'asc']).draw();
}
});
console.log("Table created, " data.length " rows.");
}
function updateTable(data) {
$.each(data, function(i, r) {
dataTable.row.add(["Table " r.tbl, r.orid, r.date, r.flag]).draw(false);
});
console.log("Table updated, added " data.length " rows.");
}
function showData(tableData, target) {
if (tableData == undefined || target == undefined) {
return false;
}
if ($("table", target).length > 0) {
console.log("Table Found, updating");
updateTable(tableData, $("table", target));
} else {
console.log("No Table, creating.");
makeTable(["Table", "Order", "Date", "Flag"], tableData, target);
}
}
它比您想要的要多，但它為您提供了您所要求的所有功能。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/399003.html
標籤：javascript 查询 json 阿贾克斯 jquery-ui
上一篇：Jquery回圈遍歷dom的元素