我正在尝试使用Bootstrap的Pagination风格。文档说如此创建页面列表:
<div class="pagination">
<ul>
<li class="disabled"><a href="#">«</a></li>
<li class="active"><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="#">»</a></li>
</ul>
</div>
应禁用前两个链接,左箭头和1。当我将它合并到我的django模板中时,这两个仍然可用。单击它们会将用户发送到页面顶部,就像任何其他具有ID“#”的锚链接一样。我想我仍然必须在那里让Bootstrap正确地设计它。
有没有办法写这个,以便当用户点击其中一个禁用的“按钮”时,它什么都不做?
答案 0 :(得分:30)
在文档中,这些按钮只是手动禁用。它与.pagination
样式无关。
您可以使用
$('.pagination .disabled a, .pagination .active a').on('click', function(e) {
e.preventDefault();
});
注意:如果您使用基于ajax的分页,则必须将此代码放在更新处理程序中或使用delegated events代替
答案 1 :(得分:6)
如果您编写html动态服务器端(例如使用django)并且您不想使用javascript,则可以执行此操作:
pseudo code:
if (Model.HasNext()) {
<li> // normal link
<a href="www.someurl.com/page=i">next</a>
</li>
} else {
<li class="disabled"> // disabled link
<a href="javascript: void(0)">next</a>
</li>
}
答案 2 :(得分:5)
作为参考,这里是what Bootstrap does:
&.disabled,
&[disabled] {
cursor: not-allowed;
pointer-events: none; // Future-proof disabling of clicks
.opacity(.65);
.box-shadow(none);
}
答案 3 :(得分:3)
RSeval(rsc, 'RevoScaleR:::startBxlServer()')
答案 4 :(得分:-1)
对于PHPLD v 4.2,我使用以下代码显示Bootstrap 3分页
{* Display Paging Links *}
<ul class="pagination">
<li>{paginate_prev id="MainPaging"}</li>
{paginate_middle id="MainPaging" format="page" prefix="" suffix="" link_prefix="
<li>"link_suffix="</li>" current_page_prefix="
<li class=\"active\"><a href=\"#\">"current_page_suffix="</a></li>"}
<li>{paginate_next id="MainPaging"}</li>
</ul>