动态数据表-java脚本

问题描述 投票:0回答:1

我使用具有数据表选项的模板。 我正在尝试使用 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>

javascript jquery html datatable
1个回答
0
投票

第一个初始化表 姓名 开始时间 开始日期 结束日期 时间结束 由...制作

//并将数据从后端追加到表中 函数 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);
        }
    });
}
© www.soinside.com 2019 - 2024. All rights reserved.