Question

I work with a template that has the option of a data-table. I am trying to generate the data-table rows dynamically using java script. The table appears but the search is not working. Can someone help me? Thanks!

页: 1

	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>

Answer 1

1st initialize table Name Start Time Start Date End Date End Time Created By

// AND IN APPEND DATA TO TABLE FROM BACKEND function 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);
        }
    });
}

友情链接