动态数据表-java脚本

时间:2018-03-19 08:26:18

标签: javascript jquery html datatable

我使用可以选择数据表的模板。 我试图使用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);
    }
&#13;
<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>
&#13;
&#13;
&#13;

0 个答案:

没有答案