如何使用bootstrap paginator库对从PHP回显的数据进行分页?

时间:2016-04-29 14:41:44

标签: javascript php jquery html twitter-bootstrap

我正在开发一个项目,我将数据库中的数据回显到表中。我想在客户端站点分页数据。所以我使用的是bootstrap paginator库: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 } ?>

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

1 个答案:

答案 0 :(得分:1)

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

另外,您可能需要查看数据表(datatables.net)。这听起来可能就是你想要的。