twitter-bootstrap 带有动态内容的 Bootstrap 分页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36496909/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap pagination with dynamic content?
提问by Kieron606
I need to be able to paginate a table in my bootstrap modal.
我需要能够在我的引导模式中对表格进行分页。
The problem I'm having is that I build the table rows dynamically.
我遇到的问题是我动态构建表行。
The code which builds up the table rows.
构建表格行的代码。
function getValidTags(){
var ruleID = $('.ruleID').val();
$.ajax({
url: '/ajax/getValidTags.php',
type: 'POST',
data: {
ruleID: ruleID,
},
})
.done(function(data) {
$.each(data, function(validName, afCount) {
var newValidRow = '<tr>'+
'<td>'+validName+'</td><td>'+afCount+' Autofixes</td><td><button type="button" class="btn btn-primary btn-sm"><i class="fa fa-cog"></i></button> <button type="button" class="btn btn-danger btn-sm">Delete</button>'+
'</tr>';
$('.validTagsTable').append(newValidRow);
});
})
}
How do I add pagination to my table? I would like to be able to limit one page to 20 table rows?
如何在表格中添加分页？我希望能够将一页限制为 20 个表格行？
Here's my HTML
这是我的 HTML
<table class="table table-striped table-condensed">
<thead>
<tr>
<th>Tag Name</th>
<th>Autofixes</th>
<th>Manage</th>
</tr>
</thead>
<tbody class="validTagsTable">
</tbody>
</table>
<div class="col-md-4"></div>
<div class="col-md-4">
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
回答by John Mc
Is there a reason you cannot use a framework that does this for you? jQuery Datatablesdoes all of this for you.
您是否有理由不能使用为您执行此操作的框架？jQuery Datatables为您完成所有这些。
