Browse Source

New pagination UI

pull/6/head
Menci 8 years ago
parent
commit
9ed960b9fa
  1. 74
      views/page.ejs

74
views/page.ejs

@ -1,35 +1,45 @@
<% if (paginate.pageCnt) { %> <% if (paginate.pageCnt) { %>
<div class="ui center aligned grid"> <div style="text-align: center; ">
<div class="ui buttons"> <div class="ui pagination menu">
<a class="ui<% if (paginate.currPage === 1) { %> disabled<% } %> button" <% if (paginate.currPage !== 1) { %>href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: paginate.currPage - 1 })) %>" <% } %>id="page_prev"> <a class="<% if (paginate.currPage === 1) { %> disabled<% } %> icon item" <% if (paginate.currPage !== 1) { %>href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: paginate.currPage - 1 })) %>" <% } %>id="page_prev">
<i class="left chevron icon"></i> <i class="left chevron icon"></i>
</a> </a>
<% <%
let leftCnt = paginate.currPage - 1, rightCnt = paginate.pageCnt - paginate.currPage, omitLeft = leftCnt > 4, omitRight = rightCnt > 4; let leftCnt = paginate.currPage - 1, rightCnt = paginate.pageCnt - paginate.currPage, omitLeft, omitRight;
if (omitLeft) leftCnt = 3; if (leftCnt + rightCnt > 15) {
if (omitRight) rightCnt = 3; if (leftCnt < 7) {
if (omitLeft) { rightCnt = 14 - leftCnt;
%> omitRight = true;
<li><span>...</span></li> } else if (rightCnt < 7) {
<% leftCnt = 14 - rightCnt;
} omitLeft = true;
for (let i = paginate.currPage - leftCnt; i < paginate.currPage; i++) { %> } else {
<a class="ui button" href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: i })) %>"><%= i %></a> rightCnt = leftCnt = 7;
<% omitLeft = omitRight = true;
} }
%> }
<a class="ui primary button" href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: paginate.currPage })) %>"><%= paginate.currPage %></a> if (omitLeft) {
<% for (let i = paginate.currPage + 1; i <= paginate.currPage + rightCnt; i++) { %> %>
<a class="ui button" href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: i })) %>"><%= i %></a> <div class="disabled item">...</div>
<% <%
} }
if (omitRight) { for (let i = paginate.currPage - leftCnt; i < paginate.currPage; i++) { %>
%> <a class="item" href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: i })) %>"><%= i %></a>
<li><span>...</span></li> <%
<% } %> }
<a class="ui<% if (paginate.currPage === paginate.pageCnt) { %> disabled<% } %> button" <% if (paginate.currPage !== paginate.pageCnt) { %>href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: paginate.currPage + 1 })) %>" <% } %>id="page_next"> %>
<i class="right chevron icon"></i> <a class="active item" href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: paginate.currPage })) %>"><%= paginate.currPage %></a>
</a> <% for (let i = paginate.currPage + 1; i <= paginate.currPage + rightCnt; i++) { %>
</div> <a class="item" href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: i })) %>"><%= i %></a>
<%
}
if (omitRight) {
%>
<div class="disabled item">...</div>
<% } %>
<a class="<% if (paginate.currPage === paginate.pageCnt) { %> disabled<% } %> icon item" <% if (paginate.currPage !== paginate.pageCnt) { %>href="<%= syzoj.utils.makeUrl(req, Object.assign(req.query, { page: paginate.currPage + 1 })) %>" <% } %>id="page_next">
<i class="right chevron icon"></i>
</a>
</div>
</div> </div>
<% } %> <% } %>

Loading…
Cancel
Save