將PHP和AJAX搜索結果放到表格中

Question

我正在嘗試製作一個webapp，並且我從另一個站點使用了php，ajax和mysql搜索功能。

它目前允許我搜索數據庫並返回我想要的。我遇到的唯一問題是它將結果返回到一個簡單的文本框中。我希望能夠將結果返回到表格中。

搜索只是搜索數據庫的名字，姓氏，地址等......這是我的代碼。

PHP：

<?php 

include('config.php'); 

if(isset($_GET['search_word'])) 
{ 
$search_word=$_GET['search_word']; 

$sql=mysql_query("SELECT * FROM info WHERE CONCAT(Forename,' ',Surname) LIKE '%$search_word%'or Address1 LIKE '%$search_word%' or Address2 LIKE '%$search_word%' or Postcode LIKE '%$search_word%' or DOB LIKE '%$search_word%' ORDER BY ID DESC LIMIT 20 "); 
$count=mysql_num_rows($sql); 

if($count > 0) 
{ 

while($row=mysql_fetch_array($sql)) 
{ 
$result = $row['Forename'].' '.$row['Surname'].' '.$row['DOB'].' '.$row['Address1'].' '.$row['Address2'].' '.$row['Postcode']; 
$bold_word='<b>'.$search_word.'</b>'; 
$final_msg = str_ireplace($search_word, $bold_word, $result); 
?> 

<li><?php echo $final_msg; ?></li> 
<?php 
} 
} 
else 
{ 

echo "<li>No Results</li>"; 

} 


} 
?> 

這是連接到數據庫，拉出的結果。然後，我有我的HTML等..：

腳本：

$(function() { 
//-------------- Update Button----------------- 


$(".search_button").click(function() { 
    var search_word = $("#search_box").val(); 
    var dataString = 'search_word='+ search_word; 

    if(search_word=='') 
    { 
    } 
    else 
    { 
    $.ajax({ 
    type: "GET", 
    url: "searchdata.php", 
    data: dataString, 
    cache: false, 
    beforeSend: function(html) { 

    document.getElementById("insert_search").innerHTML = ''; 

    $("#flash").show(); 
    $("#searchword").show(); 
    $(".searchword").html(search_word); 
    $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...'); 



      }, 
    success: function(html){ 
    $("#insert_search").show(); 
    $("#insert_search").append(html); 
    $("#flash").hide(); 
    // $("#MainTable").append(data); 
    if(html.length > 0) 
      { 
       $("#MainTable tr:not(:first-child)").remove(); 
      } 
      for(var i = 0; i < html.length; i++) 
      { 
       var date = new Date(html[i]["Timestamp"]*1000); 
       html[i]["Timestamp"] = date.getHours()+":"+date.getMinutes(); 
       $("#MainTable").append("<tr><td><a href='#' id='info"+data[i]["ID"]+"' data-role='button' data-theme='b' data-icon='check' data-iconpos='notext' class='id'></a></td><td>"+data[i]["Timestamp"]+"</td><td>"+data[i]["ID"]+"</td><td>"+data[i]["Forename"]+" "+data[i]["Surname"]+"</td><td class='hidden'>"+data[i]["ID"]+"</td><td>"+data[i]["DOB"]+"</td><td class='hidden'>"+data[i]["Address2"]+"</td><td class='hidden'>"+data[i]["Town"]+"</td><td class='hidden'>"+data[i]["City"]+"</td><td class='hidden'>"+data[i]["County"]+"</td><td>"+data[i]["Address1"]+"</td><td>"+data[i]["Postcode"]+"</td><td class='hidden'>"+data[i]["Phone2"]+"</td><td class='hidden'>"+data[i]["DOB"]+"</td></tr>");         
       if(data[i]["Completed"] == "1") 
       { 
        $("#MainTable tr:last-child td").addClass("lineThrough"); 
       } 
       $("#MainTable tr:last td:first a, #MainTable tr:last td:last a").button(); 

} 




    } 
}); 

    } 




    return false; 
    }); 
//---------------- Delete Button---------------- 


}); 

我已經嘗試了一些不同的東西，如改變+數據+表中的腳本的HTML或嘗試添加追加（HTML），但我沒有運氣，當我搜索時，我的表格變得沒有定義，或者完全空白。

這是我的表中的HTML：

<table data-role="table" id="MainTable" data-mode="columntoggle"> 
        <tr><th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th><th>ID Number</th><th>Name</th><th>DOB</th><th>Address</th><th>Postcode</th></tr> 
        <tr><td colspan='7'>No data currently available, connect to the internet to fetch the latest appointments.</td></tr> 
      </table>   

將不勝感激任何幫助。希望這是有道理的。

Answer 1

而是在你的PHP頁面輸出這一點：通過結果

while($row=mysql_fetch_array($sql)) 
{ 
$result = $row['Forename'].' '.$row['Surname'].' '.$row['DOB'].' '.$row['Address1'].' '.$row['Address2'].' '.$row['Postcode']; 
$bold_word='<b>'.$search_word.'</b>'; 
$final_msg = str_ireplace($search_word, $bold_word, $result); 
?> 

<li><?php echo $final_msg; ?></li> 

環在你需要的表格式輸出;如：

echo "<tr>"; 
echo "<td>".$row['Forename']."</td>"; 
echo "<td>".$row['Surname']."</td>"; 
//etc 
echo "</tr>" 

然後將您迴應並填補了含表（jQuery AJAX）類似於：

.done(function(response) { 
    $('#MainTable').html(response); 
} 

Answer 2

更改：

if($count > 0) 
{ 
    while($row=mysql_fetch_array($sql)) 
    { 
    $result = $row['Forename'].' '.$row['Surname'].' '.$row['DOB'].' '.$row['Address1'].' '.$row['Address2'].' '.$row['Postcode']; 
    $bold_word='<b>'.$search_word.'</b>'; 
    $final_msg = str_ireplace($search_word, $bold_word, $result); 
    ?> 
    <tr> 
     <td>&nbsp;</td> 
     <td><?=$row['id']?></td> 
     <td><?=$final_msg?></td> 
     <td><?=$row['address']?></td> 
     <td><?=$row['postcode']?></td> 
    </tr> 

    <?php 
    } 
} 
else 
{ 

    echo "<li>No Results</li>"; 

} 

變化在JS

$.ajax({ 
    type: "GET", 
    url: "searchdata.php", 
    data: dataString, 
    cache: false, 
    beforeSend: function(html) { 
     document.getElementById("insert_search").innerHTML = ''; 

     $("#flash").show(); 
     $("#searchword").show(); 
     $(".searchword").html(search_word); 
     $("#flash").html('<img src="ajax-loader.gif" align="absmiddle">&nbsp;Loading Results...'); 
    }, 
    success: function(html){ 
     $("#insert_search").show(); 
     $("#insert_search").append(html); 
     $("#flash").hide(); 
     $("#MainTable").append(html); //<-- append the data from the ajax 
    } 
});