Grails：使用 twitter 引导分页显示动态内容？答案

【问题标题】：Grails: display dynamic contents with using twitter bootstrap pagination?Grails：使用 twitter 引导分页显示动态内容？
【发布时间】：2014-04-23 11:54:52
【问题描述】：

如何在 twitter bootstrap 分页中显示每个内容？我只能显示第一个内容。我使用标签来显示内容，但我不知道如何获取所有元素 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>

【问题讨论】：

标签： javascript jquery twitter-bootstrap grails pagination

【解决方案1】：

我认为使用 twitter bootstrap 你根本不需要 js，尝试“手动”生成分页。喜欢：

<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>

【讨论】：

感谢@john 的帮助。我将使用该解决方案。
嗨@john，我将如何实现它：
我很困惑如何在分页中显示图像。
什么内幕 ${item} = ？您应该将资源用于诸如之类的图像之类的资源
${item} 是一个 base64 字符串 png 图像。我用这段代码预览了一张png图片：根据要求，我们不保存grails 应用程序的 “图像文件夹” 中的图像。
如果我们删除错别字 <ul class="pagination"><each in="${1..count}" status="i"><if test="${i == offset}"><li class="active"><a href="/default/index/tourl?u=JHtjcmVhdGVMaW5rKGNvbnRyb2xsZXI6JycsIGFjdGlvbjonJywgcGFyYW1zOltdfQ%3D%3D">${i} a></a></li> </if><else><li><a href="/default/index/tourl?u=JHtjcmVhdGVMaW5rKGNvbnRyb2xsZXI6JycsIGFjdGlvbjonJywgcGFyYW1zOltdfQ%3D%3D">${i} </a></li> </else></each></ul>

【解决方案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');

【讨论】：