.ejsテンプレート内のブートストラップページング

Question

私はいくつかの簡単な管理インターフェースを持つノードプロジェクトを持っています。私は「

<nav> 
<div class="text-center"> 
    <ul class="pagination pagination-sm"> 
     <li 
       <% if(page <= 0) { %> 
       class="disabled" 
       <% } %> 
     ><a href="?page=<%= page <= 0 ? 0 : page - 1 %>">&laquo;</a></li> 
     <% for(var i = 0; i < pages; i++) { %> 
     <li 
       <% if(page == i) { %> 
       class="active" 
       <% } %> 
     ><a href="?page=<%= i %>"><%= i + 1 %></a></li> 
     <% } %> 
     <li <% if(page > pages - 1) { %>class="disabled" 
       <% } %> 
     ><a href="?page=<%= page > pages - 1 ? parseInt(pages) : 1 + parseInt(page) %>">&raquo;</a></li> 
    </ul> 
</div> 

：一つのページには、ユーザーのリストを示し、コードのITは、ブートストラップページネータとページ分割だと数千人のユーザーをありますとき、改ページはここ

のように見えますhtmlの人ではありません。ここに私の質問があります：

1：href ?page=nはどのように機能しますか？ ?とは何ですか？私は、新しいページを表示するようにブラウザに指示するロジックがあると仮定していますが、わかりません。

2：省略記号や切り捨てられたページネーションを追加する良い方法はありますか？私は10ページを表示し、単一のページのアドバンテージでそれをブックエンドし、次/前の10ページを表示するものをブックエンドすることができると思います。私はそれをどうやって起こすかについて完全にはわかっていません。 hrefの仕組みを理解することが役に立ちます。

ありがとうございます！

Answer 1

Paginateライブラリーは実際にページ分割を実装する際の負担が最もかかります。総計項目数、1ページあたりの項目数、および現在のページ数という3つの変数を計算するだけで済みます。

var totalItems, itemsPerPage, pageNum; 
// calculate the data for above variables and pass them in below method 

var pagination = paginate.page(totalItems, itemsPerPage, pageNum); 
var paginationHtml = pagination.render({ baseUrl: '/' }); //the link to pass to href, page number will be added as query paramtere to it e.g. /?page=6 

paginationHtmlには、ブートストラップのページングHTMLが含まれています。単にEJSテンプレートにパラメータとして渡して、それをレンダリング：

<%- paginationHtml %> 

この1つのライナーはあなたに以下を与える：

スタイリングを変更するには、ページショット用のブートストラップクラスを変更します（例のスクリーンショットのように）。