需要一个表列的详细视图,当它被点击时(PHP+Mysql+HTML)



我有一个从MySQL获取信息的表,但当我点击name列时,它应该会获取该名称的所有详细信息并显示在详细视图页面中。我的编辑和删除按钮可以工作,但我不知道如何在新页面中获取名称及其相关列的详细视图。请帮助我。提前谢谢。

<div class="table-responsive">
<table  class="table table-list-search  table-bordered table-striped  table-condensed ">
<div class="row">
<div class="col-md-3">
<?php $apage = array('id'=>'','name'=>'');?>
<script>var page_0 = <?php echo json_encode($apage)?></script>
<h3>
<a data="page_0" class="model_form btn btn-sm btn-danger" href="#">
<span class="glyphicon glyphicon-plus"></span> Add new record</a>
</h3>
</div>
<div class="col-md-3">
<?php $apage = array('id'=>'','name'=>'');?>
<script>var page_0 = <?php echo json_encode($apage)?></script>
<h3>
<a data="page_0" class="model_form btn btn-sm btn-danger" href="#">
<span class="glyphicon glyphicon-plus"></span> View record</a>
</h3>
</div>
</div>
<tbody>
<?php if(isset($result) && ($data_record) > 0)  : $i=1;
while ($users = mysqli_fetch_object($result)) { ?>
<tr class="<?=$users->id?>_del">
<td><?=$i;?></td>
<td><a data="<?php echo 'page_'.$users->id ?>" class="model_form " href="#"> <?=$users->name;?></a></td>
<td><?=$users->bandwidth;?></td>
<td><?=$users->connectivity;?></td>
<td><?=$users->popname;?></td>
<td><?=$users->popip;?></td>
<td><?=$users->port;?></td>
<td><?=$users->vlan;?></td>
<td><?=$users->nms;?></td>
<td>
<a href="http://maps.google.com/?q=<?=$users->latitude;?>,<?=$users->longitude;?>" target="_blank"><i class="material-icons">&#xE0C8;</i></a>
</td>
<script>var page_<?php echo $users->id ?> = <?php echo json_encode($users);?></script>
<td>
<a data="<?php echo 'page_'.$users->id ?>" class="model_form btn btn-info btn-sm" href="#"> <span class="glyphicon glyphicon-pencil"></span></a>
<a data="<?php echo  $users->id ?>" title="Delete <?php echo $users->name;?>" class="tip delete_check btn btn-info btn-sm "><span class="glyphicon glyphicon-remove"></span> </a>  
</td>
</tr>
<?php $i++; } ?>
<?php else : echo '<tr><td colspan="8"><div align="center">-------No record found -----</div></td></tr>'; ?>
<?php endif; ?>               
</tbody>
</table>
<?php
if(isset($_SESSION['flash_msg'])) :  
$message = $_SESSION['flash_msg'];
echo $error= '<div class="alert alert-success" role="alert"><span class="glyphicon glyphicon-envelope">
</span> <strong>'.$message.'</strong> </div>';
unset($_SESSION['flash_msg']);
endif;
?>
</div>
</div>
</div>
</div>
</div>  
</tbody>
</table>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','.model_form',function(){
$('#form_modal').modal({
keyboard: false,
show:true,
backdrop:'static'
});
var data = eval($(this).attr('data'));
$('#id').val(data.id);
$('#name').val(data.name);
$('#bandwidth').val(data.bandwidth);
$('#connectivity').val(data.connectivity);
$('#popname').val(data.popname);
$('#popip').val(data.popip);
$('#port').val(data.port);
$('#vlan').val(data.vlan);
$('#nms').val(data.nms);
$('#latitude').val(data.latitude);
$('#longitude').val(data.longitude);
if(data.id!=""){
$('#pop_title').html('Edit');       
}else{
$('#pop_title').html('Add');
} 
});  
$(document).on('click','.delete_check',function(){
if(confirm("Are you sure to delete data")){
var current_element = $(this);
url = "add_edit1.php";
$.ajax({
type:"POST",
url: url,
data: {ct_id:$(current_element).attr('data')},
success: function(data) { //location.reload(); 
$('.'+$(current_element).attr('data')+'_del').animate({ backgroundColor: "#003" }, "slow").animate({ opacity: "hide" }, "slow");
} 
});
}
});     
});
</script>
<!-- Form modal -->
<div id="form_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i><span id="pop_title">ADD</span> POP INFORMATION</h4>
</div>
<!-- Form inside modal -->
<form method="post" action="add_edit1.php" id="cat_form">
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>name :</label>
<input type="text" name="name" id="name"  class="form-control required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>bandwidth :</label>
<input type="text" name="bandwidth" id="bandwidth" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>connectivity :</label>
<input type="text"  name="connectivity" id="connectivity" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>popname:</label>
<input type="text"  name="popname" id="popname" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>popip:</label>
<input type="text"  name="popip" id="popip" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>port:</label>
<input type="text" name="port" id="port" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>vlan:</label>
<input type="text" name="vlan" id="vlan" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>nms:</label>
<input type="text" name="nms" id="nms" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>Latitude:</label>
<input type="text"  name="latitude" id="latitude" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>Longitude:</label>
<input type="text"  name="longitude" id="longitude" class="form-control required" >
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<span id="add">
<input type="hidden" name="id" value="" id="id">
<button type="submit" name="form_data" class="btn btn-primary">Submit</button>
</span>
</div>
</form>
</div>
</div>
</div>
<!-- /form modal -->
<script type="text/javascript">
var $table = $('table');
$table.bootstrapTable({ 
search: true,
pagination: true,
buttonsClass: 'primary',
minimumCountColumns: 2,
columns: [{
field: 'id',
title: 'ID',
sortable: true,
},{
field: 'name',
title: 'Name',
sortable: true,
},

{
field: 'bandwidth',
title: 'BANDWIDTH',
sortable: true,  
},
{
field: 'connectivity',
title: 'CONNECTIVITY',
sortable: true,  
},
{
field: 'popname',
title: 'SWITCH NAME',
sortable: true,  
},
{
field: 'popip',
title: 'SWITCH IP',
sortable: true,  
},
{
field: 'port',
title: 'PORT NAME',
sortable: true,  
},
{
field: 'vlan',
title: 'VLAN',
sortable: true,  
},  
{
field: 'nms',
title: 'NMS',
sortable: true,
},
{

title: 'OPERATIONS'   ,
},
{
field: 'operation'    ,
title: 'Action'   ,
},
],
});
</script>

