显示有关选择特定值的数据

Question

我希望创建一个布局，从数据库中获取项目/名称的列表，然后单击该列表中的名称/项目，然后显示与该名称/项目相关的信息。为此，我将页面分为两半。 前半部分具有数据列表，后半部分将显示特定数据的详细信息。 视图将是这样的：

所需数据的样本视图

我到目前为止使用的代码是：

<div class="panel-body">
<?php
    $sql="SELECT * from `profile` ";
    $result= mysqli_query($con, $sql);
    if(mysqli_num_rows($result)>0)
    {
        while($row = mysqli_fetch_assoc($result))
        {
            echo $row['firstname'];
            echo "<br>";
        }
    }
?>
</div>

<div class="col-md-9">
    <section class="tile">
        <div class="table-responsive">
            //display data here after clicking on a particular name/item
        </div>
    </section>
</div>

谁能告诉我如何将ID从左视图携带到右视图并根据它显示数据。

Answer 1

单击用户时，获取用户的ID，然后通过传递用户ID来调用ajax。

这样可以从数据库中获取数据并在您想要显示的位置显示。

给class="users"作为用户列表。

$(document).on("click",".users",function(e){          
var url = "path to php file";
var id = "id of the user.";
     $.ajax({
        url:url,
        type:'POST',
        data:{id:id}
        success:function(data){          
            $('.table-responsive').html(data);
        }
     });
 e.preventDefault(); 
 return false;
});

Answer 2

<div class="panel-body">
    <?php
    $sql="SELECT * from `profile` ";
    $result= mysqli_query($con, $sql);
    if(mysqli_num_rows($result)>0)
    {
        while($row = mysqli_fetch_assoc($result))
        {?>
            // Here, i'm assuming 'id' as primary key column. Change according to your requirement.
            <span class='ListId' data-id="<?php echo $row['id'];?>">
                <?php echo $row['firstname'];?>
            </span> 
          <?php echo "<br>";?>
        <?php }
    }?>
</div>

<div class="col-md-9">
  <section class="tile">
    <div class="table-responsive">
        <div class='ShowData'>
            //display data here after clicking on a particular name/item
        </div>
    </div>
  </section>
</div>

<script>
    $('.ListId').click(function(){
        var Id=$(this).attr('data-id');
        $.ajax({url:"Ajax_ShowDetails.php?Id="+Id,cache:false,success:function(result){
            $(".ShowData").html(result);
        }});
    });
</script>

Ajax_ShowDetails.php （创建任何名称的页面。但是，请确保如果在此处更改页面名称，则也必须在<script></script>标记中进行更改，因为两者都相关）。 在此页面中，通过'Id'获取所有详细信息。

<?php

$Id=$_GET['Id'];

Through this '$Id', fetch all required details. It will automatically sit in 'ShowData' Div.

// Write Your Query

?>

Answer 3

您可以创建数据属性来标识单击了哪个用户，然后可以将该ID用于所需的内容。

while($row = mysqli_fetch_assoc($result))
                        {
                            echo"<div class='users' data-id='".$row['id']."'>";
                            echo $row['firstname'];
                            echo"</div>"; 
                        }

并且在js中就是这样。

$(document).on("click",".users",function(e){          
var url = "getInfo.php";//your file
var id = $(this).attr("data-id");
     $.ajax({
        url:url,
        type:'POST',
        data:{id:id}
        success:function(data){          
           //you will get all infor
           $(".table-responsive").html(data);//make layout according to your requirement  
        }
     });
 e.preventDefault(); 
 return false;
});

编辑：检查其工作（单击）

 $(document).on("click",".users",function(e){ alert($(this).attr("data-id")); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='users' data-id='user123'> User 123 </div>