How to show selected table row id in the address bar with ajax

I have this below script that load the selected table row details in a div in the same page with ajax.

我有下面这个脚本,用ajax在同一页面的div中加载选定的表行详细信息。

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

This is my Table where it have two column. First column used to list the jobs from MySQL database and the second used to view the selected row full details.

这是我的表,它有两列。第一列用于列出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>

This is the imageof the table

这是表格的图像

This is the call.php codes

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

and this is the details.php codes

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

My Question is

我的问题是

1- I want to show the selected row id in the address bar

1-我想在地址栏中显示所选的行ID

2- I want to show unclicked.php in the details div when no row selected

2-我想在未选择行时在详细信息div中显示unclicked.php

1 个解决方案

#1

1. If you want to change the content of the address bar without refreshing the page, you'll either need to use the HTML5 History API or a hashbang URL.

   如果要在不刷新页面的情况下更改地址栏的内容,则需要使用HTML5 History API或hashbang URL。

   • HTML5 History API: This will allow you to change the content of the address bar to whatever you like, but the browser support is limited. An example is as follows: history.pushState(null, "", "/test"); This will change the page URL to yoursite.com/test. You can use this to add a row-related extension to the URL, eg. yoursite.com/table/row/20. See here for a more in-depth explanation of how the API works.

     HTML5历史记录API:这将允许您将地址栏的内容更改为您喜欢的任何内容,但浏览器支持是有限的。一个例子如下:history.pushState(null,“”,“/ test”);这会将页面URL更改为yoursite.com/test。您可以使用它来向URL添加与行相关的扩展名,例如。 yoursite.com/table/row/20。请参阅此处以获得有关API如何工作的更深入的解释。

   • Hashbang URL: This is a less clean solution, but is somewhat simpler and will work on all browsers. Your URL will look like yoursite.com/table#row20. (If you already have a # in the page URL, this will not work). Just call window.location = "#row20" to add #row20 to the current page URL.

     Hashbang URL:这是一个不太干净的解决方案,但有点简单,适用于所有浏览器。您的网址将类似于yoursite.com/table#row20。 (如果页面URL中已有#,则无效)。只需调用window.location =“#row20”将#row20添加到当前页面URL。

If you are going to change the URL when a new row is selected, then you should also check the URL on page load and preselect a row if required. Eg. requesting yoursite.com/table#row20 would return the page with row 20 already selected.

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

2. $('#details').load('path/to/unclicked.php') will load the file's contents into the div. If you want this to occur on page load, just wrap it in a call to $(document).ready(). Simply make the AJAX request again if the user is able to deselect all rows.

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