分页功能使用车把JS

问题描述：

DEMO分页功能使用车把JS

我'使用车把js和取出由JSON数据制定一个分页功能。

前5条结果将在页面加载时显示。
点击下一个分页后会显示另一组5个结果等等。
如果我通过显示页面中的每个5个结果来获得总数100。页码将为1的20.
如果分页的页数超过5，我想显示“1,2,3 ...最后一页（20）”，反之亦然
加载前一个按钮当下一个页面被点击时它应该被隐藏，它必须被启用。

请求你请看看这个，并给这个建议/建议。

应该有如下

欣赏你的帮助！

感谢

一些代码示例：

$(function() { 
     var opts = { 
     pageMax: 5, 
     postsDiv: $('#posts'), 
     dataUrl: "searchResult.json" 
    } 

    function range(i) { return i ? range(i - 1).concat(i) : [] } 

    function loadPosts(posts) { 
     opts.postsDiv.empty(); 
     posts.each(function() { 
      var source = $("#post-template").html(); 
      var template = Handlebars.compile(source); 
      var context = { 
       title: this.title, 
       desc: this.body, 
      }; 
      var html = template(context); 
      opts.postsDiv.append(html); 
     }); 
    } 

    function paginate(pageCount) { 
     var source = $("#pagination-template").html(); 
     var template = Handlebars.compile(source); 
     var context = { pages: range(pageCount) }; 
     var html = template(context); 
     opts.postsDiv.after(html); 

     function changePage(pageNumber) { 
      pageItems.removeClass('active'); 
      pageItems.filter('[data-page="' + pageNumber + '"]').addClass('active'); 
      loadPosts(data.slice(pageNumber * opts.pageMax - opts.pageMax, pageNumber * opts.pageMax)); 
     } 

     var pageItems = $('.pagination>li.pagination-page'); 

     pageItems.on('click', function() { 
      changePage(this.getAttribute('data-page')); 
     }).filter('[data-page="1"]').addClass('active'); 

     $('.pagination>li.pagination-prev').on('click', function() { 
      gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) - 1; 
      if (gotoPageNumber <= 0) { gotoPageNumber = pageCount; } 
      changePage(gotoPageNumber); 
     }); 

     $('.pagination>li.pagination-next').on('click', function() { 
      gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) + 1; 
      if (gotoPageNumber > pageCount) { gotoPageNumber = 1; } 
      changePage(gotoPageNumber); 
     }); 
    } 

    $.ajax({ 
     dataType: 'json', 
     url: opts.dataUrl, 
     success: function (response_json) { 
      data = $(response_json.records.page); 
      dataCount = data.length; 

      pageCount = Math.ceil(dataCount/opts.pageMax); 

      if (dataCount > opts.pageMax) { 
       paginate(pageCount); 
       posts = data.slice(0, opts.pageMax); 
      } else { 
       posts = data; 
      } 
      loadPosts(posts); 
     } 
    }); 
});

答

我不得不在几个月前，解决类似的问题。我发现了kottenator的this Gist。

您的范围功能因此被修改，其中c是当前页面，而m是您的pageCount。对函数的调用已被修改了一些，并且递归调用paginate(...)函数也被添加到导航后重新计算标签（同时，分支被添加到您的DOM附加函数调用中，修改分页标记，我使用了三元实现这一点可能更优雅）。
See this CodePen

function range(c,m) { 
    var current = c || 1, 
     last = m, 
     delta = 2, 
     left = current - delta, 
     right = parseInt(current) + delta + 1, 
     range = [], 
     rangeWithEllipsis = [], 
     l, 
     t; 

     range.push(1); 
     for (var i = c - delta ; i <= c + delta ; i++) { 
     if (i >= left && i < right && i < m && i > 1) { 
      range.push(i); 
     } 
     } 
     range.push(m); 

     for (var i of range) { 
     if (l) { 
      if (i - l === 2) { 
      t = l+1; 
      rangeWithEllipsis.push(t); 
      } else if (i - l !== 1) { 
      rangeWithEllipsis.push("..."); 
      } 
     } 
     rangeWithEllipsis.push(i); 
     l = i; 
     } 
    return rangeWithEllipsis; 
}

