结合排序和搜索的Ajax和jQuery_Jquery_Ajax_Search

结合排序和搜索的Ajax和jQuery

jquery ajax search

结合排序和搜索的Ajax和jQuery,jquery,ajax,search,Jquery,Ajax,Search,我创建了一个搜索系统和一个排序系统，这两个系统都可以单独工作。如果有更好的策略来实现更好的系统，我会如何让他们在同一个页面上处理同一个查询呢？我洗耳恭听这是分拣系统 <?php //lagra.php $connect = mysqli_connect('localhost', 'root', '', 'fiberdb'); $query = "SELECT * FROM skickform ORDER BY form_id DESC"; $result = my

我创建了一个搜索系统和一个排序系统，这两个系统都可以单独工作。如果有更好的策略来实现更好的系统，我会如何让他们在同一个页面上处理同一个查询呢？我洗耳恭听

这是分拣系统

<?php  
 //lagra.php  
 $connect = mysqli_connect('localhost', 'root', '', 'fiberdb');  
 $query = "SELECT * FROM skickform ORDER BY form_id DESC";  
 $result = mysqli_query($connect, $query);  
 ?>  
 <!DOCTYPE html>  
 <html>  
      <head>  

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
      </head>  
      <body>  
      <div class="form-group">
    <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>
   </div>
           <br />            


                <div class="table-responsive" id="skickform">  
                     <table class="table table-bordered">  
                          <tr>  
                               <th><a class="column_sort" id="form_id" data-order="desc" href="#">ID</a></th>  
                               <th><a class="column_sort" id="skickLE" data-order="desc" href="#">Levrantör</a></th>  
                               <th><a class="column_sort" id="skickHH" data-order="desc" href="#">Hastighet</a></th>  
                               <th><a class="column_sort" id="skickAT" data-order="desc" href="#">Avtalstid</a></th>  
                               <th><a class="column_sort" id="skickGA" data-order="desc" href="#">Gatuadress</a></th>
                               <th><a class="column_sort" id="skickKN" data-order="desc" href="#">Kundnamn</a></th>  
                          </tr>  
                          <?php  
                          while($row = mysqli_fetch_array($result))  
                          {  
                          ?>  
                          <tr>  
                               <td><?php echo $row["form_id"]; ?></td>  
                               <td><?php echo $row["skickLE"]; ?></td>  
                               <td><?php echo $row["skickHH"]; ?></td>  
                               <td><?php echo $row["skickAT"]; ?></td>  
                               <td><?php echo $row["skickGA"]; ?></td>
                               <td><?php echo $row["skickKN"]; ?></td>  
                          </tr>  
                          <?php  
                          }  
                          ?>  
                     </table>  

           </div>  
           <br />  
      </body>  
 </html>


搜索

第二部分

 <?php  
 //sort.php  
 $connect = mysqli_connect("localhost", "root", "", "fiberdb");  
 $output = '';  
 $order = $_POST["order"];  
 if($order == 'desc')  
 {  
      $order = 'asc';  
 }  
 else  
 {  
      $order = 'desc';  
 } 
$query = "SELECT * FROM skickform ORDER BY ".$_POST["column_name"]." ".$_POST["order"]."";
$result = mysqli_query($connect, $query);
$output .= '
<table class="table table-bordered">
            <tr>
                <th><a class="column_sort" id="form_id" data-order="'.$order.'" href="#">ID</a></th>
                <th><a class="column_sort" id="skickLE" data-order="'.$order.'" href="#">Levrantör</a></th>
                <th><a class="column_sort" id="skickHH" data-order="'.$order.'" href="#">Hastighet</a></th>
                <th><a class="column_sort" id="skickAT" data-order="'.$order.'" href="#">Avtalstid</a></th>
                <th><a class="column_sort" id="skickGA" data-order="'.$order.'" href="#">Gatuadress</a></th>
                <th><a class="column_sort" id="skickKN" data-order="'.$order.'" href="#">Kundnamn</a></th>

            </tr>

            ';  
            while($row = mysqli_fetch_array($result))  
            {  
                 $output .= '  
                 <tr>  
                      <td>' . $row["form_id"] . '</td>  
                      <td>' . $row["skickLE"] . '</td>  
                      <td>' . $row["skickHH"] . '</td>  
                      <td>' . $row["skickAT"] . '</td>  
                      <td>' . $row["skickGA"] . '</td>
                      <td>' . $row["skickKN"] . '</td>  
                 </tr>  
                 ';  
            }  
            $output .= '</table>';  
            echo $output;  
            ?>

