title: How to give previous and next button in pagination?
body: <p>I want to use 1 to 10 page number display in pagination and I want previous and next button there</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;?php
  session_start();
  ?&gt;
  &lt;?php
  include('conn.php');
  
  $per_page = 15; 
  $select_table = "select * from clientreg";
  $variable = mysql_query($select_table);
  $count = mysql_num_rows($variable);
  $pages = ceil($count/$per_page)
  
  ?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Qjuery pagination with loading effect using PHP and MySql&lt;/title&gt;
  &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
      function Display_Load()
      {
          $("#load").fadeIn(1000,0);
          $("#load").html("&lt;img src='load.gif' /&gt;");
      }
      function Hide_Load()
      {
          $("#load").fadeOut('slow');
      };
      $("#paginate li:first").css({'color' : '#FF0084'}).css({'border' : 'none'});
      Display_Load();
      $("#content").load("pagination.php?page=1", Hide_Load());
      &lt;?php
      $page
      ?&gt;
      $("#paginate li").click(function(){
          Display_Load();
          $("#paginate li")
          .css({'border' : 'solid #193d81 1px'})
          .css({'color' : '#0063DC'});
          $(this)
          .css({'color' : '#FF0084'})
          .css({'border' : 'none'});
          var pageNum = this.id;
          $("#content").load("pagination.php?page=" + pageNum, Hide_Load());
  
      });
  });
      &lt;/script&gt;
  
  
  &lt;style type="text/css"&gt;
  
  
  #load { 
  width:30px;
  padding-top:50px;
  border:0px green dashed;
  margin:0 auto;
  }
  #paginate
  {
  text-align:center;
  border:0px green solid;
  width:500px;
  margin:0 auto;
  }
  .link{
  width:800px; 
  margin:0 auto; 
  border:0px green solid;
  }
  
  li{ 
  list-style: none; 
  float: left;
  margin-right: 16px; 
  padding:5px; 
  border:solid 1px #193d81;
  color:#0063DC; 
  }
  li:hover
  { 
  color:#FF0084; 
  cursor: pointer; 
  }
  &lt;/style&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="content" &gt;&lt;/div&gt;
  
  
  
  &lt;div class="link" align="center"&gt;
  
  
  
              &lt;ul id="paginate"&gt;
                  &lt;?php
                  //Show page links
                  for($i=1; $i&lt;=$pages; $i++)
                  {
                      echo '&lt;li id="'.$i.'"&gt;'.$i.'&lt;/li&gt;';
                  }
                      echo '&lt;br/&gt;';
  
                  ?&gt;
      &lt;/ul&gt;   
      &lt;/div&gt;
      &lt;div style="clear:both"&gt; &lt;/div&gt;
  &lt;div id="load" align="center" &gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Desired out put </p>
  
  <p>like    <strong>Previous</strong> 1,2,3,4,5,6,7,8,9 10 <strong>Next</strong></p>
  
  <p>how can i achieve my output </p>
  
  <p>Thanks in advance</p>