Как добавить нумерацию страниц для навигации по страницам блога (Node / Express) - PullRequest
Новая
       14

Как добавить нумерацию страниц для навигации по страницам блога (Node / Express)

1 голос
/ 16 апреля 2019

Я создаю сайт блога и пытаюсь использовать нумерацию страниц для навигации по страницам постов блога, когда в базе данных хранится более 3 постов.Я пытаюсь передать данные из внешнего интерфейса, когда нажимаю «новые» или «предыдущие» кнопки, чтобы управлять страницами.Как я могу это сделать?

Я чувствую, что должен каким-то образом использовать метод POST.

Вот мой внешний код в EJS.Это кнопки, которые управляют страницами сообщений. 

  <% if(totalItems > 3){ %>
  <div class="page-buttons">
    <form action="/">
      <button type="submit" class="btn btn-outline-info newer-posts">Next</button>

    <button type="submit" class="btn btn-outline-info older-posts">Previous</button>
    </form>

  </div>
  <% } %>

Вот маршрут на серверной части.

app.get("/", (req, res) => {
  let currentPage = req.query.page || 1;
  let perPage = 3;
  let totalItems;

  Post.find()
    .countDocuments()
    .then(count => {
      totalItems = count;
      Post.find()
        .skip((currentPage - 1) * perPage)
        .limit(perPage)
        .then(posts => {
            res.render("home", {
              posts: posts,
              totalItems: totalItems
            });
        });
    })
});

Я ожидаю, что нажатие на кнопки увеличит или уменьшит переменную currentPage и отобразит нужные страницы постов в блоге из серверной части.Но вместо этого он ничего не делает.

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 16 апреля 2019

Поскольку вы знаете общее количество элементов (сообщений в блоге), вы можете сделать несколько простых математических операций, чтобы узнать, какой будет последняя страница. 

const lastPage = Math.ceil(totalItems / perPage);

Так же, как вы проходите posts иtotalItems, я бы тоже прошел currentPage и lastPage.По сути, мы могли бы выполнить приведенную выше математику в шаблоне, но зачем это делать? 

res.render("home", {
    posts,
    currentPage,
    totalItems,
    lastPage
});
// The above notation is shorthand for prop: value

Теперь в шаблоне мы можем решить, показывать ли кнопку предыдущей и следующей страницы на основе переданных нами переменных.

Если currentPage больше 1, мы должны быть на второй странице или за ее пределами, поэтому покажите ссылку на текущую страницу ?page=<%= currentPage - 1 %>.

Если currentPage нижеlastPage, мы еще не достигли конца, поэтому мы показываем ссылку на следующую страницу.Это будет ?page=<%= currentPage + 1 %>

Нет необходимости использовать форму здесь.Достаточно простых тегов <a>.

...