这是搜索系统

       <div class="form-group">
    <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>
   </div>
           <br />  



<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "fiberdb");
$output = '';
if(isset($_POST["query"]))
{
 $search = mysqli_real_escape_string($connect, $_POST["query"]);
 $query = "
  SELECT * FROM skickform 
  WHERE form_id LIKE '%".$search."%'
  OR skickLE LIKE '%".$search."%' 
  OR skickHH LIKE '%".$search."%' 
  OR skickAT LIKE '%".$search."%' 
  OR skickGA LIKE '%".$search."%' 
  OR skickKN LIKE '%".$search."%'
 ";
}
else
{
 $query = "
  SELECT * FROM skickform ORDER BY form_id
 ";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '
  <div class="table-responsive">
   <table class="table table bordered">
    <tr>
    <th>ID</th>
     <th>Levrantör</th>
     <th>Hastighet</th>
     <th>Avtalstid</th>
     <th>Gatuadress</th>
     <th>Kundnamn</th>
    </tr>
 ';
 while($row = mysqli_fetch_array($result))
 {
  $output .= '
   <tr>
    <td>'.$row["form_id"].'</td>
    <td>'.$row["skickLE"].'</td>
    <td>'.$row["skickHH"].'</td>
    <td>'.$row["skickAT"].'</td>
    <td>'.$row["skickGA"].'</td>
    <td>'.$row["skickKN"].'</td>
   </tr>
  ';
 }
 echo $output;
}
else
{
 echo 'Data Not Found';
}

?>

 <script>  
     $(document).ready(function(){  
          $(document).on('click', '.column_sort', function(){  
               var column_name = $(this).attr("id");  
               var order = $(this).data("order");  
               var arrow = '';  
               //glyphicon glyphicon-arrow-up  
               //glyphicon glyphicon-arrow-down  
               if(order == 'desc')  
               {  
                    arrow = '&nbsp;<span class="glyphicon glyphicon-arrow-down"></span>';  
               }  
               else  
               {  
                    arrow = '&nbsp;<span class="glyphicon glyphicon-arrow-up"></span>';  
               }  
               $.ajax({  
                    url:"sort.php",  
                    method:"POST",  
                    data:{column_name:column_name, order:order},  
                    success:function(data)  
                    {  
                         $('#skickform').html(data);  
                         $('#'+column_name+'').append(arrow);  
                    }  

               })  
          });  
     });  
     </script>  
     <script>
    $(document).ready(function(){

     load_data();

     function load_data(query)
     {
      $.ajax({
       url:"sort.php",
       method:"POST",
       data:{query:query},
       success:function(data)
       {
        $('#result').html(data);
       }
      });
     }
     $('#search_text').keyup(function(){
      var search = $(this).val();
      if(search != '')
      {
       load_data(search);
      }
      else
      {
       load_data();
      }
     });
    });
    </script>


搜索

搜索系统的第二部分

       <div class="form-group">
    <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>
   </div>
           <br />  



<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "fiberdb");
$output = '';
if(isset($_POST["query"]))
{
 $search = mysqli_real_escape_string($connect, $_POST["query"]);
 $query = "
  SELECT * FROM skickform 
  WHERE form_id LIKE '%".$search."%'
  OR skickLE LIKE '%".$search."%' 
  OR skickHH LIKE '%".$search."%' 
  OR skickAT LIKE '%".$search."%' 
  OR skickGA LIKE '%".$search."%' 
  OR skickKN LIKE '%".$search."%'
 ";
}
else
{
 $query = "
  SELECT * FROM skickform ORDER BY form_id
 ";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
 $output .= '
  <div class="table-responsive">
   <table class="table table bordered">
    <tr>
    <th>ID</th>
     <th>Levrantör</th>
     <th>Hastighet</th>
     <th>Avtalstid</th>
     <th>Gatuadress</th>
     <th>Kundnamn</th>
    </tr>
 ';
 while($row = mysqli_fetch_array($result))
 {
  $output .= '
   <tr>
    <td>'.$row["form_id"].'</td>
    <td>'.$row["skickLE"].'</td>
    <td>'.$row["skickHH"].'</td>
    <td>'.$row["skickAT"].'</td>
    <td>'.$row["skickGA"].'</td>
    <td>'.$row["skickKN"].'</td>
   </tr>
  ';
 }
 echo $output;
}
else
{
 echo 'Data Not Found';
}

