jQuery分页插件未突出显示第一页

时间：2019-05-09 10:24:44

标签： javascript jquery pagination

在来自this插件的jQuery代码中，有一个名为activepage的选项，我认为该选项应该突出显示通过添加CSS类.selected-page给出的首页/活动页面。但这不会发生，仅在单击时点亮。

执行此脚本后如何使首页亮起？ 

(function($) {
  $(function() {
    $.widget("zpd.paging", {
      options: {
        limit: 5,
        rowDisplayStyle: 'block',
        activePage: 0,
        rows: []
      },
      _create: function() {
        var rows = $("tbody", this.element).children();
        this.options.rows = rows;
        this.options.rowDisplayStyle = rows.css('display');
        var nav = this._getNavBar();
        this.element.after(nav);
        this.showPage(0);
      },
      _getNavBar: function() {
        var rows = this.options.rows;
        var nav = $('<div>', {
          class: 'paging-nav'
        });
        for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
          this._on($('<a>', {
            href: '#',
            text: (i + 1),
            "data-page": (i)
          }).appendTo(nav), {
            click: "pageClickHandler"
          });
        }
        //create previous link
        this._on($('<a>', {
          href: '#',
          text: '<<',
          "data-direction": -1
        }).prependTo(nav), {
          click: "pageStepHandler"
        });
        //create next link
        this._on($('<a>', {
          href: '#',
          text: '>>',
          "data-direction": +1
        }).appendTo(nav), {
          click: "pageStepHandler"
        });
        return nav;
      },
      showPage: function(pageNum) {
        var num = pageNum * 1; //it has to be numeric
        this.options.activePage = num;
        var rows = this.options.rows;
        var limit = this.options.limit;
        for (var i = 0; i < rows.length; i++) {
          if (i >= limit * num && i < limit * (num + 1)) {
            $(rows[i]).css('display', this.options.rowDisplayStyle);
          } else {
            $(rows[i]).css('display', 'none');
          }
        }
      },
      pageClickHandler: function(event) {
        event.preventDefault();
        $(event.target).siblings().attr('class', "");
        $(event.target).attr('class', "selected-page");
        var pageNum = $(event.target).attr('data-page');
        this.showPage(pageNum);
      },
      pageStepHandler: function(event) {
        event.preventDefault();
        //get the direction and ensure it's numeric
        var dir = $(event.target).attr('data-direction') * 1;
        var pageNum = this.options.activePage + dir;
        //if we're in limit, trigger the requested pages link
        if (pageNum >= 0 && pageNum < this.options.rows.length) {
          $("a[data-page=" + pageNum + "]", $(event.target).parent()).click();
        }
      }
    });
  });
})(jQuery);



$(document).ready(function() {

  $('#tableData').paging({
    limit: 3,
    activePage: 1
  });

})
.paging-nav {
  text-align: left;
  padding-top: 2px;
}

.paging-nav a {
  margin: auto 1px;
  text-decoration: none;
  display: inline-block;
  padding: 1px 7px;
  background: #000;
  color: #abdae2;
  border-radius: 3px;
}

.paging-nav .selected-page {
  background: #abdae2;
  font-weight: bold;
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">
</script>


<table id="tableData" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>id</th>
      <th>first name</th>
      <th>surname</th>
      <th>number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Frank</td>
      <td>Shoulder</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Jameson</td>
      <td>4564</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Philip</td>
      <td>Jenkins</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Maria</td>
      <td>Carlston</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Julia</td>
      <td>Tampelton</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Jane</td>
      <td>Conor</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Susan</td>
      <td>Crane</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Lucas</td>
      <td>Fenric</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Mark</td>
      <td>Fenric</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Hilde</td>
      <td>Mayer</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>10</td>
      <td>John</td>
      <td>Tron</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Hans</td>
      <td>Stark</td>
      <td>4564</td>
    </tr>
  </tbody>
</table>

2 个答案:

答案 0 :(得分：3)

我根据活动页面添加了课程。请检查activePage 

(function($) {
  $(function() {
    $.widget("zpd.paging", {
      options: {
        limit: 5,
        rowDisplayStyle: 'block',
        activePage: 1,
        rows: []
      },
      _create: function() {
        var rows = $("tbody", this.element).children();
        this.options.rows = rows;
        this.options.rowDisplayStyle = rows.css('display');
        var nav = this._getNavBar();
        this.element.after(nav);
        this.showPage(0);
      },
      _getNavBar: function() {
        var rows = this.options.rows;
        var nav = $('<div>', {
          class: 'paging-nav'
        });
        for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
          this._on($('<a>', {
            href: '#',
            text: (i + 1),
            "data-page": (i),
            "class": this.options.activePage && i == (this.options.activePage - 1) ? "selected-page":""
          }).appendTo(nav), {
            click: "pageClickHandler"
          });
        }
        //create previous link
        this._on($('<a>', {
          href: '#',
          text: '<<',
          "data-direction": -1
        }).prependTo(nav), {
          click: "pageStepHandler"
        });
        //create next link
        this._on($('<a>', {
          href: '#',
          text: '>>',
          "data-direction": +1
        }).appendTo(nav), {
          click: "pageStepHandler"
        });
        return nav;
      },
      showPage: function(pageNum) {
        var num = pageNum * 1; //it has to be numeric
        this.options.activePage = num;
        var rows = this.options.rows;
        var limit = this.options.limit;
        for (var i = 0; i < rows.length; i++) {
          if (i >= limit * num && i < limit * (num + 1)) {
            $(rows[i]).css('display', this.options.rowDisplayStyle);
          } else {
            $(rows[i]).css('display', 'none');
          }
        }
      },
      pageClickHandler: function(event) {
        event.preventDefault();
        $(event.target).siblings().attr('class', "");
        $(event.target).attr('class', "selected-page");
        var pageNum = $(event.target).attr('data-page');
        this.showPage(pageNum);
      },
      pageStepHandler: function(event) {
        event.preventDefault();
        //get the direction and ensure it's numeric
        var dir = $(event.target).attr('data-direction') * 1;
        var pageNum = this.options.activePage + dir;
        //if we're in limit, trigger the requested pages link
        if (pageNum >= 0 && pageNum < this.options.rows.length) {
          $("a[data-page=" + pageNum + "]", $(event.target).parent()).click();
        }
      }
    });
  });
})(jQuery);



