admin管理员组文章数量:1353941
Currently I have code that query's lists from three separate subsites and then populates that data that I am calling for into an html table.
I want to spice up the table just a bit, I was thinking something along the lines of a DataTable but that is too much work. What would be the easiest way to make this HTML table have a search tool/filter tool?
function loadData(source, url) {
return fetch(url, {
headers: {
accept: "application/json; odata=verbose"
}
}) // make request
.then((r) => {
if (!r.ok) throw new Error("Failed: " + url); // Check for errors
return r.json(); // parse JSON
})
.then((data) => data.d.results) // unwrap to get results array
.then((results) => {
results.forEach((r) => (r.source = source)); // add source to each item
return results;
});
}
window.addEventListener("load", function() {
Promise.all([
loadData("xDeliverables", "/_api/web/lists/getbytitle('xDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
loadData("yDeliverables", "/_api/web/lists/getbytitle('yDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
loadData("zDeliverables", "/_api/web/lists/getbytitle('zDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
])
.then(([r1, r2, r3]) => {
const objItems = r1.concat(r2, r3);
var tableContent =
'<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
"<td><strong>To</strong></td>" +
"<td><strong>Date Submitted</strong></td>" +
"<td><strong>Approved</strong></td>" +
"<td><strong>Notes</strong></td>" +
"<td><strong>Source</strong></td>" +
"</tr></thead><tbody>";
for (var i = 0; i < objItems.length; i++) {
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "<td>" + objItems[i].source + "</td>";
tableContent += "</tr>";
}
$("#deliverables").append(tableContent);
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});td {
text-align: center;
vertical-align: middle;
}<script src=".3.1/jquery.min.js"></script>
<div id="EmployeePanel">
<table id='deliverablesTable' style="width: 100%;" border="1 px">
<tr>
<td>
<div id="deliverables" style="width: 100%"></div>
</td>
</tr>
</table>
</div>Currently I have code that query's lists from three separate subsites and then populates that data that I am calling for into an html table.
I want to spice up the table just a bit, I was thinking something along the lines of a DataTable but that is too much work. What would be the easiest way to make this HTML table have a search tool/filter tool?
function loadData(source, url) {
return fetch(url, {
headers: {
accept: "application/json; odata=verbose"
}
}) // make request
.then((r) => {
if (!r.ok) throw new Error("Failed: " + url); // Check for errors
return r.json(); // parse JSON
})
.then((data) => data.d.results) // unwrap to get results array
.then((results) => {
results.forEach((r) => (r.source = source)); // add source to each item
return results;
});
}
window.addEventListener("load", function() {
Promise.all([
loadData("xDeliverables", "/_api/web/lists/getbytitle('xDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
loadData("yDeliverables", "/_api/web/lists/getbytitle('yDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
loadData("zDeliverables", "/_api/web/lists/getbytitle('zDeliverables')/items?$select=Program,To,Date,Approved,Notes"),
])
.then(([r1, r2, r3]) => {
const objItems = r1.concat(r2, r3);
var tableContent =
'<table id="deliverablesTable" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
"<td><strong>To</strong></td>" +
"<td><strong>Date Submitted</strong></td>" +
"<td><strong>Approved</strong></td>" +
"<td><strong>Notes</strong></td>" +
"<td><strong>Source</strong></td>" +
"</tr></thead><tbody>";
for (var i = 0; i < objItems.length; i++) {
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "<td>" + objItems[i].source + "</td>";
tableContent += "</tr>";
}
$("#deliverables").append(tableContent);
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});td {
text-align: center;
vertical-align: middle;
}<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="EmployeePanel">
<table id='deliverablesTable' style="width: 100%;" border="1 px">
<tr>
<td>
<div id="deliverables" style="width: 100%"></div>
</td>
</tr>
</table>
</div>3 Answers
Reset to default 4 +25Yes, you can. I couldn't edit the code with respect to yours but here is something you maybe able to use.
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
Yes, the DataTables jQuery plugin would probably be your best solution. Their front page has the very basics covered: https://datatables
One thing to note is that their example assumes your table exists on page load, but yours is created by an ajax call. So you'd initialize it right after your tableContent append call.
Using all default options, you'd just need:
$("#deliverablesTable").DataTable();
Edit: It also looks like you might run into problems because of having two different tables with id='deliverablesTable'. You have one in your initial html, and then you insert another one inside of that during your javascript execution. Each id should be unique on the page, and you might not even want to be inserting one table nested into another in the first place.
Just a working example from your code:
function loadData(source, url) {
return fetch(url) // make request
.then((r) => {
if (!r.ok) throw new Error("Failed: " + url); // Check for errors
return r.json(); // parse JSON
})
//.then((data) => data.d.results) // unwrap to get results array
.then((results) => {
results.forEach((r) => (r.source = source)); // add source to each item
return results;
});
}
const TEST_URL1 = 'https://cors-anywhere.herokuapp./https://jsonkeeper./b/9S5X';
const TEST_URL2 = 'https://cors-anywhere.herokuapp./https://jsonkeeper./b/R0CC';
const TEST_URL3 = 'https://cors-anywhere.herokuapp./https://jsonkeeper./b/4OF4';
window.addEventListener("load", function() {
Promise.all([
loadData("xDeliverables", TEST_URL1),
loadData("yDeliverables", TEST_URL2),
loadData("zDeliverables", TEST_URL3),
])
.then(([r1, r2, r3]) => {
const objItems = r1.concat(r2, r3);
var tableContent =
'<table id="deliverablesTableInner" style="width:100%" border="1 px"><thead><tr><td><strong>Program</strong></td>' +
"<td><strong>To</strong></td>" +
"<td><strong>Date Submitted</strong></td>" +
"<td><strong>Approved</strong></td>" +
"<td><strong>Notes</strong></td>" +
"<td><strong>Source</strong></td>" +
"</tr></thead><tbody>";
for (var i = 0; i < objItems.length; i++) {
tableContent += "<tr>";
tableContent += "<td>" + objItems[i].Program + "</td>";
tableContent += "<td>" + objItems[i].To + "</td>";
tableContent += "<td>" + objItems[i].Date + "</td>";
tableContent += "<td>" + objItems[i].Approved + "</td>";
tableContent += "<td>" + objItems[i].Notes + "</td>";
tableContent += "<td>" + objItems[i].source + "</td>";
tableContent += "</tr>";
}
$("#deliverables").append(tableContent);
$('#deliverablesTableInner').DataTable();
})
.catch((err) => {
alert("Error: " + err);
console.error(err);
});
});
//fetch(TEST_URL).then(r => console.log(r))td {
text-align: center;
vertical-align: middle;
}<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdn.datatables/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<div id="EmployeePanel">
<table id='deliverablesTable' style="width: 100%;" border="1 px">
<tr>
<td>
<div id="deliverables" style="width: 100%"></div>
</td>
</tr>
</table>
</div>Note: better look in "fullscreen" mode. After clicking on "Run code snippet", press "Full page".
本文标签： javascriptjQueryHTML Table to DataTablesStack Overflow
版权声明：本文标题：javascript - jQuery - HTML Table to DataTables - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743940429a2565461.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论