2017-08-19 11 views
0

Ajaxの機能でフェッチされたmy mysqlの結果のソートオプションを追加する方法を見つけようとしています。 mysqlの列などで並べ替えます。以下は、ソートオプションを実装したいと思ういくつかの "th"セクションです。Ajax MYSQLの検索とソートの結果

HTMLページ

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Tool details</title> 
    <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> 
<input type="text" name="search_text" id="search_text" placeholder="Search for tool details" class="form-control" /> 
<div id="result"></div> 

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

    load_data(); 

    function load_data(query) 
    { 
     $.ajax({ 
      url:"fetch.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> 
</body> 
</html> 

そのソートは、ここでのコードを複雑避けるために、現時点で唯一のID列に追加されていないしてください。

fetch.php

<?php 
//fetch.php 
include($_SERVER['DOCUMENT_ROOT'].'/db/connect-db.php'); 

$output = ''; 
if(isset($_POST["query"])) { 
    $search = mysqli_real_escape_string($connection, $_POST["query"]); 
    $query = "SELECT * FROM tools 
       WHERE toolsn LIKE '%".$search."%' 
       OR toolcategory LIKE '%".$search."%' 
       OR tooldesc LIKE '%".$search."%' 
       OR toolpn LIKE '%".$search."%' 
       OR toolstatus LIKE '%".$search."%'"; 
} else { 
    $query = "SELECT * FROM tools ORDER BY id"; 
} 
$result = mysqli_query($connection, $query); 
//get feedback why database not working 
if (!$result) { 
    printf("Error: %s\n", mysqli_error($connection)); 
    exit(); 
} 
if(mysqli_num_rows($result) > 0) { 
    $output .= ' 
       <div class="table-responsive"> 
       <table class="table table bordered"> 
       <tr> 
       <th>Customer Name</th> 
       <th>Address</th> 
       <th>City</th> 
       <th>Postal Code</th> 
       <th>Country</th> 
       </tr>'; 
    while($row = mysqli_fetch_array($result)) { 
     $output .= '<tr> 
        <td>'.$row["tooldesc"].'</td> 
        <td>'.$row["toolcategory"].'</td> 
        <td>'.$row["toolsn"].'</td> 
        <td>'.$row["toolpn"].'</td> 
        <td>'.$row["toolstatus"].'</td> 
       </tr>'; 
    } 
    echo $output; 
}else { 
    echo 'Data Not Found'; 
} 
?> 

答えて

0

私はコードの下でオプションを並べ替え再現するために管理しているが、これは私が直接fetch.phpページにアクセスする場合にのみ機能します。 (スクリプト上で)HTMLページから詳細を取得しようとしたときに結果が表示されますが、ソート機能はありません(ハイパーリンクは機能しません) fetch.phpが親htmlページに含まれているため、 。

$query = "SELECT * FROM tools ORDER BY " . $orderBy . " " . $order; 

$ orderbyと$ orderは、直接アクセスされたページではないため$ queryにコマンドを与えません。 htmlページのスクリプトは、fetch.phpの結果を読み込みます。

fetch.php

<?php 
//fetch.php 
include($_SERVER['DOCUMENT_ROOT'].'/db/connect-db.php'); 


    $orderBy = "id"; 
    $order = "asc"; 

    if(!empty($_GET["orderby"])) { 
     $orderBy = $_GET["orderby"]; 
    } 
    if(!empty($_GET["order"])) { 
     $order = $_GET["order"]; 
    } 

    $idNextOrder = "asc"; 
    $tooldescNextOrder = "asc"; 
    $toolcategoryNextOrder = "asc"; 
    $toolsnNextOrder = "asc"; 
    $toolpnNextOrder = "asc"; 
    $toolstatusNextOrder = "asc"; 

    if($orderBy == "id" and $order == "asc") { 
     $idNextOrder = "desc"; 
    } 
    if($orderBy == "tooldesc" and $order == "asc") { 
     $tooldescNextOrder = "desc"; 
    } 
    if($orderBy == "toolcategory" and $order == "asc") { 
     $toolcategoryNextOrder = "desc"; 
    } 
    if($orderBy == "toolsn" and $order == "asc") { 
     $toolsnNextOrder = "desc"; 
    } 
    if($orderBy == "toolpn" and $order == "asc") { 
     $toolpnNextOrder = "desc"; 
    } 
    if($orderBy == "toolstatus" and $order == "asc") { 
     $toolstatusNextOrder = "desc"; 
    } 


$output = ''; 
if(isset($_POST["query"])) 
{ 
$search = mysqli_real_escape_string($connection, $_POST["query"]); 
$query = " 
    SELECT * FROM tools 
    WHERE toolsn LIKE '%".$search."%' 
    OR toolcategory LIKE '%".$search."%' 
    OR tooldesc LIKE '%".$search."%' 
    OR toolpn LIKE '%".$search."%' 
    OR toolstatus LIKE '%".$search."%' 
"; 
} 
else 
{ 
//$query = "SELECT * FROM tools"; 
$query = "SELECT * FROM tools ORDER BY " . $orderBy . " " . $order; 

} 
$result = mysqli_query($connection, $query); 
//get feedback why database not working 
if (!$result) { 
    printf("Error: %s\n", mysqli_error($connection)); 
    exit(); 
} 
if(mysqli_num_rows($result) > 0) 
{ 

$output .= ' 
    <div class="table-responsive"> 
    <table class="table table bordered"> 
    <tr> 
     <th class="id"><a title="Sort by system ID" href="?orderby=id&order='.$idNextOrder.'">ID</a></th> 
     <th class="toolsn"><a title="Sort by tool serial number" href="?orderby=toolsn&order='.$toolsnNextOrder.'">Tool SN</a></th> 
     <th class="toolpn"><a title="Sort by tool part number" href="?orderby=toolpn&order='.$toolpnNextOrder.'">Tool PN</a></th> 
     <th class="toolcategory"><a title="Sort by tool category" href="?orderby=toolcategory&order='.$toolcategoryNextOrder.'">Tool category</a></th>  
     <th class="tooldesc"><a title="Sort by tool description" href="?orderby=tooldesc&order='.$tooldescNextOrder.'">Tool description</a></th>  
     <th class="toolstatus"><a title="Sort by tool status" href="?orderby=toolstatus&order='.$toolstatusNextOrder.'">Tool status</a></th> 
     <th class="options"></th> 
    </tr> 
'; 
while($row = mysqli_fetch_array($result)) 
{ 
    $output .= ' 
    <tr> 
    <td>'.$row["id"].'</td> 
    <td>'.$row["toolsn"].'</td> 
    <td>'.$row["toolpn"].'</td> 
    <td>'.$row["toolcategory"].'</td> 
    <td>'.$row["tooldesc"].'</td> 
    <td>'.$row["toolstatus"].'</td> 
    <td></td> 
    </tr> 
    '; 
} 
echo $output; 
} 
else 
{ 
echo 'Data Not Found'; 
} 

?> 
関連する問題