由jQuery Bootstrap Paginator插件創建的分頁鏈接正在浮動到右邊

我正在使用Java Server Faces 2.2。我的設計基於Twitter Bootstrap 3. Boostrap提供了用於分頁樣式的組件。我正在使用這個jQuery插件（http://bootstrappaginator.org/）來動態生成分頁。由jQuery Bootstrap Paginator插件創建的分頁鏈接正在浮動到右邊

在我的模板中，我正在生成與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"的鏈接。這是爲阿賈克斯？我認爲jquery插件生成的鏈接也創建了一個ajax請求，它會更新整個頁面，以便我能夠看到分頁的運動。

我該怎麼做才能避免這種行爲？我認爲沒有ID的「標準」html鏈接應該強制一個完整的新的get請求而不是ajax請求。這怎麼可能？

來源

2014-01-18 Marcello90

看來，對齊選項不與引導版本支持3 這裏的鏈接bug report

對齊選項是，如果你使用的引導，分頁程序版本3，它不設置對齊在第2版只工作在所有。下面是自舉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; 
    } 
}

沒有pagination-centered也不pagination-right班，引導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>

來源

2014-01-30 07:37:37 edufinn

由jQuery Bootstrap Paginator插件創建的分頁鏈接正在浮動到右邊

回答

相關問題