我正在页面加载时动态创建 Bootstrap “list-group-item”，根据结果数量，项目将填充到 Bootstrap 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>最佳答案
我在 Github 上找到了这个小解决方案，试试这个可能会有帮助 https://gist.github.com/rxtur/6c29e2b0d81bac2578ca
关于jquery - 如何为 Bootstrap "list-group-item"创建分页？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39387290/