在没有jquery插件的情况下构建自定义分页逻辑

Question

我坚持如何继续我的自定义分页。在示例中，我没有内容部分，但我知道如何做到这一点，只需隐藏并显示所点击的索引。

我坚持如何将元素拆分并处理成更好的用户体验，就像这样

http://jsbin.com/qulipamecu/1/edit?html,css,js,output

var html = '';
for(var i in item){
    html += '<li>' + item[i] + '</li>';
  }

Answer 1

要分割用于分页的UI并不是那么难，这取决于你想要的复杂程度

作为一个例子，我在没有jQuery帮助的情况下重新实现了jsbin中的代码，并添加了一个名为isPageInRange的函数，该函数将检查您的页面当前是否在范围内，并返回true或false为了它。

所以主要的逻辑变化如下：

for(var i in item){
  if ( isPageInRange( curPage, i, pageLen, 2, 2 ) ) {
    html += '<li data-page="' + i + '">' + item[i] + '</li>';
    // as we added a page, we reset the separatorAdded
    separatorAdded = false;
  } else {
    if (!separatorAdded) {
      // only add a separator when it wasn't added before
      html += '<li class="separator" />';
      separatorAdded = true;
    }
  }
}

如果页面不在范围内，您只需添加一个分隔符（当尚未添加时 - >您不希望多个分隔符彼此相邻）

该样本假定：

• 您希望前两页始终可见
• 您希望最后2页始终可见
• 您想要配置当前页面处于活动状态之前和之后的页数

对于其他人，我做了一些小改动，例如：

• （活动）选择基于数据页属性
• 可以点击完整div（并且只在第一次添加点击处理程序）
• 在页面更改时重新呈现完整div

＆＃13;

＆＃13;

var pageLen = 20;
var curPage = 2;
var item = [];
for(var i = 1; i<=pageLen;i++){
   item.push(i);
}

function isPageInRange( curPage, index, maxPages, pageBefore, pageAfter ) {
  if (index <= 1) {
    // first 2 pages
    return true;
  }
  if (index >= maxPages - 2) {
    // last 2 pages
    return true;
  }
  if (index >= curPage - pageBefore && index <= curPage + pageAfter) {
    return true;
  }
}

function render( curPage, item, first ) {
  var html = '', separatorAdded = false;
  for(var i in item){
    if ( isPageInRange( curPage, i, pageLen, 2, 2 ) ) {
      html += '<li data-page="' + i + '">' + item[i] + '</li>';
      // as we added a page, we reset the separatorAdded
      separatorAdded = false;
    } else {
      if (!separatorAdded) {
        // only add a separator when it wasn't added before
        html += '<li class="separator" />';
        separatorAdded = true;
      }
    }
  }
  
  var holder = document.querySelector('#holder');  
  holder.innerHTML = html;
  document.querySelector('#holder>li[data-page="' + curPage + '"]').classList.add('active');
  if ( first ) {
    holder.addEventListener('click', function(e) {
      if (!e.target.getAttribute('data-page')) {
        // no relevant item clicked (you could however offer expand here )
        return;
      }
      curPage = parseInt( e.target.getAttribute('data-page') );
      render( curPage, item );
    });
  }
}

render( 2, item, true );

＆＃13;

#holder > li {
  padding: 5px;
  margin: 2px;
  display: inline-block;
}
#holder > li[data-page] {
  border: solid #a0a0a0 1px;
  border-radius: 5px;
}
#holder > li.separator:before {
  content: '...';
}
#holder > li.active {
  background-color: darkblue;
  color: #fff;
}
#holder > li[data-page]:hover {
  cursor: pointer;
}

＆＃13;

<div id="holder"></div>

＆＃13;

＆＃13;

＆＃13;