时间戳

首页 > 解决方案 > 在同一个文件中使用包含许多相似 HTML 元素的分页？

html - 在同一个文件中使用包含许多相似 HTML 元素的分页？

问题描述

所以我正在制作一个网络应用程序来运行我将在我的学校内托管的一个小型 CTF，并且我已经开发了一个可以加载问题的网页，我现在的示例一长串列出了这些问题

这是如何完成的：

    <body class="main-body">

        <div class="body">

            <section class="content">

                <div class="container-asdf"> <!-- This is a grid, assume that this particular element is repeated several times with changes -->
                    <div class="item-a">Test Problem</div>
                    <div class="item-b">Category: Test, Problem</div>
                    <div class="item-c"><button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-info">Button</button></div>
                </div>

             </section>
        </div>
    </body>

（完全披露这个 HTML 可能很糟糕，只使用我所知道的）

具有“container-asdf”类的 div 是针对大量问题自动生成的，假设它运行良好并且生成 50 个问题，我只希望其中 10 个一次出现在页面上，我想将它们分开使用分页，而不必制作大量不同的 HTML 页面，我该怎么做呢？我不需要代码，只需要一些概念和指南即可。我的第一个想法是把它放在不可见的容器里，让它在你选择不同的数字时出现，这就是为什么我问如何使用分页

总结：我有很多元素（在同一个 HTML 文件中）一次出现在页面上，我想限制这一点并将其拆分为页面而不必制作多个 HTML 文件，我正在使用 Flask/Jinja 生成说HTML 文件，如果有帮助的话。

谢谢你的帮助！

标签： htmlcssflaskpaginationjinja2

解决方案

不确定这是否适用，但您是否考虑过使用 easyPaginate jQuery 插件进行分页？此处提供了示例和设置。

推荐阅读