在jquery中为div块创建动态分页答案

【问题标题】：Create dynamic pagination for div block in jquery在jquery中为div块创建动态分页
【发布时间】：2016-02-23 15:47:19
【问题描述】：

我已经使用 div 而不是使用表结构创建了一个表。现在我想为这个使用 div 创建的表添加分页功能。我想知道是否有任何可用于 div 的插件。

这里是示例代码

<div class="list">
    <div class="item">
        <div class="item-swipe">
            <div class="col-xs-5 col-xs-offset-1 col-lg-6 col-md-6 col-lg-offset-0 col-md-offset-0">
                <div class="wrap">
                    <span class="row1 date-content date whitespace">Col1</span>
                </div>
            </div>
            <div class="col-xs-4 col-xs-offset-2 col-lg-5 col-md-5 col-lg-offset-0 col-md-offset-0">
                <div class="wrap">
                    <span class="row1 date-content date">Col2</span>
                </div>
            </div>
            <div class="col-xs-3 col-lg-1 col-md-1 col-lg-offset-0 col-md-offset-0 hidden-xs hidden-xs hidden-sm hidden-md">
                <div class="wrap">
                    <a class="id">Col3</a>
                </div>
            </div>
        </div>
    </div>
</div>

我重复了这个示例代码。我已经使用上述结构创建了表格。我现在如何添加分页，或者如何将其转换为表格以便使用分页。

【问题讨论】：

标签： javascript jquery html pagination

【解决方案1】：

您可以探索JQuery Datatables。客户端或服务器端分页可能。包括无限滚动。

【讨论】：

为了使用数据表，你需要有我的结构中缺少的表行
您打算在这 3 列中显示什么？你能提供一个样本数据集吗
这三列是用来显示姓名、电话号码和邮箱的。我正在使用angular-js ng-repeat来动态填充div
您将从服务器查询这些数据吗？使用 AJAX 调用？
您仍然可以使用数据表。这是一个简单的 ajax 示例 datatables.net/examples/ajax/simple.html 。你可以在这里找到更复杂的 ajax 示例datatables.net/examples/ajax/index.html

【解决方案2】：

您可以使用JSONPagination Plugin，它不依赖于 DOM，因为它在 JSON 级别完成，因此您可以使用 div 或 table 标签创建任何类型的表，只需记住几个步骤，这已解释在插件本身中。

免责声明：我是这个插件的作者。

【讨论】：