如何使用 jQuery 缩短表格分页答案

【问题标题】：How to shorten a table pagination with jQuery如何使用 jQuery 缩短表格分页
【发布时间】：2016-10-13 11:35:04
【问题描述】：

我正在开发一个 jQuery 表格分页。这个想法是在表格有很多行时显示分页。

我已设法显示所有分页链接，包括上一个和下一个链接，但我还希望 ellipsis(...) 显示并缩短分页链接，如下所示。

这里有一个简单的例子来说明清楚。这就是我现在拥有的：

页数：1 2 3 4 [5] 6 7 8 9 10 11

这就是我想要实现的目标：

页数：... 4 [5] 6 ...

PS：代码应该使用引导样式。请帮忙。

代码：

$.fn.pageMe = function(opts){
    var $this = this,
        defaults = {
            perPage: 7,
            showPrevNext: false,
            hidePageNumbers: false
        },
        settings = $.extend(defaults, opts);

    var listElement = $this;
    var perPage = settings.perPage;
    var children = listElement.children();
    var pager = $('.pager');

    if (typeof settings.childSelector!="undefined") {
        children = listElement.find(settings.childSelector);
    }

    if (typeof settings.pagerSelector!="undefined") {
        pager = $(settings.pagerSelector);
    }

    var numItems = children.size();
    var numPages = Math.ceil(numItems/perPage);

    pager.data("curr",0);

    if (settings.showPrevNext){
        $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
    }
      
    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false)){
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
        curr++;

    }
      
    if (settings.showPrevNext){
        $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
    }

    pager.find('.page_link:first').addClass('active');
    pager.find('.prev_link').hide();
    if (numPages<=1) {
        pager.find('.next_link').hide();
    }
      pager.children().eq(1).addClass("active");

    children.hide();
    children.slice(0, perPage).show();

    pager.find('li .page_link').click(function(){
        var clickedPage = $(this).html().valueOf()-1;
        goTo(clickedPage,perPage);
        return false;
    });
    pager.find('li .prev_link').click(function(){
        previous();
        return false;
    });
    pager.find('li .next_link').click(function(){
        next();
        return false;
    });

    function previous(){
        var goToPage = parseInt(pager.data("curr")) - 1;
        goTo(goToPage);
    }

    function next(){
        goToPage = parseInt(pager.data("curr")) + 1;
        goTo(goToPage);
    }

    function goTo(page){
        var startAt = page * perPage,
            endOn = startAt + perPage;

        children.css('display','none').slice(startAt, endOn).show();

        if (page>=1) {
            pager.find('.prev_link').show();
        }
        else {
            pager.find('.prev_link').hide();
        }

        if (page<(numPages-1)) {
            pager.find('.next_link').show();
        }
        else {
            pager.find('.next_link').hide();
        }

        pager.data("curr",page);
      	pager.children().removeClass("active");
        pager.children().eq(page+1).addClass("active");

    }
};

$(document).ready(function(){

  $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});

});

<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/1.4.0/assets/css/bootstrap.css">
<div class="container">
    <div class="row">
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>Table heading</th>
              <th>Table heading</th>

            </tr>
          </thead>
          <tbody id="myTable">
            <tr>
              <td>1</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>2</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>3</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>4</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr class="success">
              <td>5</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>6</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>7</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
             <tr>
              <td>8</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>9</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>10</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>11</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>12</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>13</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>14</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>15</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>16</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>17</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>18</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>19</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>20</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>
            <tr>
              <td>21</td>
              <td>Table cell</td>
              <td>Table cell</td>

            </tr>

          </tbody>
        </table>
      </div>
      <div class="col-md-12 text-center">
      <ul class="pagination pagination-lg pager" id="myPager"></ul>
      </div>
	</div>
</div>

我尝试修改这个函数但没有结果

    var curr = 0;
    while(numPages > curr && (settings.hidePageNumbers==false)){
        $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
        curr++;

    }

【问题讨论】：

分页对你有用吗？因为在var numItems = children.size(); 中没有称为size() 的函数，所以应该是var numItems = children.length;
@NikhilNanjappa 问题不在分页中，它的工作没有任何问题。 ||数量上的问题（分页）他们给了我所有的页面，但我想从Pages : 1 - 2 - 3 - [4] - 5 - 6 - 7 - 8 缩短它就像这样Pages : ... - 3 - [4] - 5 ... ，一个小例子
你正在努力..
@NikhilNanjappa 谢谢，因为我尝试了很多来找到结果，但没有任何结果
@NikhilNanjappa 任何解决方案？我试图修复它一整天都没有结果

标签： javascript jquery html twitter-bootstrap pagination

【解决方案1】：

我已经按照你的要求显示了省略号。但是，目前它仅在您单击任何一个分页链接时才有效。一旦你知道了这个想法，你就可以很容易地在点击之前显示省略号。我把这一步留给你，然后直接简要介绍我所做的事情。

在以下代码中搜索注释// Added class and id in li start 以查看第一次更改。评论中清楚地提到了它的作用。它添加了 id 和 class 以供将来参考。
在下面的代码中搜索注释// Added few lines from here start 可以看到一些额外的代码。首先，我们隐藏除上一个和下一个链接之外的所有 li，并删除省略号（如果存在），其次我们显示三个分页链接，第三我们检查是否只显示两个链接而不是三个，并确保显示其中三个，最后我们显示省略号如果页面超过三个。

