Pagination problem needing assistance

Question

Hey, I'm trying to add a button that when clicked will grab data from the mysql database and display it with a pagination. However, I can't seem to get it to work properly.

The first main page looks like this: pagination.php:

<?php
include('config.php');
$per_page = 3;

//Calculating no of pages
$sql = "select * from explore";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$pages = ceil($count/$per_page)
?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="jquery_pagination.js"></script>

<style>
body { margin: 0; padding: 5; font-family:Verdana; font-size:10px }
a
{
text-decoration:none;
color:#B2b2b2;

}

a:hover
{

color:#DF3D82;
text-decoration:underline;

}
#loading { 
width: 100%; 
position: absolute;
}

#pagination
{
text-align:center;
margin-left:120px;

}
li{ 
list-style: none; 
float: left; 
margin-right: 16px; 
padding:5px; 
border:solid 1px #dddddd;
color:#0063DC; 
}
li:hover
{ 
color:#FF0084; 
cursor: pointer; 
}
td{
border:solid 1px #dddddd;
padding:5px;
}


</style>



<div id="loading" ></div>
<div id="content" ></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li class="page_numbers" id="'.$i.'">'.$i.'</li>';
}
?>

<p id="marketing">MARKETING</p>
</ul>
<br />
<br />

The button above in that page looks like this as you can see:

<p id="marketing">MARKETING</p>

So, when the user clicks this I need it to get the results from the db.

I do this with jquery like this:

$(document).ready(function(){

    //Display Loading Image
    function Display_Load()
    {
        $("#loading").fadeIn(900,0);
        $("#loading").html("<img src='bigLoader.gif' />");
    }
    //Hide Loading Image
    function Hide_Load()
    {
        $("#loading").fadeOut('slow');
    };


   //Default Starting Page Results

    $("#pagination li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});

    Display_Load();

    $("#content").load("pagination_data.php?page=1", Hide_Load());



    //Pagination Click
    $("#pagination li").click(function(){

        Display_Load();

        //CSS Styles
        $("#pagination li")
        .css({'border' : 'solid #dddddd 1px'})
        .css({'color' : '#0063DC'});

        $(this)
        .css({'color' : '#FF0084'})
        .css({'border' : 'none'});

        //Loading Data
        var pageNum = this.id;

        $("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());

    });


// Editing below.        
        // Sort content Marketing    
        $("#pagination p").click(function () {


        Display_Load();

        //CSS Styles
        $("#pagination li")
        .css({'border' : 'solid #dddddd 1px'})
        .css({'color' : '#0063DC'});

        $(this)
        .css({'color' : '#FF0084'})
        .css({'border' : 'none'});

        //Loading Data
        var pageNum = this.id;

        $("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load());
        });

});

The problem is that does not work for one main reason: 1. PageNum = marketing. I need it to be the numbers like for 'pagination li' above. I do not know how to fix it properly.

In case I'm confusing you, I will try to explain better:

I want to create a button (i.e. Marketing) that when clicked will get the data from the database and display, but I also need the pagination numbers to be 'refreshed' to compensate for the new data.

If you need further explanation, please let me know. Any help would be greatly appreciated. Thank you.

Answer 1

Think you might be looking for index().

 var pageNum = $(this).index() + 1;

Keep in mind that index is 0 based, hence the add 1.

This would also be dependent on your html markup because index returns:

an integer indicating the position of the first element within the jQuery object relative to its sibling elements.

EDIT:

So if, when you update the content of #content, you also change the data-page attribute, you can also have that information when you click on #marketing, so you know which page to get.

This would also work if you were to give one of the LI elements a "current-page" class and then get the id of the .current-class LI.

<div id="content" data-page="1"></div>

Js:

//Pagination Click
$("#pagination li").click(function(){
    //...
    $("#content").load("pagination_data.php?page=" + pageNum, function(){
          Hide_Load();
          $(this).attr('data-page', pageNum);
    });
});


$("#pagination p").click(function () {
    //...
    var pageNum = $('#content').attr('data-page');

    $("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load());
 });