我使用具有数据表选项的模板。 我正在尝试使用 java 脚本动态生成数据表行。 该表出现,但搜索不起作用。 有人能帮我吗? 谢谢!
在这里你可以看到代码:
function renderFeed(results)
{
results = $.parseJSON(results.d);
dynamicRow = "";
dynamicModal = "";
$.each(results, function (i, row) {
dynamicRow += "<tr><td class='stars' data-name='star-outline' data-code='f27c'><a id='" + row.Id + "' onclick='changeToFavorit(this.id)'><i class='zmdi zmdi-star-outline zmdi-hc-fw'></i></a></td><td><a style='color: #2196f3' data-toggle='modal' data-target='#modal'" + row.Id + "'>" + row.Name + "</a></td><td>" + row.InstitutionName + "</td><td>" + row.Country + "</td><td>" + row.City + "</td><td>" + row.StartDate + "</td><td>" + row.Applicants + "</td><td><input type='file' name='uploadedfile' id='CVSfile" + row.Id + "' class='inputfile' /><label for='CVSfile" + row.Id + "'><i class='zmdi zmdi-upload zmdi-hc-fw'></i></label> <a id='deleteCourse" + row.Id + "' onclick='deleteCourse(this.id)'><i class='zmdi zmdi-delete zmdi-hc-fw'></i></a></td></tr>";
dynamicModal += "<div tabindex='-1' class='modal fade' id='modal" + row.Id + "' aria-hidden='true' style='display: none;'><div class='modal-dialog modal-lg'><div class='modal-content'><div class='modal-header'><h2>" + row.Name + "</h2></div><div class='modal-body'><h5>Number Of Course:</h5><p>" + row.Id + "</p><h5>Name Of Institution:</h5><p>" + row.InstitutionName + "</p><h5>Start Date:</h5><p>" + row.StartDate + "</p><h5>End Date:</h5><p>" + row.EndDate + "</p><h5>Descision Due Date:</h5><p>" + row.DesDate + "</p><h5>Description:</h5><p>" + row.DescC + "</p><h5>Requirement:</h5><h6>Education Degree:</h6><p>" + row.EducationType + "</p><h6>Languages:</h6>";
$.each(row.Clan, function (i2, row2) {
dynamicModal += "<p>" + row2.Name + "</p>";
});
dynamicModal += "<h6>Featured Skills & Endorsements:</h6>";
$.each(row.TagsList, function (i3, row3) {
dynamicModal += "<p>" + row3.Name + " - " + row3.Seniority;
if (row3.Seniority == 1)
dynamicModal += " year";
else dynamicModal += " years";
dynamicModal += "</p>";
});
dynamicModal += "</div><div class='modal-footer'><button class='btn btn-link' type='button' data-dismiss='modal'>Close</button></div></div></div></div>";
}
);
$('#tabelRows').empty();
$('#tabelRows').append(dynamicRow);
$('#modalsContent').empty();
$('#modalsContent').append(dynamicModal);
}
<html>
<body>
<table id="data-table" class="table table-bordered">
<thead class="thead-default">
<tr>
<td></td>
<th>Course Name</th>
<th>Institute</th>
<th>Country</th>
<th>City</th>
<th>Date</th>
<th>Numbers of Applicans</th>
<td></td>
</tr>
</thead>
<tbody id="tabelRows"></tbody>
</table>
<div id="modalsContent"></div>
</body>
<html>
第一个初始化表 姓名 开始时间 开始日期 结束日期 时间结束 由...制作
//并将数据从后端追加到表中 函数 FilterEventsData() {
$.ajax({
url: '/WebAI/ajax/SchedulesFunctions.php',
method: 'POST',
data: {
FUNCTION_NAME: "filterEvents",
startDate: startDate,
endDate: endDate,
holidayName: holidayName
},
dataType: 'json',
success: function (response) {
// Clear the existing table rows
$("#data-table-Editevent tbody").empty();
// Populate the table with the updated data
for (let i = 0; i < response.length; i++) {
// Updated row append operation with proper closing tags
$("#data-table-Editevent tbody").append("<tr data-id='" + response[i].idSchedule_Events + "'>" +
"<td>" + response[i].Event_Name + "</td>" +
"<td>" + response[i].Start_Time + "</td>" +
"<td>" + response[i].Start_Date + "</td>" +
"<td>" + response[i].End_Date + "</td>" +
"<td>" + response[i].End_Time + "</td>" +
"<td>" + response[i].Created_By + "</td>" +
"</tr>");
}
},
error: function (error) {
console.error("Error fetching Data:", error);
}
});
}