更新1

Question

我使用node.js + express创建了这个页面，我在显示下表：

我希望当使用下拉列表（带有标签显示结果的一个）更改限制时，使用ajax仅使用ajax重新加载包含新数据的表，但是我很难这样做。这是显示我的表的ejs代码：

 <table class="assignment-table table table-striped table-bordered table-hover table-condensed table-responsive">
                        <thead>
                            <tr>
                                <th>S.No.</th>
                                <th>Name</th>
                                <th>Subject</th>
                                <th>Topic</th>
                                <th>Faculty</th>
                                <th>Posted</th>
                                <th>Last Date</th>
                                <th>Mode of Submission</th>
                            </tr>
                        </thead>
                        <tbody class="table_body">

                            <% for(var i =0;i< result.length;i++) { %>

                            <tr>
                                <td class="result_id">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link" id="">
                                            <%= result[i]._id %>
                                        </a>
                                </td>

                                <td class="result_name">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                             <%=  result[i].nameAssignment %> 
                                        </a>
                                </td>
                                <td class="result_subject">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                            <%= result[i].Subject %>
                                    </a>
                                </td>
                                <td class="result_topic">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                           <%= result[i].Topic %>
                                        </a>
                                </td>
                                <td class="result_faculty">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                        <%= result[i].Faculty %></a>
                                </td>
                                <td class="result_posted">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                        <%= result[i].Posted %></a>
                                </td>
                                <td class="result_lastdate">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                        <%= result[i].LastDate %></a>
                                </td>
                                <td class="result_submission">
                                    <a target="_blank" href="/assignment/abc.pdf" class="download-link">
                                        <%= result[i].Submission %></a>
                                </td>
                            </tr>
                            <% } %>
                        </tbody>
                    </table>

在上面提到的 filter_result（）路由中，我从网址获取限制并使用新限制查询数据库并再次呈现网页。

   Router.get('/filter_result',(req,res) => {
    limit = parseInt( decodeURIComponent(req.query.limit) );
    models.filterResults(limit, (count,result) =>  {
        //if (err) throw err;
        console.log(limit);
        //res.send(result);
        res.render('assignment-list',{limit:limit,result:result,count : count});
    }); 
});

如何在ejs页面中重新显示表格？

Answer 1

基本上，当您加载或重新加载页面时，您的.ejs格式只会呈现一次。所以你要做的就是在已经呈现的HTML之上重新渲染（或替换）来自AJAX调用的HTML。

您似乎已经在使用jQuery，所以我的示例代码也使用了jQuery。

重新呈现（或者，再次，替换）HTML取决于您的/filter_result响应的内容。如果它只是一堆<tr> s，那么它可能是

JS

$('table.assignment-table').find('tbody').html(result);

如果它是整个<table>，那么你最好用<table>之类的包装器包装<div>并执行以下操作。

HTML

<div id="table-wrapper">
    <table>
        ...
    </table>
</div>

JS

$('div#table-wrapper').html(result);

如何引用您的包装并替换内容可能会有所不同。

更新1

假设您的API（/filter_result）返回一个分配对象数组，如

{
  "status": "success",
  "data": [
    {
      "Subject": "Your subject",
      "Topic": "Your topic",
      ...
    },
    ...

  ]
}

你可以从数据创建一堆<tr/>并用它们替换现有的<tr/>（当然是用jQuery。关于使用jQuery创建DOM，你可以参考the docs。）

$.ajax({
  method: 'GET',
  url: 'URL_TO_FILTER_RESULT',
  data: SOME_DATA,
  success: function(res) {
    var assignments = res.data;
    var body = [];

    assignments.forEach(function(assignment) {
      var tr = $('<tr/>');
      tr.append($('<td/>').html('<a href="blah-blah">' + assignment.Subject + '</a>');
      tr.append($('<td/>').html('<a href="blah-blah">' + assignment.Topic + '</a>');

      ...

      body.push(tr);
    });

    $('table.assignment-table').find('tbody').html(body);
  }
})

如何在express.js

1 个答案:

JS

HTML

JS

更新1