**add_edit1.php*

<?php 
session_start();
include("config.php");
if(isset($_POST['form_data'])) :    
$user_name = $db->real_escape_string($_POST['name']);
$user_bandwidth = $db->real_escape_string($_POST['bandwidth']);
$user_connectivity = $db->real_escape_string($_POST['connectivity']);
$user_popname = $db->real_escape_string($_POST['popname']);
$user_popip = $db->real_escape_string($_POST['popip']);
$user_port = $db->real_escape_string($_POST['port']);
$user_vlan = $db->real_escape_string($_POST['vlan']);
$user_nms = $db->real_escape_string($_POST['nms']);
$user_latitude = $db->real_escape_string($_POST['latitude']);
$user_longitude = $db->real_escape_string($_POST['longitude']);
$id = ($_POST['id']!="") ? $_POST['id'] : '';
if($id!="") :
$query = " UPDATE `illt` SET `name`= '$user_name', `bandwidth`='$user_bandwidth',`connectivity`='$user_connectivity', `popname`='$user_popname' , `popip`='$user_popip',`port`='$user_port' , `vlan`='$user_vlan' , `nms`='$user_nms', `latitude`='$user_latitude', `longitude`='$user_longitude' WHERE id=$id";
$msg = "Successfully Updated Your Record";      
else:
$query = " INSERT INTO `illt` SET `name`= '$user_name', `bandwidth`='$user_bandwidth',
`connectivity`='$user_connectivity', `popname`='$user_popname' , `popip`='$user_popip',
`port`='$user_port' , `vlan`='$user_vlan' ,  `nms`='$user_nms', `latitude`='$user_latitude', `longitude`='$user_longitude' ";    
$msg = "Successfully Inserted Your Record"; 
endif;
$sql = $db->query($query);
$_SESSION['flash_msg'] = $msg;
header("Location:illmasterlist.php");
endif;
if(isset($_POST['ct_id'])) :
$id = ($_POST['ct_id']!="") ? $_POST['ct_id'] : '';
if($id!="") :
$query = "DELETE FROM illt WHERE id =$id";
$sql = $db->query($query);
echo 1;
else :
echo 0;
endif;
else :
echo 0;
endif;
?>

单击此处的用户名<td><a data="<?php echo 'page_'.$users->id ?>" class="model_form " href="#"> <?=$users->name;?></a></td>时,您需要用户的详细视图。你把它放在一个链接里,这是第一步。下一步是将用户名放入href并重定向到另一个页面。使用$_GET,您可以从url中检索username,并使用username在DB中搜索用户。我的意思是…

//add the href to your code which will redirect to 
//new page with url detailed_view.php?john doe
<td><a href="detailed_view.php?name='.$users->name.'"data="<?php echo 'page_'.$users->id?>" 
class="model_form " href="#"> <?=$users->name;?></a></td>

创建一个名为detailed_view.php的文件(可以是任何名称,但更改它以匹配href重定向)

在该文件上使用

<?php
session_start();
include("config.php");

if(isset($_GET['name'])){
$username = $_GET['name'];
$query = "SELECT * FROM your_user_table_name WHERE name = '.$username.'";//your case table name is illt
$sql = $db->query($query);
while ($users = mysqli_fetch_object($sql)) {
echo $users->name','$users->id','$users->vlan','$users->popip;//and so on
}
}
?>

最新更新