Question

如何在twitter bootstrap分页中显示每个内容？我只能显示第一个内容。我使用tag来显示内容，但我不知道如何获取所有元素ID。

以下是获取元素ID以在分页中显示它的javascript代码：

<div class="container">
    <div class="row-fluid">
        <div class="bs-docs-example">
            <p class="well demo content1">
               Dynamic content here.
             </p>
             <p class="demo demo1"></p>
         </div>

                <!-- Demo time! -->
                <script type="text/javascript">
                    var pageNumber = 0;
                    $('.demo1').bootpag({
                        total: '${count}',
                        page: 1

                        }).on("page", function(event, num){

                            $(".content1").html(document.getElementById("child")); // or some ajax content loading...
                            $(this).bootpag({total:  '${count}', maxVisible:  '${count}'});
                    }); 
                </script>


        </div>
</div>

以下是在gsp页面中生成动态数据的代码：

<g:each  var="item" in="${faxDocument}">  
        <div id="child">
            <a href="#"><center><img src="data:image/png;base64, ${item} " width="850" height="1200" /></center></a>
    </div>

    </g:each>

Answer 1

我认为使用twitter bootstrap你根本不需要js，尝试手工制作分页＆＃34;＃34;某事。像：

<ul class="pagination">
  <g:each in="${1..count}" status="i" >
   <g:if test="${i == offset}>
     <li class="active"><a href="${createLink( controller:'', action:'', params:[]>">${i}</a></li>
   </g:if>
   <g:else>
     <li><a href="${createLink( controller:'', action:'', params:[]>">${i}</a></li>
   </g:else>
 </g:each>
</ul>

Answer 2

简单的解决方案是通过jQuery添加缺少的类和标签，例如

// Fix pagination
// Wrap all direct children into a list element
$('ul.pagination >').wrap('<li class="page-item"></li>');

// add the missing class to the href tags
$('ul.pagination li a').addClass('page-link');

// Handle active element
$('span.currentStep').parent().addClass('active');

Grails：使用twitter bootstrap分页显示动态内容？

2 个答案: