Question

我正在使用把手js开发分页功能并从JSON获取数据。

前5页结果将显示在页面加载上。
点击下一个分页时，将显示另外一组5个结果，依此类推。
如果我通过在页面中显示每个5个结果来获得结果总数100。页码将是20个中的一个。
如果分页的页数超过5个，我想显示＆＃34; 1,2,3 ......最后一页编号（20）＆＃34;反之亦然
on load Previous Button当点击下一页时必须隐藏它必须被启用。

请求您查看此内容并就此提出一些建议/建议。

应该如下

感谢您的帮助！

谢谢

一些代码示例：

    $(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);
        }
    });
});

Answer 1

几个月前我不得不解决类似的问题。我从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的倍数计算左右边界。然后，如果差异太大，则创建一系列索引以显示并添加省略号。这应该有效地解决了你原来的问题。

<强>的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>

使用把手js的分页功能

1 个答案: