How to add filters to this pagination script properly?

Question

Hello, I am currently working on this tutorial and would like to add a filter button to it.

I am using jquery to make an element clickable:

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

and the jquery for the element:

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

        Display_Load();

        //Loading Data
        var pageNum = this.id;    

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

});

The problem that I am getting is when clicking on the paragraph tag will go to 'filter_marketing.php?page=' but will not work (i.e. displays nothing) since the 'var pageNum' is not defined.

the php code for pageNum looks like this:

<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>

Im just unsure how to make a button 'marketing' and clicking on it goes to the php page and gets the results in mysql db and displays it with the pagination.

if anyone can help on this, that would be great.

P.S. check the entire script of the tutorial to see the entire structure and how it works. Tutorial

Edit: Here is the code:

Pagination.php:

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

//Calculating no of pages
$sql = "select * from explore where category='marketing'";
$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 id="'.$i.'">'.$i.'</li>';
}
?>
<p id="marketing">MARKETING</p>
</ul>
<br />
<br />

jquery_pagination.js

$(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();

                //Loading Data
        var pageNum = this.id;    

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

        });

});

filter_marketing.php:

<?php
include('config.php');
$per_page = 3;
if($_GET)
{
$page=$_GET['page'];
}

$start = ($page-1)*$per_page;
$sql = "select * from explore where category='marketing' order by category limit $start,$per_page";
$result = mysql_query($sql);
?>
<table width="800px">
<?php
while($row = mysql_fetch_array($result))
{
$msg_id=$row['id'];
$message=$row['site_description'];
$site_price=$row['site_price'];

?>
<tr>
<td><?php echo $msg_id; ?></td>
<td><?php echo $message; ?></td>
<td><?php echo $site_price; ?></td>
</tr>
<?php
}
?>
</table>
<?php
//Pagination Numbers
for($mktg=1; $mktg<=$pages; $mktg++)
{
echo '<li class="mktg" id="'.$mktg.'">'.$mktg.'</li>';
}

Answer 1

The problem that I am getting is when clicking on the paragraph tag will go to 'filter_marketing.php?page=' but will not work (i.e. displays nothing) since the 'var pageNum' is not defined.

When trying the example page I just get correct page numbers, as shown by Firebug's Net panel. The strange thing I see is that results 10-12 are not shown, i.e. page 1 has results 1-9 and page 2 shows results 13-23 (you should really make it 10 or 20 results per page).

Im just unsure how to make a button 'marketing' and clicking on it goes to the php page and gets the results in mysql db and displays it with the pagination.

Where is 'marketing' in your source code? Can you provide an example of this? I just don't understand this question.

EDIT: I still don't understand this. #marketing hasn't been assigned an onclick-event. Moreover, I would use a button in a form like <input type="submit"> and attaching an onclick-event to it in your JavaScript. That function can call your PHP via AJAX or go to a different URL, returning false when successful to prevent the default action (or just let the button submit your form in the regular way).