如何使用引导分页器库对从 PHP 回显的数据进行分页？答案

【问题标题】：How to use bootstrap paginator library to paginate data echoed from PHP?如何使用引导分页器库对从 PHP 回显的数据进行分页？
【发布时间】：2016-04-29 23:08:10
【问题描述】：

我正在开发一个项目，我将数据库中的数据回显到表中。我想在客户端站点对数据进行分页。所以我正在使用引导分页器库：http://lyonlai.github.io/bootstrap-paginator/

这是我的代码：

在我的标题中：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-paginator.min.js"></script>
                    <script type='text/javascript'>
        var options = {
            currentPage: 3,
            totalPages: 10
        }

        $('#messages-pag').bootstrapPaginator(options);
    </script>

在我的页面正文中：

<?php $messages = process_api_get($base_url,'/messages'); ?>
     <?php if($messages) { ?>
<?php foreach( $messages as $message ) : ?>
     <div id="messages-pag">

 <tr>
<td>
<?php echo get_username_by_id($message->to_user_id); ?>
 </td>
<td>
<?php echo get_username_by_id($message->from_user_id); ?>
</td>
<td>
 <?php echo $message->datetime; ?>
</td>
<td><a class="btn btn-sm btn-default " data-toggle="modal" data-target="#view_message_<?php echo $message->id; ?>"> View</a></td>
<td><a class="btn btn-sm btn-default " data-toggle="modal" data-target="#edit_message_<?php echo $message->id; ?>"> Edit</a></td>
<td><a href="<?php echo url('functions.php?action=delete_message&id=' . $message->id); ?>" class="btn btn-sm btn-default confirm-click"> Delete</a></td>

</tr>
                                                                                                    </div>
<?php endforeach; ?>
                                                                                                    <?php } ?>

但是这段代码根本不影响分页。有谁知道为什么？

【问题讨论】：

你是在运行那个 JS BEFORE 包含相关 div 的 html 吗？如果是这样，您将需要一个.ready()，以便可以先加载/解析 html。
就像 Marc 所说，您很可能需要准备好脚本，以便在 HTML 完全加载后应用 JS。但看起来您将 JS 库附加到了每条消息。我没有查看 BS-pag 的文档，但我猜测 JS 需要应用于父元素，以便它可以做它的事情。换句话说，将你的 DIV 移到你的 foreach 之外。我也很奇怪，您在 div 中有表格行/列而不是表格元素。如果 BS-pag 需要一个表格，这可能会导致一些问题。
另外，您可能想看看数据表 (datatables.net)。听起来这可能正是您想要的。
@WesDollar 你介意看看我的问题吗：stackoverflow.com/questions/36942153/…

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

就像 Marc 所说，您很可能需要准备好脚本，以便在 HTML 完全加载后应用 JS。但看起来您将 JS 库附加到了每条消息。我没有查看 BS-pag 的文档，但我猜测 JS 需要应用于父元素，以便它可以做它的事情。换句话说，将你的 DIV 移到你的 foreach 之外。我也很奇怪，您在 div 中有表格行/列而不是表格元素。如果 BS-pag 需要一个表格，这可能会导致一些问题。

另外，您可能想看看数据表 (datatables.net)。听起来这可能正是您正在寻找的。

【讨论】：