how can i do pagination without reaload page in wordpress

Question

how can i do pagination without reaload page in wordpress. i have use following code for the pagination but here page is reaload for each pagination. what can i do to stop realod page???please suggest me.

<?php
                       $page = (get_query_var('page')) ? get_query_var('page') : 1     

                       $limit=10;
                       $offset = ( $page - 1 ) * $limit;    
                      $data = $wpdb->get_results("select * from wp_products order by product_id  $sort_by
                                          LIMIT $offset,$limit ");
                 $total=$wpdb->get_results("select * from wp_products ");
            $pages = COUNT($total);
            $pages = ceil($pages / $limit);
            $querystring = "";
            foreach ($_GET as $key => $value) {
                if ($key != "page") $querystring .= "$key=$value&amp;";
            }

            // Pagination
            ?>


     <div class="pagination">
               <?php
              if( $pages > 1)
              {
                $range=1;
                $showitems = ($range * 2)+1;  
                $page1=$page;
                $prev=$page1-1;
                if($page > 1)
                {
                    echo "<a  class=\"page gradient\" ";
                    echo "href=\"?{$querystring}page=$prev";
                    echo "\">Previous</a> ";
                }
                for ($i = 1; $i <= $pages; $i++)
                   {
                        if (1 != $pages &&( !($i >= $page+$range+1 || $i <= $page-$range-1) || $pages <= $showitems ))
                             {
                                if($i == $page) 
                                { 
                                    echo  "<span class=\" page active\">".$i."</span>";
                                }
                                else
                                { 

                                echo "<a class=\"page gradient\"";
                                echo "href=\"?{$querystring}page=$i";
                                echo "\">$i</a> ";
                                }

                             }
                        }
                        if($page!=$pages)
                        {
                        if($showitems < $pages)
                            {
                                echo "..... ";
                            }
                            $page1=$page;
                            $next=$page1+1;
                            echo "<a " . ($i == $page ? "class=\"page active\" " : "class=\"page gradient\"");
                            echo "href=\"?{$querystring}page=$next";
                            echo "\">Next</a> ";
                        }
              }
                ?>                                         
                </div>

Answer 1

How about trying something like this:

$('.page').click(function(e) {
    e.preventDefault();
    $.ajax({url: $(this).prop('href'), success: function(d) {
        var page = $(d).find('.pagination').html();
        $('.pagination').html(page);
    }});
});

This uses jQuery to disable the normal click event of the next link, grabs the href of the next link, makes an AJAX request to the next page, save the HTML of the next page's pagination div, and replaces the current page's pagination div with the new one.

Answer 2

Just fetch all pages at once and then on same page use jquery datatable js for pagination in such case page will not reload. Datatable example here.

http://datatables.net/examples/basic_init/alt_pagination.html