Как показать нумерацию страниц с данными со стороны клиента [Nodejs / Express] - PullRequest
Новая
       10

Как показать нумерацию страниц с данными со стороны клиента [Nodejs / Express]

0 голосов
/ 11 января 2020

Я хотел бы сделать нумерацию страниц на одной index странице веб-сайта, и вот ситуация.

Страница отображается по умолчанию на странице 1.

Получил projectsApi.last_page с сервера, затем используйте его в al oop, чтобы было показано, сколько страниц до go.

Допустим, я щелкаю страницу 2 нумерации страниц на странице index, затем число '2 'следует отправлять на сервер в качестве параметра URL-адреса API, и этот URL-адрес должен отображаться на странице index, поэтому должна отображаться страница 2.

Страница 1 '/projects' + apiKey + '&per_page=18';

Страница 2 '/projects' + apiKey + '&page=2&per_page=18';

Страница 3 '/projects' + apiKey + '&page=3&per_page=18';

Project API 

{ 
   "total":2000,
   "per_page":18,
   "last_page":1306,
   "page":1,
   "projects":[ 
      { 
        "id":123,
        "user_id":435400,
        "name":"Project Name"
      },
      ...
   ]
}

сервер. js

app.get('/', function (req, res) {

      var url_project = '/projects' + apiKey + '&per_page=18';
      var url_user = '/users' + apiKey;

      Promise
        .all([rp({uri: url_project, json:true}), rp({uri: url_user, json:true})])
        .then(([projectsApi, usersApi]) => {
            res.render('index', {projectsApi, usersApi});
        }).catch(err => {
            console.log(err);
            res.sendStatus(500);
        });

});

index.e js

        <% for (var i = 0; i < (projectsApi.projects).length; i++) { %>
            <div>
                <img src="<%= (projectsApi.projects[i]).image_url %>" />
                <div><%= (projectsApi.projects[i]).name %></div>
            </div>
        <% } %>

    <div>
        <% for (var i = 1; i <= projectsApi.last_page; i++) { %>
            <a href="#"><span><%= i %>&nbsp;</span></a>
        <% } %>
    </div>

В этом коде показаны проекты со страницы 1, поскольку он отображается с указанным ниже URL:

'/projects' + apiKey + '&per_page=18';.

Попытка сделать этот веб-сайт примерно таким: https://hackaday.io/projects

...