Question

如果我选择了其他选项，则在我点击底部分页链接后，它不会立即刷新表格。我想当我选择其他选项时，表格和分页会自动刷新。谢谢你的回答。

 <!DOCTYPE html>
 <html>
      <head>
          <meta charset="utf-8">
           <title>Webslesson Tutorial | Make Pagination using Jquery, PHP, Ajax and MySQL</title>
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
      </head>
      <body>
           <div class="container">
                <div id="search">
                  Animal:
                  <select name="animal_select" id="animal_select">
                    <option value="">All</option>
                    <option value="dog">Dog</option>
                    <option value="cat">Cat</option>
                  </select>
                </div>
                <h3 align="center">Make Pagination using Jquery, PHP, Ajax and MySQL</h3><br />
                <div class="table-responsive" id="pagination_data">
                </div>
           </div>
      </body>
 </html>
 <script>

 $(document).ready(function(){

      load_data();

      function load_data(page)
      {
           var animal_select = $('#animal_select').val();
           $.ajax({
                url:"pagifetch.php",
                method:"POST",
                data:{page:page, animal_select: animal_select},
                success:function(data){
                     $('#pagination_data').html(data);
                }
           })
      }

      $(document).on('click', '.pagination_link', function(){
           var page = $(this).attr("id");
           load_data(page);
      });

 });

 </script>

pagifetch.php：

<?php

$connect = mysqli_connect("localhost", "root", "", "animals_db");
$record_per_page = 2;
$page = '';
$output = '';
if(isset($_POST["page"])) {

  $page = $_POST["page"];

} else {

  $page = 1;

}

$start_from = ($page - 1)*$record_per_page;

$animal_select_select = $connect->real_escape_string($_POST["animal_select"]);

if (!empty($animal_select_select)) {

  $query = "SELECT * FROM animals WHERE animal = '".$animal_select_select."' ORDER BY id DESC LIMIT $start_from, $record_per_page";

} else {

  $query = "SELECT * FROM animals ORDER BY id DESC LIMIT $start_from, $record_per_page";

}

$result = mysqli_query($connect, $query);

$output .= "
      <table class='table table-bordered'>
           <tr>
                <th width='25%'>Id</th>
                <th width='25%'>AnimalId</th>
                <th width='25%'>Town</th>
                <th width='25%'>Animal</th>
           </tr>
";

while($row = mysqli_fetch_array($result)) {
      $output .= '  
           <tr>  
                <td>'.$row["id"].'</td>
                <td>'.$row["animalid"].'</td>
                <td>'.$row["town"].'</td>
                <td>'.$row["animal"].'</td>
           </tr>  
      ';  
 }  
 $output .= '</table><br /><div align="center">';  
 $page_query = "SELECT * FROM animals ORDER BY 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<=$total_pages; $i++)  
 {  
      $output .= "<span class='pagination_link' style='cursor:pointer; padding:6px; border:1px solid #ccc;' id='".$i."'>".$i."</span>";  
 }  
 $output .= '</div><br /><br />';  

  echo $output; 
?>

选择Ajax分页，如何自动刷新？

0 个答案: