如何使用ajax在地址欄中顯示選定的表格行ID

Question

我有下面的腳本，它將與ajax相同的頁面中選定的表格行的詳細信息加載到div中。

$('.positiontitle-link').click(
    function(){ 
    var durl = $(this).attr('ref'); 
    $('#details').load(durl) 
} 
) 

這是我的表，它有兩列。第一列用於列出MySQL數據庫中的作業，第二列用於查看選定行的完整詳細信息。

<table class="table1" width="100%" cellpadding="0" cellspacing="0" style="height: 100%; z-index:1; top:0; position: absolute;"> 

    <tr> 
    <td width="30%" style=" min-width:40px;padding:0; background-color:rgba(255, 255, 255, 0.9); height: 100%; bottom: 0; top:0;" valign="top"> 
    <div style="margin: 0; padding: 0; overflow-x:hidden; height: 100%; position: inherit; bottom: 0; top:0;"> 
    <?php 
    require "module/call.php"; 
    ?> 
</div> 

</td> 
<td width="60%" style="min-width:40px;padding:0; background-color:rgba(255, 255, 255, 0.9); height: 100%; bottom: 0; top:0;" valign="top"><div id="details" style="overflow:auto; width:100%; border-left-width: thin; border-right-width: 0; border-top-width: thin; border-bottom-width: 0; height: 100%; bottom: 0; top:0;"></div></td> 


    <td width="20%" style="padding:0;">&nbsp;</td> 
    </tr> 
</table> 

這是imageof表

這是call.php碼

<?php 

$result = mysqli_query($conn,"SELECT * FROM job where approved='1' ORDER BY `CreatedTime` DESC"); 

echo "<table id='maintable' class='table-fill' border='0' cellpadding='0' cellspacing='0'> 
<tr> 
<th position='fixed' overflow='hidden' width='10%'>Job Title</th> 
<th position='fixed' width='5%'>Company Name</th> 
<th width='5%'>Closing Date</th> 
</tr>"; 

while($row = mysqli_fetch_array($result)) 
{ 
     if (strlen($row['positiontitle']) > 20) $row['positiontitle'] = substr($row['positiontitle'], 0, 60) . "..."; 
     echo "<tr onclick='get_data(123)' ref='job.details.php?id=".$row['id']."' target='content' class='positiontitle-link'>"; 
     echo "<td data-id='<?php echo $row['id']?>'><font style='text-shadow: none;'>" . $row['positiontitle'] . "</font></a></td>"; 
     echo "<td data-id='<?php echo $row['id']?>'>" . $row['companyname'] . "</td>"; 
     echo "<td data-id='<?php echo $row['id']?>'>" . $row['closingdate'] . "</td>"; 
     echo "</tr>"; 
    } 

echo "</table>"; 

mysqli_close($conn); 
?> 

，這是DETA ils.php碼

<?php 

    $result = mysqli_query($conn,"SELECT * FROM job WHERE id = '".$_GET['id']."' ORDER BY `CreatedTime` DESC"); 

    $jobdetails = mysqli_fetch_assoc($result); 

    echo ''.$jobdetails['positiontitle'].'';?> 
    </title> 


</br> 


<div style="width:100%; margin-top:-20px;"> 

