NodeJS& Javascript:使用分页过滤表

时间:2018-03-18 22:47:41

标签: javascript node.js filter

我使用this code时,我的表格数据很少并且非常有用,但是当我将分页添加到表格中时,它现在只适用于我所在的页面。这是我需要进行过滤的分页路线:

router.get('/', (req, res)=>{
    const perPage = 10;
    const page = req.query.page || 1;

    ElectoralUnit.find({})
        .skip((perPage * page) - perPage)
        .limit(perPage)
        .populate('town')
        .then(electoralUnits=>{

        ElectoralUnit.count().then(electoralUnitCount=>{
            Town.find({}).sort({name: 1}).then(towns=>{
                res.render('admin/electoralUnits/index', {
                    electoralUnits: electoralUnits,
                    towns: towns,
                    current: parseInt(page),
                    pages: Math.ceil(electoralUnitCount / perPage)
                });
            });
        });
    });
});

表:

<div class="col-sm-8">
  <input class="form-control" type="text" id="myInput" onkeyup="filterTowns()" placeholder="Filter: Ukucajte ime grada/opštine">
  <table class="table table-hover" id="myTable">
    <thead>
      <tr>
        <th>City</th>
        <th>IJ</th>
        <th>Datum unosa</th>
      </tr>
    </thead>
    <tbody>
      {{#each electoralUnits}}
        <tr>
          <td>{{town.name}}</td>
          <td>{{name}}</td>
          <td>{{generateDate date 'DD. MMM. YYYY.'}}</td>
          <td><a href="/admin/electoralUnits/edit/{{id}}" class="btn btn-outline-info btn-sm">Edit</a></td>
          <td>
            <form action="/admin/electoralUnits/{{id}}?_method=DELETE" method="post">
              <button class="btn btn-outline-danger btn-sm">Delete</button>
            </form>
          </td>
        </tr>
      {{/each}}
    </tbody>
  </table>
  <!-- Pagination -->
  <ul class="pagination justify-content-center mb-4">
      {{#paginate current=current pages=pages}}{{/paginate}}
  </ul>
</div>

使用Javascript:

function filterTowns() {
  // Declare variables
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}

Google for this solution,我找到了一些像this这样的解决方案,但我的代码没有运气。

如何修改w3schools中的代码以过滤分页提供的整个页面,而不仅仅是我当前的页面?

0 个答案:

没有答案