使用 jQuery 搜索分页结果答案

【问题标题】：Search paginated results with jQuery使用 jQuery 搜索分页结果
【发布时间】：2016-10-17 19:39:26
【问题描述】：

我开发了一个单页应用程序，可以显示数据库表中的所有条目。结果被分页并在不刷新整个页面的情况下呈现。我的代码的html部分是这样的：

<p>Search by Last Name:</p>
  <div class="form-group">  
    <div class="input-group">
        <form method="post">
          <input type="text" name="search" id="search" placeholder="Search by Last Name" class="form-control" />
          <input type="submit" id="submitbtn"/>
        </form>
    </div>  
  </div> 
<div class="table-responsive" id="pagination_data">
</div>

jQuery 代码如下：

<script>  
 $(document).ready(function(){

      load_data();

      function load_data(page,search)  
      {  
           $.ajax({  
                url:"pagination.php",  
                method:"POST",  
                data:{page:page, search:search},  
                success:function(data){  
                     $('#pagination_data').html(data);  
                }  
           });  
      }  
      $(document).on('click', '.pagination_link', function(){  
           var page = $(this).attr("id");  
           load_data(page);  
      });
      $(document).on('click', '#submitbtn', function(){  
           var page = $(this).attr("id");
           var search = $('#search').val();
           load_data(page,search);  
      });

 });
 </script>

我希望能够在不切换到另一个页面的情况下搜索结果。目前，分页工作正常。我只是想找到一种方法将#search 的值发送到服务器端并在查询中使用它。我上面用来发送#search 值的方式不起作用。

【问题讨论】：

当你点击#submitbtn 时，你能恢复#search 的价值吗？
#search 的值永远不会到达服务器。如果我回显 $_POST["search"]，它是空的。
我不知道 php 但是，如果你可以在 js 端达到#search 值，直到通过 ajax 发布它，那么我认为是服务器端的问题。
如果我绕过 Jquery，我可以在服务器端访问 #search 值。我认为我的 jquery 实现有问题
在我看来，这在您当前的方法中是不可能的。 jQuery 只能搜索 DOM 中的元素。您现在所做的是每次单击分页链接时将单页结果插入 DOM。要搜索所有项目，您需要获取pagination.php 中的每个结果并将结果格式化为单独的<div>s，然后使用css 设置您要查看的当前页面div 的visibility 属性

标签： jquery search jquery-pagination

【解决方案1】：

您的提交按钮是一个表单输入，我不相信click 事件正在触发。如果你改变：

$(document).on('click', '#submitbtn', function(){

到

$(document).on('submit', '#submitbtn', function(e){

您应该会看到函数触发。请注意，我在匿名函数中添加了参数e。这将允许您在函数内执行e.preventDefault();，这将停止默认表单提交。通常，这会将浏览器重定向到提交的action 属性中指向的地址

【讨论】：