它不解决的话，每个说你的问题，但它确实正确分页。
如果我有一段时间，我会尝试按照你想要的方式进行分页（这实际上只是关于在算法中定制delta，left和right操作数，然后改变你的分页和分页prev事件处理程序调用）。

编辑我改变了算法找到left和right边界。你的index.html也修改了一下。
这个想法是通过5的倍数计算左右边界。然后创建一系列索引来显示和添加一个elipsis，如果差异太大。这应该有效地解决您的原始问题。

的JavaScript

getFirstDigits = (t) => { 
return parseInt(t.toString().slice(0,-1)) 
} 

getLastDigit = (t) => { 
return parseInt(t.toString().slice(-1)) 
} 

isMultipleOf5 = (t) => { 
return [0,5].reduce((res,curr)=>{ 
    return res = res || curr === getLastDigit(t); 
},false); 
} 

isBetween0and5 = (t) => { 
    const _t = getLastDigit(t); 
    return _t < 5; 
} 

isBetween5and9 = (t) => { 
    const _t = getLastDigit(t); 
    return _t => 5 && _t <= 9; 
} 

appendDigit = (t,d) => { 
    return parseInt(getFirstDigits(t).toString() + d.toString()) 
} 

getSecondRightMostDigit = (t) => { 
    return parseInt(t.toString().slice(-2,-1)) 
} 

incrementSecondDigit = (t) => { 
    return t+10; 
} 

getLeft = (t) => { 
    if(t>=10){ 
    if(isBetween0and5(t)) return appendDigit(t,0); 
    else return appendDigit(t,5); 
    } else { 
    if (t<5) return 0; 
    else return 5; 
    } 
} 

getRight = (t) => { 
    if(t<5) return 5; 
    else if (t<10) return 10; 
    else if(isBetween0and5(t)) return appendDigit(t,5) 
    else return appendDigit(incrementSecondDigit(t),0); 
} 

function range(c,m) { 
    var current = c || 1, 
     last = m, 
     delta = 2, 
     left = getLeft(c), 
     right = getRight(c), 
     range = [], 
     rangeWithEllipsis = [], 
     l, 
     t; 

     var rightBoundary = right < 5 ? 5 : right; 
     for (var i = left ; i < rightBoundary ; ++i) { 
     if(i < m && i > 0) range.push(i); 
     } 
     range.push(m); 

     for (var i of range) { 
     if (l) { 
      if (i - l === 2) { 
      t = l+1; 
      rangeWithEllipsis.push(t); 
      } else if (i - l !== 1){ 
      rangeWithEllipsis.push("..."); 
      } 
     } 
     rangeWithEllipsis.push(i); 
     l = i; 
     } 
    return rangeWithEllipsis; 
}

HTML /车把

<!doctype html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Handlebars Pagination</title> 
    <link href="main.css" rel="stylesheet" /> 
    <script src="jquery.min.js"></script> 
    <script src="handlebars.min.js"></script> 
    <script src="functions.js"></script> 
</head> 

