CODEWITHSUNDEEP
javascriptphpjqueryhtmltwitter-bootstrap
Daniel
Daniel

Reputation: 269

How to use bootstrap paginator library to paginate data echoed from PHP?

I am developing a project where I echo data from database into a table. I want to paginate the data at the client site. So I am using bootstrap paginator library: http://lyonlai.github.io/bootstrap-paginator/

Here is my code:

In my header:

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

And in my body of page:

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

But this code is not taking affect of pagination at all. Does anyone know why?

Upvotes: 0

Views: 184

Answers (1)

Wes Dollar
Wes Dollar

Reputation: 367

Like Marc said, you'll most likely need to ready your script so it applies the JS after the HTML is fully loaded. But it also looks like you attached the JS library to EACH message. I didn't look at the documentation for the BS-pag, but I'm guessing the JS needs to be applied to a parent element so it can do its thing. In other words, move your DIV outside your foreach. It's also odd to me that you have table rows / columns in a div and not table element. That could cause some issues if BS-pag is expecting a table.

Also, you may want to have a look at Data Tables (datatables.net). Sounds like that may be exactly what you're looking for.

Upvotes: 1

Related Questions