如何使用ajax在地址栏中显示选定的表行ID

时间：2014-10-01 06:29:12

标签： php jquery mysql sql ajax

我在下面的脚本中使用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>

这是表格的图像 enter image description here

这是 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

1 个答案:

答案 0 :(得分：0)

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

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

    • Hashbang网址：这是一个不太干净的解决方案，但有点简单，适用于所有浏览器。您的网址将显示为yoursite.com/table#row20。 （如果页面网址中已有#，则无效。只需致电window.location = "#row20"即可将#row20添加到当前网页网址。

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

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