<body class="container"> 

    <div id="posts"></div> 

    <script id="pagination-template" type="text/x-handlebars-template"> 
     <ul class="pagination"> 
      <li class="pagination-prev"><a href="#">&laquo;</a></li> 

      {{#each pages}} 
      <li class="pagination-page" data-page="{{this}}"><a href="#">{{this}}</a></li> 
      {{/each}} 

      <li class="pagination-next"><a href="#">&raquo;</a></li> 
     </ul> 
    </script> 


    <script id="post-template" type="text/x-handlebars-template"> 
     <div class="score-structural score-column2-wideright search-listings post"> 
      <div class="score-right"> 
       <h4>{{record_count}}</h4> 
       <h5 style="z-index: 1;"> 
        <a href="#"> {{ title }} </a> 
       </h5> 
       <p style="z-index: 1;"> {{ desc }} </p> 
      </div> 
     </div> 
     <hr> 
    </script> 

</body> 

</html> 

<script> 
    $(function() { 
     var opts = { 
      pageMax: 2, 
      postsDiv: $('#posts'), 
      dataUrl: "searchResult.json" 
     } 

     function loadPosts(posts) { 
      opts.postsDiv.empty(); 
      posts.each(function() { 
       var source = $("#post-template").html(); 
       var template = Handlebars.compile(source); 
       var context = { 
        title: this.title, 
        desc: this.body, 
       }; 
       var html = template(context); 
       opts.postsDiv.append(html); 
      }); 
      hidePrev(); 
     } 

     function hidePrev() { $('.pagination .pagination-prev').hide(); } 
     function showPrev() { $('.pagination .pagination-prev').show(); } 

     function hideNext() { $('.pagination .pagination-next').hide(); } 
     function showNext() { $('.pagination .pagination-next').show(); } 

     function paginate(page,pageCount) { 
      var source = $("#pagination-template").html(); 
      var template = Handlebars.compile(source); 
      var context = { pages: range(page,pageCount) }; 
      console.log(range(page,pageCount)); 
      var html = template(context); 
      var paginationTag = opts.postsDiv.parent().find(".pagination"); 
      paginationTag.length > 0 ? paginationTag.replaceWith(html) : opts.postsDiv.before(html); 

      function changePage(page) { 
       pageItems.removeClass('active'); 
       pageItems.filter('[data-page="' + page + '"]').addClass('active'); 
       loadPosts(data.slice(page * opts.pageMax - opts.pageMax, page * opts.pageMax)); 
       paginate(page,pageCount); 
       if (gotoPageNumber <= 1) { 
        hidePrev(); 
       } 
      } 

      var pageItems = $('.pagination>li.pagination-page'); 
      var pageItemsLastPage = $('.pagination li').length - 2; 
      pageItems.removeClass('active'); 
      pageItems.filter('[data-page="' + page + '"]').addClass('active'); 

      pageItems.on('click', function() { 
       getDataPageNo = this.getAttribute('data-page') 
       console.log(getDataPageNo) 
       changePage(getDataPageNo); 
       if (getDataPageNo == 1) { 
        hidePrev() 
       } 
       else if (getDataPageNo == pageItemsLastPage) { 
        hideNext(); 
       } 
       else { 
        showPrev(); 
        showNext(); 
       } 
      }); 

      $('.pagination>li.pagination-prev').on('click', function() { 
       gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) - 1; 
       changePage(gotoPageNumber); 
      }); 

      $('.pagination>li.pagination-next').on('click', function() { 
       gotoPageNumber = parseInt($('.pagination>li.active').attr('data-page')) + 1; 
       if (gotoPageNumber > pageCount) { 
        gotoPageNumber = 1; 
        showPrev(); 
       } 
       changePage(gotoPageNumber); 
      }); 
     } 

     $.ajax({ 
      dataType: 'json', 
      url: opts.dataUrl, 
      success: function (response_json) { 
       data = $(response_json.records.page); 
       dataCount = data.length; 

       pageCount = Math.ceil(dataCount/opts.pageMax); 

       if (dataCount > opts.pageMax) { 
        paginate(1,pageCount); 
        posts = data.slice(0, opts.pageMax); 
       } else { 
        posts = data; 
       } 
       loadPosts(posts); 
      } 
     }); 

    }); 

</script>

再次检查codepen。我用es6，你可能必须为你的项目转换这些箭头函数。 –

错误404 - 无法加载文件内容。你有没有发表？在私人窗口尝试一次 –

我可以从私人窗口访问它。 –

分页功能使用车把JS

相关推荐