.ejs模板中的Bootstrap分頁

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> 

我我不是一個HTML人。這裏是我的問題：

1：href ?page=n如何工作？ ?是做什麼用的？我假設有一些邏輯指示瀏覽器顯示新頁面，但我不確定它在哪裏。

2：是否有添加省略號或其他截斷分頁的好方法？我想我可以展示10頁，並用單頁推進器來書寫它，並用一些東西來顯示下一頁/前十頁。我不完全確定如何做到這一點。瞭解href如何工作會有所幫助。

謝謝！

Answer 1

Paginate圖書館承擔了實際實施分頁的繁重負擔。您只需計算三個變量：合計項目數，每頁項目數和當前頁碼。

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現在包含bootstrap的分頁HTML。簡單地把它作爲參數EJS模板，並使其：

<%- paginationHtml %> 

這一個班輪會給你以下幾點：

您可以通過修改用於分頁的引導程序類來改變樣式（如示例屏幕截圖所示）。