title: Ajax search and pagination combine
body: <p>im making a page where i can display data from a table with search and pagination and i find this 2 tutorial.</p>
  
  <p>First is for searching: <a href="http://www.webslesson.info/2016/08/make-pagination-using-ajax-with-jquery-php-and-mysql.html" rel="nofollow noreferrer">http://www.webslesson.info/2016/03/ajax-live-data-search-using-jquery-php-mysql.html</a></p>
  
  <p>Second is for pagination: <a href="http://www.webslesson.info/2016/08/make-pagination-using-ajax-with-jquery-php-and-mysql.html" rel="nofollow noreferrer">http://www.webslesson.info/2016/08/make-pagination-using-ajax-with-jquery-php-and-mysql.html</a>`</p>
  
  <p>I try to combine them for hours but i cant. The search is working but when i click on the pagination buttons (1,2,3,4) it reset to the same data. Please kind sir's may you please explain it to me or show me how to do it. </p>
  
  <p>admin.php</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;  
   &lt;html&gt;  
        &lt;head&gt;  
             &lt;title&gt;Webslesson Tutorial | Ajax PHP MySQL Date Range Search using jQuery DatePicker&lt;/title&gt;  
             &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"&gt;&lt;/script&gt;  
             &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /&gt;  
             &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;  
             &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;  
        &lt;/head&gt;  
        &lt;body&gt;  
        &lt;div id="result"&gt;&lt;/div&gt;
             &lt;br/&gt;&lt;br /&gt;  
             &lt;div class="container" style="width:900px;"&gt;  
                  &lt;h2 align="center"&gt;Ajax PHP MySQL Date Range Search using jQuery DatePicker&lt;/h2&gt;  
                  &lt;h3 align="center"&gt;Order Data&lt;/h3&gt;&lt;br /&gt; 
  
                  &lt;div class="input-group"&gt;
                  &lt;span class="input-group-addon"&gt;Search&lt;/span&gt;
                  &lt;input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" /&gt;
                  &lt;/div&gt;
                  &lt;br/&gt;
                  &lt;div class="col-md-3"&gt;  
                       &lt;input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" /&gt;  
                  &lt;/div&gt;  
                  &lt;div class="col-md-3"&gt;  
                       &lt;input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" /&gt;  
                  &lt;/div&gt;  
                  &lt;div class="col-md-5"&gt;  
                       &lt;input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" /&gt;  
                  &lt;/div&gt;  
                  &lt;div style="clear:both"&gt;&lt;/div&gt;                 
                  &lt;br /&gt;  
                  &lt;div id="order_table"&gt;  
                       &lt;table class="table table-bordered"&gt;  
                            &lt;tr&gt;  
                                 &lt;th width="5%"&gt;ID&lt;/th&gt;  
                                 &lt;th width="30%"&gt;Customer Name&lt;/th&gt;  
                                 &lt;th width="43%"&gt;Item&lt;/th&gt;  
                                 &lt;th width="10%"&gt;Value&lt;/th&gt;  
                                 &lt;th width="12%"&gt;Order Date&lt;/th&gt;  
                            &lt;/tr&gt;  
                       &lt;?php  
                       while($row = mysqli_fetch_array($result))  
                       {  
                       ?&gt;  
                            &lt;tr&gt;  
                                 &lt;td&gt;&lt;?php echo $row["order_id"]; ?&gt;&lt;/td&gt;  
                                 &lt;td&gt;&lt;?php echo $row["order_customer_name"]; ?&gt;&lt;/td&gt;  
                                 &lt;td&gt;&lt;?php echo $row["order_item"]; ?&gt;&lt;/td&gt;  
                                 &lt;td&gt;&lt;?php echo $row["order_value"]; ?&gt;&lt;/td&gt;  
                                 &lt;td&gt;&lt;?php echo $row["order_date"]; ?&gt;&lt;/td&gt;  
                            &lt;/tr&gt;  
                       &lt;?php  
                       }  
                       ?&gt;  
                       &lt;/table&gt;  
                  &lt;/div&gt;  
                  &lt;div id="pagination_data"&gt;&lt;/div&gt;
             &lt;/div&gt;  
        &lt;/body&gt;  
   &lt;/html&gt;  
  
   &lt;script&gt;  
   $(document).ready(function(){  
        load_data();  
        function load_data(page)  
        {  
             $.ajax({  
                  url:"search.php",  
                  method:"POST",  
                  data:{page:page},  
                  success:function(data)
                  {  
                      $('#order_table').html(data);  
                  }
             })  
        }  
        $(document).on('click', '.pagination_link', function(){  
             var page = $(this).attr("id");  
             load_data(page);  
        });  
   });  
   &lt;/script&gt;  
  
  &lt;script&gt;
  $(document).ready(function()
  {
      load_data();
      function load_data(query)
      {
          $.ajax
          ({
              url:"search.php",
              method:"POST",
              data:{query:query},
              success:function(data)
              {
                  $('#order_table').html(data);
              }
          });
      }
  
      $('#search_text').keyup(function()
      {
          var search = $(this).val();
          if(search != '')
          {
          load_data(search);
          }
          else
          {
          load_data();
          }
      }); 
  });
  &lt;/script&gt;
  
   &lt;script&gt;  
        $(document).ready(function(){  
             $.datepicker.setDefaults({  
                  dateFormat: 'yy-mm-dd'   
             });  
             $(function(){  
                  $("#from_date").datepicker();  
                  $("#to_date").datepicker();  
             });  
             $('#filter').click(function(){  
                  var from_date = $('#from_date').val();  
                  var to_date = $('#to_date').val();  
                  if(from_date != '' &amp;&amp; to_date != '')  
                  {  
                       $.ajax({  
                            url:"filter.php",  
                            method:"POST",  
                            data:{from_date:from_date, to_date:to_date},  
                            success:function(data)  
                            {  
                                 $('#order_table').html(data);  
                            }  
                       });  
                  }  
                  else  
                  {  
                       alert("Please Select Date");  
                  }  
             });  
        });  
   &lt;/script&gt;
  </code></pre>
  
  <p>search.php</p>
  
  <pre><code>&lt;?php  
  
      $record_per_page = 5;  
      $page = '';  
      $output = '';  
      if(isset($_POST["page"]))  
      {  
        $page = $_POST["page"];  
      }  
      else  
      {  
        $page = 1;  
      }  
      $start_from = ($page - 1)*$record_per_page;  
  
  
      $connect = mysqli_connect("localhost", "root", "", "srdatabase");  
      $output = '';  
      $search = mysqli_real_escape_string($connect, $_POST["query"]);
  
      $query = "
      SELECT * FROM tbl_order 
      WHERE order_id LIKE '%".$search."%'
      OR order_customer_name LIKE '%".$search."%' 
      OR order_item LIKE '%".$search."%' 
      OR order_value LIKE '%".$search."%' 
      OR order_date LIKE '%".$search."%'
      LIMIT $start_from, $record_per_page";  
  
      $result = mysqli_query($connect, $query);  
  
      $output .= '  
         &lt;table class="table table-bordered"&gt;  
              &lt;tr&gt;  
                   &lt;th width="5%"&gt;ID&lt;/th&gt;  
                   &lt;th width="30%"&gt;Customer Name&lt;/th&gt;  
                   &lt;th width="43%"&gt;Item&lt;/th&gt;  
                   &lt;th width="10%"&gt;Value&lt;/th&gt;  
                   &lt;th width="12%"&gt;Order Date&lt;/th&gt;  
              &lt;/tr&gt;  
      '; 
  
  
             while($row = mysqli_fetch_array($result))  
             {  
                  $output .= '  
                       &lt;tr&gt;  
                            &lt;td&gt;'. $row["order_id"] .'&lt;/td&gt;  
                            &lt;td&gt;'. $row["order_customer_name"] .'&lt;/td&gt;  
                            &lt;td&gt;'. $row["order_item"] .'&lt;/td&gt;  
                            &lt;td&gt;'. $row["order_value"] .'&lt;/td&gt;  
                            &lt;td&gt;'. $row["order_date"] .'&lt;/td&gt;  
                       &lt;/tr&gt;  
                  ';  
             }  
  
  
      $output .= '&lt;/table&gt;&lt;br /&gt;&lt;div align="center"&gt;';  
      $page_query = "SELECT * FROM tbl_order ORDER BY order_id DESC";  
      $page_result = mysqli_query($connect, $page_query);  
      $total_records = mysqli_num_rows($page_result);  
      $total_pages = ceil($total_records/$record_per_page);  
      for($i=1; $i&lt;=$total_pages; $i++)  
      {  
      $output .= "&lt;span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'&gt;".$i."&lt;/span&gt;";  
      }  
      $output .= '&lt;/div&gt;&lt;br /&gt;&lt;br /&gt;';  
      echo $output;  
  
  
  
  
  
   ?&gt;
  </code></pre>