由jQuery Bootstrap分页器插件创建的分页链接向右浮动
我使用的是Java Server Faces 2.2。我的设计基于Twitter Bootstrap 3。Boostrap提供了一个组件，用于设置分页的样式。我使用这个jQuery插件(http://bootstrappaginator.org/)动态生成分页。
在我的模板中，我生成了h:outputLink的链接。我用h:dataTable创建了一个可分页和可排序的表。页面、排序字段和排序顺序作为get参数传递。这些链接是使用h:outputLink创建的。
现在的问题是，用于分页的链接是由jQuery插件创建的，并插入到页面中。此外，我使用jQuery来动态调整分页的位置(将其向右浮动)，因为插件的选项不起作用。
加载页面后，分页会浮动到右侧。现在，我使用分页切换到另一个页面。jquery插件现在重新生成分页。分页现在漂浮在左边(插件重置了<ul>标记的类属性)。在此之后，分页被放在右边(我通过jquery添加了缺少的类)。
问题是，您可以在浏览器中看到这个浮动在右侧。如果我使用的是由h:outputLink创建的链接，该行为不会发生。h:outputLink会将类似id="j_idt75:j_idt84" name="j_idt75:j_idt84"的内容添加到链接中。这是针对ajax的吗？我认为jquery插件生成的链接也创建了一个ajax请求，它会更新整个页面，这样我就可以看到分页的移动。
我能做些什么来避免这种行为？我认为没有I的“标准”html链接应该强制执行一个全新的get请求，而不是ajax请求。这怎麽可能？
回答 1
Stack Overflow用户
发布于 2014-01-30 15:37:38
引导程序版本3似乎不支持对齐选项。此处是指向bug report的链接
对齐选项只在版本2中有效。如果使用bootstrap-paginator版本3，它根本不会设置对齐。下面是bootstrap-paginator.js中有问题的代码：
if (this.options.bootstrapMajorVersion === 2) {
switch (alignment.toLowerCase()) {
case "center":
this.$element.addClass("pagination-centered");
break;
case "right":
this.$element.addClass("pagination-right");
break;
default:
break;
}
}在bootstrap版本3样式中没有pagination-centered或pagination-right类。您可以选择使用bootstrap version2或使用样式创建自己的解决方案。
这是我的解决方案。我将分页放入其中，然后将样式应用于父div元素。如果你在调用分页器函数之前这样做，它应该从一开始就设置正确的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Paginator V3 Tests</title>
<link rel="stylesheet" href="../css/qunit-1.11.0.css">
<!-- link rel="stylesheet" href="../css/bootstrap.css" -->
<link rel="stylesheet" href="../css/bootstrapv3.css">
<script src="../lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="../lib/bootstrapv3.js" type="text/javascript"></script>
<script src="../src/bootstrap-paginator.js"></script>
<style>
.pagination-centered {
text-align: center;
}
.pagination-right {
text-align: right;
}
</style>
</head>
<body width="100%">
<div>
<ul id="example1"></ul>
</div><br/>
<div>
<ul id="example2"></ul>
</div><br/>
<div>
<ul id="example3"></ul>
</div><br/>
<script type="text/javascript">
$(function() {
var opts = {
bootstrapMajorVersion:3,
currentPage: 3,
numberOfPages: 5,
totalPages:11
}
var optsCenter = {
bootstrapMajorVersion:3,
currentPage: 3,
numberOfPages: 5,
totalPages:11,
alignment: 'center'
}
var optsRight = {
bootstrapMajorVersion:3,
currentPage: 3,
numberOfPages: 5,
totalPages:11,
alignment: 'right'
}
alignElement($('#example1'), opts);
$('#example1').bootstrapPaginator(opts);
alignElement($('#example2'), optsCenter);
$('#example2').bootstrapPaginator(optsCenter);
alignElement($('#example3'), optsRight);
$('#example3').bootstrapPaginator(optsRight);
function alignElement(element, options) {
if (!options.alignment) return;
switch (options.alignment.toLowerCase()) {
case "center":
element.parent().addClass("pagination-centered");
break;
case "right":
element.parent().addClass("pagination-right");
break;
default:
break;
}
}
});
</script>
</body>
</html>https://stackoverflow.com/questions/21208702
复制相似问题
腾讯云开发者
