在引导分页中突出显示页码

时间:2017-08-16 19:10:50

标签: knockout.js bootstrap-4

我已在我的应用程序中实现了bootstrap分页。现在我需要以红色突出显示几个页码(动态获取页码)。任何人都可以指出我正确的方向。 感谢

1 个答案:

答案 0 :(得分:0)

您可以定义一个数组,其中包含应以红色显示的页面

 self.redPages = ko.observableArray([1, 3]);

并且,当当前页码属于data-bind数组时,为css page-item-red添加一个应用类redPages的{​​{1}}:

<li class="page-item" data-bind="css: {'page-item-red' : redPages.indexOf(1) >= 0}">

&#13;
&#13;
var vm = function() {
  var self = this;

  self.redPages = ko.observableArray([1, 3]);
};

ko.applyBindings(new vm());
&#13;
.page-item-red > a {
  color: red;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#">Previous</a></li>
    <li class="page-item" data-bind="css: {'page-item-red' : redPages.indexOf(1) >= 0}">
      <a class="page-link" href="#">1</a></li>
    <li class="page-item" data-bind="css: {'page-item-red' : redPages.indexOf(2) >= 0}">
      <a class="page-link" href="#">2</a></li>
    <li class="page-item" data-bind="css: {'page-item-red' : redPages.indexOf(3) >= 0}">
      <a class="page-link" href="#">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
&#13;
&#13;
&#13;