我有一个MySQL数据库，其中包含我的用户想要查看和排序的客户端数据。我认为完成此操作的最简单方法是将数据放入表中，并尝试使数据看起来更漂亮。我决定使用bootgrid。我从这里使用了源代码-https://www.phpflow.com/php/addedit-delete-record-using-bootgrid-php-mysql。它根据查询中的条件显示记录，并具有允许您添加，编辑或删除记录的按钮。
我能够配置和显示所需的信息。因为大多数用户只对最新的客户端记录感兴趣，并且仅对所述记录中的几个字段感兴趣，所以SQL查询根据时间戳仅提取最新的记录。因此，它不会提取每个客户的所有记录，而只会提取最新的记录。坦率地说，我采用这种特定的bootgrid格式的原因是按钮。我想使用其中一个按钮来显示所选客户端的所有记录。
截至目前，当用户查看bootgrid表时，将列出客户端名称以及来自5个其他字段的数据。如果用户想查看特定客户（以及所有字段）的所有提交的记录，我希望他们单击与客户在同一行的按钮，然后弹出另一个窗口，显示该客户的所有记录。信息-上面演示中的“编辑”按钮将打开另一个窗口，预填充指定的字段，并允许您编辑然后保存到数据库。
因为按钮已经在行的末尾，所以我取出了edit按钮的代码，并将其替换为另一个bootgrid表的代码。如果我对第二张表的查询设置为
"$sql = "SELECT * FROM `MyTable` ";"，表中的所有数据在第二个窗口中返回。这告诉我表和查询（至少对于*）有效。现在，我只需要显示特定客户端的数据。
这就是问题所在。我似乎无法弄清楚如何格式化第二个查询或查找/传递适当的变量以仅查看我单击的特定客户端。
稍微回顾一下，当我单击“编辑”按钮时，将运行第二个查询，该查询使用更改后的response.php副本（responseuser.php-我发现将查询分开的最简单方法），并且如果使用在下面的中，我的第二个bootgrid表填充-
$sql = "SELECT * FROM `MyTable` ";
或
$sql = "SELECT tt.* FROM MyTable tt INNER JOIN (SELECT client_Name, MAX(timestamp) AS MaxDateTime FROM MyTable GROUP BY client_Name) groupedtt ON tt.client_Name = groupedtt.client_Name AND tt.timestamp = groupedtt.MaxDateTime";
或
$sql = "SELECT * FROM `MyTable` WHERE client_Name = 'client_Name_here'";
我想拥有的东西-
$sql = "SELECT * FROM `MyTable` WHERE client_Name = Variable for client_Name";
如果我在查询中输入错误的代码（不必要的引号或括号），则响应始终为-“未找到结果！”。
如果输入我认为的变量应为，则响应为“正在加载...”
那么是否就像我没有使用正确的变量一样简单，或者它没有传递任何东西？
我以前从未使用过Ajax或bootgrid表，所以我不确定我想做的事情是否可行。如果没有，我总是可以走另一条路线。
显示表格的PHP文件-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Results</title>
<link rel="stylesheet" href="dist/bootstrap.min.css" type="text/css" media="all">
<link href="dist/jquery.bootgrid.css" rel="stylesheet" />
<script src="dist/jquery-1.11.1.min.js"></script>
<script src="dist/bootstrap.min.js"></script>
<script src="dist/jquery.bootgrid.min.js"></script>
</head>
<body>
<div class="container">
<div class="">
<h1>Results</h1>
<div class="col-sm-6">
<!-- <div class="well clearfix">-->
<div class="table-responsive">
<!-- <div class="pull-right"><button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
<span class="glyphicon glyphicon-plus"></span> Record</button></div></div>-->
<table id="employee_grid" class="table table-responsive table-hover table-striped" cellspacing="0" style="width: auto;" data-toggle="bootgrid">
<thead>
<tr>
<th class="span2" data-column-id="id" data-type="numeric" data-identifier="true">ID</th>
<th data-column-id="client_Name">Client Name</th>
<th data-column-id="date">Date</th>
<th data-column-id="total">Total</th>
<th data-column-id="client_Contact">Contact</th>
<th data-column-id="client_Country" >Country</th>
<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div id="edit_model" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<h1>Full Results</h1>
<?php echo $sql; ?>
<div class="col-sm-12">
<div class="container">
</div></div>
<table id="employee_grid1" class="table table-responsive table-hover table-striped" cellspacing="0">
<thead>
<tr>
<th class="span2" data-column-id="id" data-type="numeric" data-identifier="true">ID</th>
<th data-column-id="client_Name">Client Name</th>
<th data-column-id="date">Date</th>
<th data-column-id="total">Total</th>
<th data-column-id="client_Contact">Contact</th>
<th data-column-id="client_Country" >Country</th>
<th data-column-id="client_Name">Client Name</th>
<th data-column-id="date">Date</th>
<th data-column-id="total">Total</th>
<th data-column-id="client_Contact">Contact</th>
<th data-column-id="client_Country" >Country</th>
<th data-column-id="client_Name">Client Name</th>
<th data-column-id="date">Date</th>
<th data-column-id="total">Total</th>
<th data-column-id="client_Contact">Contact</th>
<th data-column-id="client_Country" >Country</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btn_edit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$( document ).ready(function() {
var grid = $("#employee_grid").bootgrid({
ajax: true,
rowSelect: true,
post: function ()
{
/* To accumulate custom parameter with the request object */
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
url: "response.php",
formatters: {
"commands": function(column, row)
{
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " +
"<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
}
}
}).on("loaded.rs.jquery.bootgrid", function()
{
/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function(e)
{
//alert("You pressed edit on row: " + $(this).data("row-id"));
var ele =$(this).parent();
var g_id = $(this).parent().siblings(':first').html();
var g_name = $(this).parent().siblings(':nth-of-type(2)').html();
console.log(g_id);
console.log(g_name);
//console.log(grid.data());//
$('#edit_model').modal('show');
if($(this).data("row-id") >0) {
// collect the data
$('#edit_id').val(ele.siblings(':first').html()); // in case we're changing the key
$('#edit_name').val(ele.siblings(':nth-of-type(2)').html());
$('#edit_salary').val(ele.siblings(':nth-of-type(3)').html());
$('#edit_age').val(ele.siblings(':nth-of-type(4)').html());
} else {
alert('Now row selected! First select row, then click edit button');
}
}).end().find(".command-delete").on("click", function(e)
{
var conf = confirm('Delete ' + $(this).data("row-id") + ' items?');
alert(conf);
if(conf){
$.post('response.php', { id: $(this).data("row-id"), action:'delete'}
, function(){
// when ajax returns (callback),
$("#employee_grid").bootgrid('reload');
});
//$(this).parent('tr').remove();
//$("#employee_grid").bootgrid('remove', $(this).data("row-id"))
}
});
});
function ajaxAction(action) {
data = $("#frm_"+action).serializeArray();
$.ajax({
type: "POST",
url: "response.php",
data: data,
dataType: "json",
success: function(response)
{
$('#'+action+'_model').modal('hide');
$("#employee_grid").bootgrid('reload');
}
});
}
$( "#command-add" ).click(function() {
$('#add_model').modal('show');
});
$( "#btn_add" ).click(function() {
ajaxAction('add');
});
$( "#btn_edit" ).click(function() {
ajaxAction('edit');
});
});
</script>
<script type="text/javascript">
$( document ).ready(function() {
var grid = $("#employee_grid1").bootgrid({
ajax: true,
rowSelect: true,
post: function ()
{
/* To accumulate custom parameter with the request object */
return {
id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
};
},
url: "responseuser.php",
formatters: {
"commands": function(column, row)
{
return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " +
"<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
}
}
}).on("loaded.rs.jquery.bootgrid", function()
{
/* Executes after data is loaded and rendered */
grid.find(".command-edit").on("click", function(e)
{
//alert("You pressed edit on row: " + $(this).data("row-id"));
var ele =$(this).parent();
var g_id = $(this).parent().siblings(':first').html();
var g_name = $(this).parent().siblings(':nth-of-type(2)').html();
console.log(g_id);
console.log(g_name);
//console.log(grid.data());//
$('#edit_model').modal('show');
if($(this).data("row-id") >0) {
// collect the data
$('#edit_id').val(ele.siblings(':first').html()); // in case we're changing the key
$('#edit_name').val(ele.siblings(':nth-of-type(2)').html());
$('#edit_salary').val(ele.siblings(':nth-of-type(3)').html());
$('#edit_age').val(ele.siblings(':nth-of-type(4)').html());
} else {
alert('Now row selected! First select row, then click edit button');
}
}).end().find(".command-delete").on("click", function(e)
{
var conf = confirm('Delete ' + $(this).data("row-id") + ' items?');
alert(conf);
if(conf){
$.post('responseuser.php', { id: $(this).data("row-id"), action:'delete'}
, function(){
// when ajax returns (callback),
$("#employee_grid1").bootgrid('reload');
});
//$(this).parent('tr').remove();
//$("#employee_grid1").bootgrid('remove', $(this).data("row-id"))
}
});
});
function ajaxAction(action) {
data = $("#frm_"+action).serializeArray();
$.ajax({
type: "POST",
url: "responseuser.php",
data: data,
dataType: "json",
success: function(response)
{
$('#'+action+'_model').modal('hide');
$("#employee_grid1").bootgrid('reload');
}
});
}
$( "#command-add" ).click(function() {
$('#add_model').modal('show');
});
$( "#btn_add" ).click(function() {
ajaxAction('add');
});
$( "#btn_edit" ).click(function() {
ajaxAction('edit');
});
});
</script>
responseuser.php
<?php
//include connection file
include_once("connection.php");
$db = new dbObj();
$connString = $db->getConnstring();
$params = $_REQUEST;
$action = isset($params['action']) != '' ? $params['action'] : '';
$empCls = new Employee($connString);
switch($action) {
default:
$empCls->getEmployees($params);
return;
}
class Employee {
protected $conn;
protected $data = array();
function __construct($connString) {
$this->conn = $connString;
}
public function getEmployees($params) {
$this->data = $this->getRecords($params);
echo json_encode($this->data);
}
function getRecords($params) {
$rp = isset($params['rowCount']) ? $params['rowCount'] : 10;
if (isset($params['current'])) { $page = $params['current']; } else { $page=1; };
$start_from = ($page-1) * $rp;
$sql = $sqlRec = $sqlTot = $where = '';
if( !empty($params['searchPhrase']) ) {
$where .=" WHERE ";
$where .=" ( employee_name LIKE '".$params['searchPhrase']."%' ";
$where .=" OR employee_salary LIKE '".$params['searchPhrase']."%' ";
$where .=" OR employee_age LIKE '".$params['searchPhrase']."%' )";
}
if( !empty($params['sort']) ) {
$where .=" ORDER By ".key($params['sort']) .' '.current($params['sort'])." ";
}
// getting total number records without any search
$sql = "SELECT * FROM info.MyTable where client_Name = ????";
$sqlTot .= $sql;
$sqlRec .= $sql;
//concatenate search sql if value exist
if(isset($where) && $where != '') {
$sqlTot .= $where;
$sqlRec .= $where;
}
if ($rp!=-1)
$sqlRec .= " LIMIT ". $start_from .",".$rp;
$qtot = mysqli_query($this->conn, $sqlTot) or die("error to fetch tot employees data");
$queryRecords = mysqli_query($this->conn, $sqlRec) or die("error to fetch employees data");
while( $row = mysqli_fetch_assoc($queryRecords) ) {
$data[] = $row;
}
$json_data = array(
"current" => intval($params['current']),
"rowCount" => 10,
"total" => intval($qtot->num_rows),
"rows" => $data // total data array
);
return $json_data;
}
}
?>