php - 如何使用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>

这是表格的图像

这是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);
?>

这是details.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-我想在未选择行时在 details div 中显示 unclicked.php

Answer 1

1. 如果您想更改地址栏的内容而不刷新页面，则需要使用 HTML5 History API 或 hashbang URL。

   • HTML5 History API:这将允许您将地址栏的内容更改为您喜欢的任何内容，但浏览器支持是 limited 。示例如下:
历史记录.pushState(null, "", "/test");
这会将页面 URL 更改为 yoursite.com/test。您可以使用它向 URL 添加与行相关的扩展名，例如。 yoursite.com/table/row/20。请参阅here有关 API 工作原理的更深入说明。

   • Hashbang URL:这是一个不太干净的解决方案，但更简单，并且适用于所有浏览器。您的网址将类似于 yoursite.com/table#row20。 (如果页面 URL 中已有 #，则此操作不起作用)。只需调用 window.location = "#row20" 将 #row20 添加到当前页面 URL。

如果您要在选择新行时更改 URL，那么您还应该检查页面加载时的 URL，并根据需要预选一行。例如。请求 yoursite.com/table#row20 将返回已选择第 20 行的页面。

$('#details').load('path/to/unclicked.php') 会将文件的内容加载到 div 中。如果您希望在页面加载时发生这种情况，只需将其包装在对 $(document).ready() 的调用中即可。如果用户能够取消选择所有行，只需再次发出 AJAX 请求即可。