jQuery Bootstrap Paginator 插件创建的分页链接向右浮动答案

【问题标题】：Pagination links created by jQuery Bootstrap Paginator plugin are floating to rightjQuery Bootstrap Paginator 插件创建的分页链接向右浮动
【发布时间】：2014-02-08 03:06:28
【问题描述】：

我正在使用 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 请求，它会更新整个页面，因此我能够看到分页的移动。

我能做些什么来避免这种行为？我认为没有 id 的“标准”html 链接应该强制执行一个全新的 get 请求，而不是一个 ajax 请求。这怎么可能？

【问题讨论】：

标签： jquery jsf twitter-bootstrap pagination jsf-2.2

【解决方案1】：

bootstrap 版本 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;
    }
}

引导版本 3 样式中没有 pagination-centered 或 pagination-right 类。您的选择是使用引导程序版本 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>

【讨论】：