jQuery引导Paginator插件创建的分页链接向右浮动_Jquery_Jsf_Twitter Bootstrap_Pagination_Jsf 2.2

jQuery引导Paginator插件创建的分页链接向右浮动

jquery jsf twitter-bootstrap pagination

jQuery引导Paginator插件创建的分页链接向右浮动,jquery,jsf,twitter-bootstrap,pagination,jsf-2.2,Jquery,Jsf,Twitter Bootstrap,Pagination,Jsf 2.2,我使用的是JavaServerFaces2.2。我的设计基于Twitter Bootstrap 3。Boostrap提供了一个用于设置分页样式的组件。我使用这个jQuery插件（）动态生成分页在我的模板中，我使用h:outputLink生成链接。我用h:dataTable创建了一个可分页和可排序的表。页面、排序字段和排序顺序作为get参数传递。链接是使用h:outputLink创建的现在的问题是分页的链接由jQuery插件创建并插入页面。我还使用jQuery动态调整分页的位置（将其向右浮动）

我使用的是JavaServerFaces2.2。我的设计基于Twitter Bootstrap 3。Boostrap提供了一个用于设置分页样式的组件。我使用这个jQuery插件（）动态生成分页

在我的模板中，我使用

h:outputLink

生成链接。我用

h:dataTable

创建了一个可分页和可排序的表。页面、排序字段和排序顺序作为get参数传递。链接是使用

h:outputLink

创建的

现在的问题是分页的链接由jQuery插件创建并插入页面。我还使用jQuery动态调整分页的位置（将其向右浮动），因为plugin选项不起作用

加载页面后，分页将浮动到右侧。现在我使用分页切换到另一个页面。jquery插件现在重新生成分页。分页现在向左浮动（插件重置

标记的class属性）。之后，分页被浮动到右侧（我通过jquery添加缺少的类）

问题是，您可以在浏览器中看到此项向右浮动。如果我使用由

h:outputLink

创建的链接，那么bevavior不会出现

h:outputLink

将类似于

id=“j_idt75:j_idt84”name=“j_idt75:j_idt84”的内容添加到链接中。这是给ajax的吗？我认为jquery插件生成的链接也在创建一个ajax请求，它会更新整个页面，以便我能够看到分页的移动
我能做些什么来避免这种行为？我认为没有ID的“标准”html链接应该强制执行一个全新的get请求，而不是ajax请求。这是怎么可能的？引导版本3似乎不支持对齐选项。
这里是链接到
对齐选项仅在版本2中起作用。如果您使用引导分页器版本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;
    }
}

引导版本3样式中没有以分页为中心的类
或分页右侧的类。您可以选择使用引导版本2，也可以使用样式创建自己的解决方案
这是我的解决办法。我将分页放在里面，然后将样式应用于父div元素。如果在调用paginator函数之前执行此操作，则从一开始就应该正确设置样式
<!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>


引导分页器V3测试
.以页码为中心{
文本对齐：居中；
}
.分页权{
文本对齐：右对齐；
}









$（函数（）{
变量选项={
bootstrapMajorVersion:3，
第3页，
页数：5页，
总页数：11
}
var optsCenter={
bootstrapMajorVersion:3，
第3页，
页数：5页，
共页：11页，
对齐：“中心”
}
var optsRight={
bootstrapMajorVersion:3，
第3页，
页数：5页，
共页：11页，
对齐：“右”
}
alignElement（$（'#示例1'），opts）；
$（'#示例1'）。引导引导器（opts）；
alignElement（$（'#示例2'），OptCenter）；
$（“#示例2”）.bootstrapPaginator（optsCenter）；
alignElement（$（'#示例3'），optsRight）；
$（“#示例3”）.bootstrapPaginator（optsRight）；
函数alignElement（元素，选项）{
如果（！options.alignment）返回；
开关（options.alignment.toLowerCase（））{
案例“中心”：
element.parent（）.addClass（“分页居中”）；
打破
案例“权利”：
element.parent（）.addClass（“分页权限”）；
打破
违约：
打破
}
}
});