个人中心
gpt4 book ai didi

javascript - Ajax 搜索和分页相结合

转载 作者：行者123 更新时间：2023-11-28 04:15:17 25 4
gpt4 key购买 nike

我正在制作一个页面，可以在其中通过搜索和分页显示表格中的数据，我找到了这 2 个教程。

首先是搜索:http://www.webslesson.info/2016/03/ajax-live-data-search-using-jquery-php-mysql.html

第二个用于分页:http://www.webslesson.info/2016/08/make-pagination-using-ajax-with-jquery-php-and-mysql.html `

我尝试将它们组合几个小时，但我做不到。搜索正在工作，但是当我单击分页按钮(1、2、3、4)时，它会重置为相同的数据。请善良的先生向我解释一下或告诉我如何做。

admin.php

 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Webslesson Tutorial | Ajax PHP MySQL Date Range Search using jQuery DatePicker</title>  
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  
           <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
           <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
           <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
      </head>  
      <body>  
      <div id="result"></div>
           <br/><br />  
           <div class="container" style="width:900px;">  
                <h2 align="center">Ajax PHP MySQL Date Range Search using jQuery DatePicker</h2>  
                <h3 align="center">Order Data</h3><br /> 

                <div class="input-group">
                <span class="input-group-addon">Search</span>
                <input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />
                </div>
                <br/>
                <div class="col-md-3">  
                     <input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date" />  
                </div>  
                <div class="col-md-3">  
                     <input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date" />  
                </div>  
                <div class="col-md-5">  
                     <input type="button" name="filter" id="filter" value="Filter" class="btn btn-info" />  
                </div>  
                <div style="clear:both"></div>                 
                <br />  
                <div id="order_table">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th width="5%">ID</th>  
                               <th width="30%">Customer Name</th>  
                               <th width="43%">Item</th>  
                               <th width="10%">Value</th>  
                               <th width="12%">Order Date</th>  
                          </tr>  
                     <?php  
                     while($row = mysqli_fetch_array($result))  
                     {  
                     ?>  
                          <tr>  
                               <td><?php echo $row["order_id"]; ?></td>  
                               <td><?php echo $row["order_customer_name"]; ?></td>  
                               <td><?php echo $row["order_item"]; ?></td>  
                               <td><?php echo $row["order_value"]; ?></td>  
                               <td><?php echo $row["order_date"]; ?></td>  
                          </tr>  
                     <?php  
                     }  
                     ?>  
                     </table>  
                </div>  
                <div id="pagination_data"></div>
           </div>  
      </body>  
 </html>  

 <script>  
 $(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);  
      });  
 });  
 </script>  

<script>
$(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();
        }
    }); 
});
</script>

 <script>  
      $(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 != '' && 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");  
                }  
           });  
      });  
 </script>

搜索.php

<?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 .= '  
       <table class="table table-bordered">  
            <tr>  
                 <th width="5%">ID</th>  
                 <th width="30%">Customer Name</th>  
                 <th width="43%">Item</th>  
                 <th width="10%">Value</th>  
                 <th width="12%">Order Date</th>  
            </tr>  
    '; 


           while($row = mysqli_fetch_array($result))  
           {  
                $output .= '  
                     <tr>  
                          <td>'. $row["order_id"] .'</td>  
                          <td>'. $row["order_customer_name"] .'</td>  
                          <td>'. $row["order_item"] .'</td>  
                          <td>'. $row["order_value"] .'</td>  
                          <td>'. $row["order_date"] .'</td>  
                     </tr>  
                ';  
           }  


    $output .= '</table><br /><div align="center">';  
    $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<=$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;  





 ?>

最佳答案

经过这么多小时..所以菜鸟..我想我明白了

      <script>  
         $(document).ready(function(){  
              load_data();  
              function load_data(page)  
              {  
              var searchtext = $('#search_text').val();  

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

 <script>  
 $(document).ready(function(){  
      load_data();  
      function load_data(page)  
      {  
      var searchtext = $('#search_text').val();  

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

<script>
$(document).ready(function()
{
    $('#search_text').keyup(function()
    {
        var txt = $('#search_text').val();
        if(txt != '')
        {
            $.ajax({  
            url:"search.php",  
            method:"POST",  
            data:{search:txt},  
            success:function(data)  
            {  
               $('#order_table').html(data);  
            }  
            });  
        }

    });

});
</script>

关于javascript - Ajax 搜索和分页相结合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45924778/

25 4 0
文章推荐： javascript - 移动导航在 Ajax 加载后停止工作
文章推荐： html - 有没有办法隐藏表格中的列？
文章推荐： javascript - CSS 框阴影重叠
文章推荐： php - 如何从字符串创建 Ul 列表？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com