<!-------------------------------------------Start of Right Sidebar----------------------------------------------------------------> 
    <div style="float:left; font-size: 14px; width:20%;"class="ara-form"> 
    <header style="padding-top: 25px; font-size: 14px; color:#666666; padding-left:7px; padding-right:7px;"> 
    <?php 
    $result = mysqli_query($conn,"SELECT * FROM job WHERE id = '".$_GET['id']."' ORDER BY `CreatedTime` DESC"); 

    $jobdetails = mysqli_fetch_assoc($result); 

    echo '<strong>Job Title</strong><hr class="style-six"> '.$jobdetails['positiontitle'].'</p></br>'; 
    echo '<strong>Company Name</strong><hr class="style-six"> '.$jobdetails['companyname'].'</p></br>'; 
    echo '<strong>Location</strong><hr class="style-six"> '.$jobdetails['location'].'</p></br>'; 
    echo '<strong>Closing Date</strong><hr class="style-six"> '.$jobdetails['closingdate'].'</p></br>'; 
    echo '<strong>Number of Vacancy</strong><hr class="style-six"> '.$jobdetails['numberofvacancy'].'</p></br>'; 
    echo '<strong>Job Category</strong><hr class="style-six"> '.$jobdetails['jobcategory'].'</p></br>'; 
    echo '<strong>Duration</strong><hr class="style-six">'.$jobdetails['duration'].'</p></br>'; 
    echo '<strong>Employment Type</strong><hr class="style-six"> '.$jobdetails['employmenttype'].'</p></br>'; 
    echo '<strong>Salary</strong><hr class="style-six"> '.$jobdetails['salary'].'</p></br>'; 
    echo '<strong>Timing</strong><hr class="style-six"> '.$jobdetails['timing'].'</p></br>'; 
    echo '<strong>Nationality</strong><hr class="style-six"> '.$jobdetails['nationality'].'</p></br>'; 
    echo '<strong>Gender</strong><hr class="style-six">'.$jobdetails['gender'].'</p></br>'; 
    echo '<strong>Experience</strong><hr class="style-six">'.$jobdetails['experience'].'</p></br>'; 
    echo '<strong>Education</strong><hr class="style-six"> '.$jobdetails['education'].'</p></br>'; 
    echo '<strong>Gender</strong><hr class="style-six"> '.$jobdetails['gender'].'</p></br>'; 
    echo '<strong>Gender</strong><hr class="style-six"> '.$jobdetails['gender'].'</p></br>'; 
?> 
</header> 


</div> 
<!---------------------------------------------End of Right Sidebar------------------------------------------->  

<div style="float:left; font-size: 14px; width:80%;" class="ara-form"> 
    <fieldset style="font-size: 14px; color:#666666;"> 




<!-------------------------------------------------Start Time viewed Button------------------------------------------------>  
    <div style="width:100px; float:right; padding-left:2px; padding-top: 10px;"> 

    <?php 
    include "module/button/job.views.php"; 
    ?> 

    </div> 
<!---------------------------------------------------End Time viewed Button------------------------------------------------->  





<!-----------------------------------------------Start Main Content----------------------------------------------->  
    <?php 
    echo '<p><strong>Company Background</strong><hr class="style-six"> '.$jobdetails['background'].'</p></br>'; 
    echo '<p><strong>Job Summary</strong><hr class="style-six"> '.$jobdetails['summary'].'</p></br>'; 
    echo '<p><strong>Job Duties and Responsibilities</strong><hr class="style-six"> '.$jobdetails['duty'].'</p></br>'; 
    echo '<p><strong>Qualification</strong><hr class="style-six"> '.$jobdetails['qualification'].'</p></br>'; 
    echo '<p><strong>Skills</strong><hr class="style-six"></br> '.$jobdetails['skill'].'</p></br>'; 
    echo '<p><strong>Submission Guideline</strong><hr class="style-six"> '.$jobdetails['submission'].'</p></br>'; 
    echo '<p><strong>Words to search this job</strong><hr class="style-six"> '.$jobdetails['search'].'</p></br>'; 
    ?> 
<!-------------------------------------------------End Main Content-----------------------------------------------> 


    </fieldset></div> 

我的問題是

1 - 我想顯示在地址欄中選定行ID

2 - 我想表明unclicked.php在details div當沒有選中行時

Answer 1

1. 如果你想改變第地址欄而不刷新頁面，則需要使用HTML5 History API或hashbang URL。

   • HTML5歷史API：這將允許你切換到任何你喜歡的地址欄的內容，但瀏覽器的支持是limited。示例如下： history.pushState(null, "", "/test"); 這會將頁面URL更改爲yoursite.com/test。 您可以使用它向URL添加一個與行有關的擴展名，例如。 yoursite.com/table/row/20。 請參閱here瞭解API如何工作的更深入的解釋。

   • Hashbang URL：這是一個不太乾淨的解決方案，但稍微簡單一些，可以在所有瀏覽器上運行。您的網址看起來像yoursite.com/table#row20。 （如果您在頁面網址中已有#，則此功能無效）。只需撥打window.location = "#row20"即可將#row20添加到當前頁面的網址。

如果你打算在選擇一個新的行更改URL，那麼你也應該檢查在頁面加載的URL，如果需要預選一行。例如。請求yoursite.com/table#row20將返回已選擇行20的頁面。

1. $('#details').load('path/to/unclicked.php')會將文件的內容加載到div中。如果您希望在頁面加載時發生這種情況，只需將其打包至$(document).ready()。如果用戶能夠取消選擇所有行，只需再次發出AJAX請求。