$(document).ready(function() {

  $('#tableData').paging({
    limit: 3,
    activePage: 1
  });

})
.paging-nav {
  text-align: left;
  padding-top: 2px;
}

.paging-nav a {
  margin: auto 1px;
  text-decoration: none;
  display: inline-block;
  padding: 1px 7px;
  background: #000;
  color: #abdae2;
  border-radius: 3px;
}

.paging-nav .selected-page {
  background: #abdae2;
  font-weight: bold;
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">
</script>


<table id="tableData" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>id</th>
      <th>first name</th>
      <th>surname</th>
      <th>number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Frank</td>
      <td>Shoulder</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Jameson</td>
      <td>4564</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Philip</td>
      <td>Jenkins</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Maria</td>
      <td>Carlston</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Julia</td>
      <td>Tampelton</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Jane</td>
      <td>Conor</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Susan</td>
      <td>Crane</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Lucas</td>
      <td>Fenric</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Mark</td>
      <td>Fenric</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Hilde</td>
      <td>Mayer</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>10</td>
      <td>John</td>
      <td>Tron</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Hans</td>
      <td>Stark</td>
      <td>4564</td>
    </tr>
  </tbody>
</table>

答案 1 :(得分：1)

您可以添加如下所示的类：

$('.paging-nav a[data-page="0"]').addClass('selected-page');

初始化插件（分页）后。

(function($) {
  $(function() {
    $.widget("zpd.paging", {
      options: {
        limit: 5,
        rowDisplayStyle: 'block',
        activePage: 0,
        rows: []
      },
      _create: function() {
        var rows = $("tbody", this.element).children();
        this.options.rows = rows;
        this.options.rowDisplayStyle = rows.css('display');
        var nav = this._getNavBar();
        this.element.after(nav);
        this.showPage(0);
      },
      _getNavBar: function() {
        var rows = this.options.rows;
        var nav = $('<div>', {
          class: 'paging-nav'
        });
        for (var i = 0; i < Math.ceil(rows.length / this.options.limit); i++) {
          this._on($('<a>', {
            href: '#',
            text: (i + 1),
            "data-page": (i)
          }).appendTo(nav), {
            click: "pageClickHandler"
          });
        }
        //create previous link
        this._on($('<a>', {
          href: '#',
          text: '<<',
          "data-direction": -1
        }).prependTo(nav), {
          click: "pageStepHandler"
        });
        //create next link
        this._on($('<a>', {
          href: '#',
          text: '>>',
          "data-direction": +1
        }).appendTo(nav), {
          click: "pageStepHandler"
        });
        return nav;
      },
      showPage: function(pageNum) {
        var num = pageNum * 1; //it has to be numeric
        this.options.activePage = num;
        var rows = this.options.rows;
        var limit = this.options.limit;
        for (var i = 0; i < rows.length; i++) {
          if (i >= limit * num && i < limit * (num + 1)) {
            $(rows[i]).css('display', this.options.rowDisplayStyle);
          } else {
            $(rows[i]).css('display', 'none');
          }
        }
      },
      pageClickHandler: function(event) {
        event.preventDefault();
        $(event.target).siblings().attr('class', "");
        $(event.target).attr('class', "selected-page");
        var pageNum = $(event.target).attr('data-page');
        this.showPage(pageNum);
      },
      pageStepHandler: function(event) {
        event.preventDefault();
        //get the direction and ensure it's numeric
        var dir = $(event.target).attr('data-direction') * 1;
        var pageNum = this.options.activePage + dir;
        //if we're in limit, trigger the requested pages link
        if (pageNum >= 0 && pageNum < this.options.rows.length) {
          $("a[data-page=" + pageNum + "]", $(event.target).parent()).click();
        }
      }
    });
  });
})(jQuery);



$(document).ready(function() {

  $('#tableData').paging({
    limit: 3,
    activePage: 1
  });
$('.paging-nav a[data-page="0"]').addClass('selected-page');
})
.paging-nav {
  text-align: left;
  padding-top: 2px;
}

.paging-nav a {
  margin: auto 1px;
  text-decoration: none;
  display: inline-block;
  padding: 1px 7px;
  background: #000;
  color: #abdae2;
  border-radius: 3px;
}

.paging-nav .selected-page {
  background: #abdae2;
  font-weight: bold;
  color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">
</script>


<table id="tableData" class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>id</th>
      <th>first name</th>
      <th>surname</th>
      <th>number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Frank</td>
      <td>Shoulder</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>2</td>
      <td>John</td>
      <td>Jameson</td>
      <td>4564</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Philip</td>
      <td>Jenkins</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Maria</td>
      <td>Carlston</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Julia</td>
      <td>Tampelton</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Jane</td>
      <td>Conor</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Susan</td>
      <td>Crane</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Lucas</td>
      <td>Fenric</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Mark</td>
      <td>Fenric</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Hilde</td>
      <td>Mayer</td>
      <td>4456</td>
    </tr>
    <tr>
      <td>10</td>
      <td>John</td>
      <td>Tron</td>
      <td>1246</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Hans</td>
      <td>Stark</td>
      <td>4564</td>
    </tr>
  </tbody>
</table>

相关问题
最新问题