Php Pagination Bootstrap Nav Tabs Issue

Question

I am using the Bootstrap navigation tabs to split a page (posts on my site. One page shows the posts which the user has made. The other page shows all posts. I am using $_GET variables to paginate the pages.

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#myPosts">My Posts</a></li>
<li><a href="#allPosts">All Posts</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="myPosts">
<?php include "myPosts.php"; ?></div>
<div class="tab-pane" id="allPosts">
<?php include "allPosts.php"; ?></div>
</div>

I am displaying the content on each tab by including the relevant page link.

Here is an example of one of the links which should take the user to page 2.

 <a href="mySite.com/posts?page=2">2</a>

This works fine for myPosts, but when I click on the second tab( all posts) and attempt to paginate, it takes me to the second page of myPosts. The pagination is all url based, so is there anyway to feed into the url what tab/div is active?

Answer 1

In the code you posted, you have <div class="tab-pane active" id="myPosts"> So the active class is hard coded in that div. If that's what you want, great... otherwise, I think we need to do something like this untested code when we generate the list:

<?php
//dummy data
$pages=array(
    array('id'=>'1','posts'=>array('id'=>1,'content'=>'Go Bucks')),
    array('id'=>'2'),//more posts
    array('id'=>'3'),
    );
?>

<ul class="nav">
    <?php foreach($pages as $page): ?>
        <li class="<?= ($page['id']===$_GET['page']) ? ' active':null ?>">
            <a href="posts/page$<?= $page['id'] ?>"></a>Page <?= $page['id'] ?>
        </li>
    <?php endforeach; ?>
</ul>
<div class="tab-content">
    <?php foreach($pages as $page): ?>
        <div class="tab-pane<?php if($page['id']===$_GET['page']){echo ' active in';} ?>">
            //foreach posts here
        </div>
    <?php endforeach; ?>
</div>

The idea I'm trying to demonstrate is to test the page ID vs the $_GET['page'] value.

Another idea for you: check out bootstrap's example" http://getbootstrap.com/javascript/#tabs You may enjoy using javascript here, or at least to inspect their example to work out the syntax and behavior you want.