ブートストラップ "list-group-item"のページ番号の作成方法？

Question

私は、ブートストラップlist-group-itemにアイテムが読み込まれたときに、結果の数に基づいてページが読み込まれたときに、ブートストラップ"list-group-item"を動的に作成しています。しかし、その結果は、私が投入するとあまりにも多くのアイテムを持っている可能性がありますので、私はBootstrapリストグループ項目のページ分割を作成し、ページごとに最大10個の項目を表示する必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <h2>List Group With Custom Content</h2> 
 
    <div class="list-group"> 
 
    <a href="#" class="list-group-item"> 
 
     <h4 class="list-group-item-heading">First List Group Item Heading</h4> 
 
     <p class="list-group-item-text">List Group Item Text</p> 
 
    </a> 
 
    <a href="#" class="list-group-item"> 
 
     <h4 class="list-group-item-heading">Second List Group Item Heading</h4> 
 
     <p class="list-group-item-text">List Group Item Text</p> 
 
    </a> 
 
    <a href="#" class="list-group-item"> 
 
     <h4 class="list-group-item-heading">Third List Group Item Heading</h4> 
 
     <p class="list-group-item-text">List Group Item Text</p> 
 
    </a> 
 
    <a href="#" class="list-group-item"> 
 
     <h4 class="list-group-item-heading">fourth List Group Item Heading</h4> 
 
     <p class="list-group-item-text">List Group Item Text</p> 
 
    </a> 
 
    <a href="#" class="list-group-item"> 
 
     <h4 class="list-group-item-heading">fifth List Group Item Heading</h4> 
 
     <p class="list-group-item-text">List Group Item Text</p> 
 
    </a> 
 
    <a href="#" class="list-group-item"> 
 
     <h4 class="list-group-item-heading">sixth List Group Item Heading</h4> 
 
     <p class="list-group-item-text">List Group Item Text</p> 
 
    </a> 
 
    </div> 
 
    <ul class="pagination"> 
 
    <li><a href="#">1</a> 
 
    </li> 
 
    <li class="active"><a href="#">2</a> 
 
    </li> 
 
    <li><a href="#">3</a> 
 
    </li> 
 
    <li><a href="#">4</a> 
 
    </li> 
 
    <li><a href="#">5</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

私はこれを試して、それが参考に https://gist.github.com/rxtur/6c29e2b0d81bac2578ca