Fatal编程技术网
  • javascript/
  • Javascript Ajax搜索和分页相结合

Javascript Ajax搜索和分页相结合

javascript ajax

Javascript Ajax搜索和分页相结合,javascript,ajax,Javascript,Ajax,我正在制作一个页面，在那里我可以通过搜索和分页显示表中的数据，我找到了这2个教程 首先是搜索： 第二个是分页：` 我花了几个小时试图把它们结合起来，但我做不到。搜索正在工作，但当我单击分页按钮（1,2,3,4）时，它会重置为相同的数据。先生，请您给我解释一下或者告诉我怎么做 admin.php <!DOCTYPE html> <html> <head> <title>Webslesson Tutor

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

首先是搜索：

第二个是分页：`

我花了几个小时试图把它们结合起来，但我做不到。搜索正在工作，但当我单击分页按钮（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>


WebLesson教程|使用jQuery DatePicker进行Ajax PHP MySQL日期范围搜索



使用jQuery DatePicker进行Ajax PHP MySQL日期范围搜索
订单数据

搜寻




身份证件
客户名称
项目
价值
订购日期
$（文档）.ready（函数（）{
加载_数据（）；
功能加载\u数据（第页）
{  
$.ajax（{
url:“search.php”，
方法：“张贴”，
数据：{page:page}，
成功：功能（数据）
{  
$（'#order_table'）.html（数据）；
}
})  
}  
$（文档）.on（'click'，'.pagination_link'，function（）{
var page=$（this.attr（“id”）；
加载_数据（第页）；
});  
});  
$（文档）.ready（函数（）
{
加载_数据（）；
函数加载\u数据（查询）
{
$.ajax
({
url:“search.php”，
方法：“张贴”，
数据：{query:query}，
成功：功能（数据）
{
$（'#order_table'）.html（数据）；
}
});
}
$（“#搜索_文本”）.keyup（函数（）
{
var search=$（this.val（）；
如果（搜索！=''）
{
加载_数据（搜索）；
}
其他的
{
加载_数据（）；
}
}); 
});
$（文档）.ready（函数（）{
$.datepicker.setDefaults（{
日期格式：“yy-mm-dd”
});  
$（函数（）{
$（“#自#日期”）.datepicker（）；
$（“#截止日期”）.datepicker（）；
});  
$（“#过滤器”）。单击（函数（）{
var from_date=$（“#from_date”）.val（）；
var to_date=$（“#to_date”）.val（）；
如果（从日期！=''到日期！=''）
{  
$.ajax（{
url:“filter.php”，
方法：“张贴”，
数据：{from_date:from_date，to_date:to_date}，
成功：功能（数据）
{  
$（'#order_table'）.html（数据）；
}  
});  
}  
其他的
{  
警报（“请选择日期”）；
}  
});  
});
search.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;  





 ?>
经过这么多小时。。所以noob。。我想我明白了

      <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>


$（文档）.ready（函数（）{
加载_数据（）；
功能加载\u数据（第页）
{  
var searchtext=$（'#search_text'）.val（）；
$.ajax（{
url:“search.php”，
方法：“张贴”，
数据：{page:page，search:searchtext}，
成功：函数（数据）{
$（'#order_table'）.html（数据）；
}  
})  
}  
$（文档）.on（'click'，'.pagination_link'，function（）{
var page=$（this.attr（“id”）；
加载_数据（第页）；
});  
});  
$（文档）.ready（函数（）{
加载_数据（）；
功能加载\u数据（第页）
{  
var searchtext=$（'#search_text'）.val（）；
$.ajax（{
url:“search.php”，
方法：“张贴”，
数据：{page:page，search:searchtext}，
成功：函数（数据）{
$（'#order_table'）.html（数据）；
}  
})  
}  
$（文档）.on（'click'，'.pagination_link'，function（）{
var page=$（this.attr（“id”）；
加载_数据（第页）；
});  
});  
$（文档）.ready（函数（）
{
$（“#搜索_文本”）.keyup（函数（）
{
var txt=$（“#搜索_文本”）.val（）；
如果（txt！=''）
{
$.ajax（{
url:“search.php”，
方法：“张贴”，
数据：{search:txt}，
成功：功能（数据）
{  
$（'#order_table'）.html（数据）；
}  
});  
}
});
});
经过这么多小时。。所以noob。。我想我明白了

      <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>


$（文档）.ready（函数（）{
L