更新：

我已更新代码以使用 bootstrap css，并为您使用省略号开头。希望您满意。

$.fn.pageMe = function(opts) {
  var $this = this,
    defaults = {
      perPage: 7,
      showPrevNext: false,
      hidePageNumbers: false
    },
    settings = $.extend(defaults, opts);

  var listElement = $this;
  var perPage = settings.perPage;
  var children = listElement.children();
  var pager = $('.pager');

  if (typeof settings.childSelector != "undefined") {
    children = listElement.find(settings.childSelector);
  }

  if (typeof settings.pagerSelector != "undefined") {
    pager = $(settings.pagerSelector);
  }

  var numItems = children.size();
  var numPages = Math.ceil(numItems / perPage);

  pager.data("curr", 0);

  if (settings.showPrevNext) {
    $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
  }

  var curr = 0;
  // Added class and id in li start
  while (numPages > curr && (settings.hidePageNumbers == false)) {
    $('<li id="pg' + (curr + 1) + '" class="pg"><a href="#" class="page_link">' + (curr + 1) + '</a></li>').appendTo(pager);
    curr++;
  }
  // Added class and id in li end

  if (settings.showPrevNext) {
    $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
  }

  pager.find('.page_link:first').addClass('active');
  pager.find('.prev_link').hide();
  if (numPages <= 1) {
    pager.find('.next_link').hide();
  }
  pager.children().eq(1).addClass("active");

  children.hide();
  children.slice(0, perPage).show();
  if (numPages > 3) {
    $('.pg').hide();
    $('#pg1,#pg2,#pg3').show();
    $("#pg3").after($("<li class='ell'>").html("<span>...</span>"));
  }

  pager.find('li .page_link').click(function() {
    var clickedPage = $(this).html().valueOf() - 1;
    goTo(clickedPage, perPage);
    return false;
  });
  pager.find('li .prev_link').click(function() {
    previous();
    return false;
  });
  pager.find('li .next_link').click(function() {
    next();
    return false;
  });

  function previous() {
    var goToPage = parseInt(pager.data("curr")) - 1;
    goTo(goToPage);
  }

  function next() {
    goToPage = parseInt(pager.data("curr")) + 1;
    goTo(goToPage);
  }

  function goTo(page) {
    var startAt = page * perPage,
      endOn = startAt + perPage;

    // Added few lines from here start

    $('.pg').hide();
    $(".ell").remove();
    var prevpg = $("#pg" + page).show();
    var currpg = $("#pg" + (page + 1)).show();
    var nextpg = $("#pg" + (page + 2)).show();
    if (prevpg.length == 0) nextpg = $("#pg" + (page + 3)).show();
    if (prevpg.length == 1 && nextpg.length == 0) {
      prevpg = $("#pg" + (page - 1)).show();
    }
    if (curr > 3) {
      if (page > 1) prevpg.before($("<li class='ell'>").html("<span>...</span>"));
      if (page < curr - 2) nextpg.after($("<li class='ell'>").html("<span>...</span>"));
    }
    currpg.addClass("active").siblings().removeClass("active");
    // Added few lines till here end


    children.css('display', 'none').slice(startAt, endOn).show();

    if (page >= 1) {
      pager.find('.prev_link').show();
    } else {
      pager.find('.prev_link').hide();
    }

    if (page < (numPages - 1)) {
      pager.find('.next_link').show();
    } else {
      pager.find('.next_link').hide();
    }

    pager.data("curr", page);
    /*pager.children().removeClass("active");
    pager.children().eq(page + 1).addClass("active");*/

  }
};

$(document).ready(function() {

  $('#myTable').pageMe({
    pagerSelector: '#myPager',
    showPrevNext: true,
    hidePageNumbers: false,
    perPage: 4
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="table-responsive">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>

          </tr>
        </thead>
        <tbody id="myTable">
          <tr>
            <td>1</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>2</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>3</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>4</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr class="success">
            <td>5</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>6</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>7</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>8</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>9</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>10</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>11</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>12</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>13</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>14</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>15</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>16</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>17</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>18</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>19</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>20</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>
          <tr>
            <td>21</td>
            <td>Table cell</td>
            <td>Table cell</td>

          </tr>

        </tbody>
      </table>
    </div>
    <div class="col-md-12 text-center">
      <ul class="pagination pagination-lg pager" id="myPager"></ul>
    </div>
  </div>
</div>

【讨论】：

如果您点击一个页面（例如 5），则有一个小问题，第 4 个页面被选中
还是引导程序造成问题？
第二个问题是从6页开始的，如果你点击任何一页，它们就会变成1 - 2 - 3 ... >>
那是因为我不知道您正在为引导程序编写代码。您可以尝试运行代码并查看结果。
如果我在没有引导程序的情况下尝试代码，只有一个问题是在第一个显示所有页面中，您需要点击查看<< .. 2 - [3] - [4] .. >>

【解决方案2】：

我认为您的来源是工作！但也许，你忘了设置插件：

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/1.4.0/assets/css/bootstrap.css">

【讨论】：

是的，它的工作，但显示所有页面，所以想缩短一点
这个答案没有尝试回答 OP。 OP 期望三个分页链接后有省略号，并在不同页面上进行相应调整。