与AJAX结合搜索框进行分页

时间:2019-02-08 21:30:50

标签: php jquery mysql ajax

我有一个脚本(来自W3schools),可以在向数据库中键入文本时使用它来搜索数据库。效果很好。

第二,我有一个用于对ajaxResult分页的脚本。这也很好。

但是当我结合使用这些脚本时,分页将停止工作。

或者还有其他方法可以将搜索与分页结合起来?

这是我的代码:

<body>  
           <br /><br />  
           <div class="container">  
                <h3 align="center">Make Pagination using Jquery, PHP, Ajax and MySQL</h3><br />  
                <input type="text" onkeyup="showCustomer(this.value)"><br>
                <div class="table-responsive" id="txtHint">
                <div class="table-responsive" id="pagination_data">  
                </div>  
           </div>  

</body>

<script>
//script to search the db while typing 

function showCustomer(str) {

var xhttp;
  //var params = page;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "test.php?q="+str, true);
  xhttp.send();


}

</script> 

 <script> 
//script to paginate
 $(document).ready(function(){  
      load_data();  
      function load_data(page)  
      {  
           $.ajax({  
                url:"test.php",  
                method:"POST",  
                data:{page:page},  
                success:function(data){  
                     $('#pagination_data').html(data);  
                }  
           })  
      }  
      $(document).on('click', '.pagination_link', function(){  
           var page = $(this).attr("id");  
           load_data(page);  
      });  
 });  

 </script>

0 个答案:

没有答案