?>

 <script>  
     $(document).ready(function(){  
          $(document).on('click', '.column_sort', function(){  
               var column_name = $(this).attr("id");  
               var order = $(this).data("order");  
               var arrow = '';  
               //glyphicon glyphicon-arrow-up  
               //glyphicon glyphicon-arrow-down  
               if(order == 'desc')  
               {  
                    arrow = '&nbsp;<span class="glyphicon glyphicon-arrow-down"></span>';  
               }  
               else  
               {  
                    arrow = '&nbsp;<span class="glyphicon glyphicon-arrow-up"></span>';  
               }  
               $.ajax({  
                    url:"sort.php",  
                    method:"POST",  
                    data:{column_name:column_name, order:order},  
                    success:function(data)  
                    {  
                         $('#skickform').html(data);  
                         $('#'+column_name+'').append(arrow);  
                    }  

               })  
          });  
     });  
     </script>  
     <script>
    $(document).ready(function(){

     load_data();

     function load_data(query)
     {
      $.ajax({
       url:"sort.php",
       method:"POST",
       data:{query:query},
       success:function(data)
       {
        $('#result').html(data);
       }
      });
     }
     $('#search_text').keyup(function(){
      var search = $(this).val();
      if(search != '')
      {
       load_data(search);
      }
      else
      {
       load_data();
      }
     });
    });
    </script>


$（文档）.ready（函数（）{
$（document）.on（'click'，'.column_sort'，function（）{
var column_name=$（this.attr（“id”）；
变量顺序=$（此）.data（“顺序”）；
var-arrow=''；
//字形图标字形图标向上箭头
//字形图标字形图标向下箭头
如果（顺序='desc'）
{  
箭头=''；
}  
其他的
{  
箭头=''；
}  
$.ajax（{
url:“sort.php”，
方法：“张贴”，
数据：{列名称：列名称，顺序：顺序}，
成功：功能（数据）
{  
$（'#skickform'）.html（数据）；
$（“#”+列名称+”）。追加（箭头）；
}  
})  
});  
});  
$（文档）.ready（函数（）{
加载_数据（）；
函数加载\u数据（查询）
{
$.ajax({
url:“sort.php”，
方法：“张贴”，
数据：{query:query}，
成功：功能（数据）
{
$（'#result'）.html（数据）；
}
});
}
$（“#搜索_文本”）.keyup（函数（）{
var search=$（this.val（）；
如果（搜索！=''）
{
加载_数据（搜索）；
}
其他的
{
加载_数据（）；
}
});
});

有没有比同时使用这两个更好的方法

我并没有真正考虑单独设置它们，我只是尝试在排序脚本下设置搜索脚本，但没有成功。

您可以使用。如果需要，它使用jQuery和bootstrap3/4。其主要思想是：

查询数据库
创建HTML表格
使用jquery运行数据表

js代码：

<script>
    $(document).ready(function() {
         $('#yourTable').DataTable();
    });
</script>


$（文档）.ready（函数（）{
$（“#yourTable”）.DataTable（）；
});

您必须将这两个查询组合在一起，当您将数据发布到php脚本时，脚本应该发送排序和搜索变量

例如：您的HTML：

<a class="column_sort" id="form_id" data-order="ASC" href="#">ID</a></th>
<input type="text" name="search_text" id="search_text" placeholder="Search by Customer Details" class="form-control" />

设置选定的排序列并触发ajax函数

$('#search_text').keyup(function(){
    var selected = $('.selected');
    var column_name='',order='';
    if(selected.length>0){
        column_name = selected.attr("id");
        order = selected.data("order");
    }
    var query = $('#search_text').val()
    queryPost( column_name, order, query )
})

$('.column_sort').on('click', function(){
    var selected = $(this);
    selected.addClass('selected')
    var column_name = selected.attr("id");
    var order = selected.data("order");
    var query = $('#search_text').val()
    queryPost( column_name, order, query )
});

function queryPost( column_name, order, query ){
    $.ajax({
        url:"sort.php",
        method:"POST",
        data:{ query:query, column_name:column_name, order:order },
        success:function(data){
            $('#result').html(data);
        }
    });
}

在sort.php中，您必须结合查询和验证POST值