Hervorhebung einer Seitennummer im Bootstrap Paginierung

Question

Ich habe Bootstrap Paginierung in meiner Anwendung implementiert. Jetzt habe ich eine Anforderung, um einige Seitenzahlen (rot wird dynamisch erhalten) rot hervorzuheben. Kann mir bitte jemand in die richtige Richtung zeigen. Dank

Answer 1

Sie könnten eine Reihe definieren, die die Seiten enthält, die in rot angezeigt werden soll,

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

Und, fügen Sie ein data-bind für css die page-item-red eine Klasse gilt, wenn die aktuelle Seitenzahl, dass redPages gehört Array :

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

var vm = function() { 
 
    var self = this; 
 

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

 
ko.applyBindings(new vm());

.page-item-red > a { 
 
    color: red; 
 
}

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