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>

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

3 个答案: