title: How to add filters to this pagination script properly?
body: <p>I am currently working on <a href="http://www.9lessons.info/2009/09/pagination-with-jquery-mysql-and-php.html" rel="nofollow noreferrer">this tutorial</a> and would like to add a filter button to it.</p>
  
  <p>I am using jquery to make an element clickable:</p>
  
  <pre><code>&lt;p id="marketing"&gt;MARKETING&lt;/p&gt;
  </code></pre>
  
  <p>and the jquery for the element:</p>
  
  <pre><code>// Sort content Marketing    
  $("#pagination p").click(function () {
  
          Display_Load();
  
          //Loading Data
          var pageNum = this.id;    
  
          $("#content").load("filter_marketing.php?page=" + pageNum, Hide_Load());
  
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>the php code for pageNum looks like this:</p>
  
  <pre><code>&lt;?php
  //Pagination Numbers
  for($i=1; $i&lt;=$pages; $i++)
  {
  echo '&lt;li id="'.$i.'"&gt;'.$i.'&lt;/li&gt;';
  }
  ?&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>if anyone can help on this, that would be great.</p>
  
  <p>P.S. check the entire script of the tutorial to see the entire structure and how it works.
  <a href="http://www.9lessons.info/2009/09/pagination-with-jquery-mysql-and-php.html" rel="nofollow noreferrer">Tutorial</a></p>
  
  <p>Edit: Here is the code:</p>
  
  <p>Pagination.php:</p>
  
  <pre><code>&lt;?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)
  ?&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery_pagination.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  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;
  }
  
  
  &lt;/style&gt;
  
  
  
  &lt;div id="loading" &gt;&lt;/div&gt;
  &lt;div id="content" &gt;&lt;/div&gt;
  &lt;ul id="pagination"&gt;
  &lt;?php
  //Pagination Numbers
  for($i=1; $i&lt;=$pages; $i++)
  {
  echo '&lt;li id="'.$i.'"&gt;'.$i.'&lt;/li&gt;';
  }
  ?&gt;
  &lt;p id="marketing"&gt;MARKETING&lt;/p&gt;
  &lt;/ul&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  </code></pre>
  
  <p>jquery_pagination.js</p>
  
  <pre><code>$(document).ready(function(){
  
      //Display Loading Image
      function Display_Load()
      {
          $("#loading").fadeIn(900,0);
          $("#loading").html("&lt;img src='bigLoader.gif' /&gt;");
      }
      //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());
  
          });
  
  });
  </code></pre>
  
  <p>filter_marketing.php:</p>
  
  <pre><code>&lt;?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);
  ?&gt;
  &lt;table width="800px"&gt;
  &lt;?php
  while($row = mysql_fetch_array($result))
  {
  $msg_id=$row['id'];
  $message=$row['site_description'];
  $site_price=$row['site_price'];
  
  ?&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;?php echo $msg_id; ?&gt;&lt;/td&gt;
  &lt;td&gt;&lt;?php echo $message; ?&gt;&lt;/td&gt;
  &lt;td&gt;&lt;?php echo $site_price; ?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;?php
  }
  ?&gt;
  &lt;/table&gt;
  &lt;?php
  //Pagination Numbers
  for($mktg=1; $mktg&lt;=$pages; $mktg++)
  {
  echo '&lt;li class="mktg" id="'.$mktg.'"&gt;'.$mktg.'&lt;/li&gt;';
  }
  </code></pre>