Question

我创建了一个分别工作的搜索系统和分类系统。如果有更好的系统更好的系统策略，我将如何使它们在同一页面上的同一查询上运行。

这里是分拣系统

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

有没有比这两个更好的方法呢？

我并不是真的想单独设置它们，而是尝试仅在排序脚本下设置搜索脚本，但这没用。

Answer 1

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

查询您的数据库；
创建HTML表；
使用jquery运行DataTables

js代码：

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

Answer 2

您必须合并两个查询，将数据发布到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" />

您的Javascript：

查找是否存在选定的排序列并触发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 )
})

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

$('.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值...

Ajax和jQuery结合了排序和搜索

2 个答案: