我有一个javascript搜索栏。我的输出以表格形式显示，当我进行javascript搜索时，它会显示我的搜索结果。当我在搜索栏中搜索时，我需要我的图表也只显示搜索结果。
<body>
<?php
$colors = array('#e2431e', '#f1ca3a', '#6f9654', '#1c91c0','#4374e0', '#5c3292', '#572a1a', '#999999', '#1a1a1a','red','blue','yellow','green', 'darkgreen','pink');
//initalizing the query
$id = $_GET['id'];
$query = "SELECT * FROM new_default_reports WHERE id = '$id'";
$result = $conn->query($query);
$row = $result->fetch_assoc();
$row['sql_statement'] = stripslashes($row['sql_statement']);
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
autoOpen: false,
title: "<?php echo $row['graph_title']; echo ' - Update/Delete';?>",
width: 800,
height: 550,
zIndex:'2000000'
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
</script>
<?php
if (isset($_POST['set'])){
$query = "UPDATE new_default_reports SET sql_statement ='{$_POST['sqlst']}', x_axis ='{$_POST['x']}', y_axis = '{$_POST['y']}' where id = $id";
$result = $conn->query($query);
//header("Refresh: 0; url=previewgraphs.php?id=".$id);//not needed
$id = $_GET['id'];
$query = "SELECT * FROM new_default_reports WHERE id = '$id'";
$result = $conn->query($query);
$row = $result->fetch_assoc();
$row['sql_statement'] = stripslashes($row['sql_statement']);
}
?>
<?php
if (isset($_POST['delete'])){
$query = "UPDATE new_default_reports SET deleted = 1 where id = $id";
$result = $conn->query($query);
header('Location: defaultreports.php');
}
?>
<br><input type="button" id="btnShow" class = "form-control" style="margin-top:12%;width:200px;border:2px solid darkgray;font-weight:bold;background-color:lightgray;" value="Edit Default Reports" />
<div id="dialog" align="center">
<form action = "" method="post">
<label> SQL Statement</label>
<textarea name="sqlst" style="width:100%;height:40%;" class = "form-control"><?php echo $row['sql_statement']?></textarea><br>
<label> X axis: </label>
<input type="text" name="x" class = "form-control" value="<?php echo $row['x_axis'] ?>"><br>
<label> Y axis: </label>
<input type="text" name="y" class = "form-control" value="<?php echo $row['y_axis'] ?>"><br>
<input type="submit" name = "set" value="Update" style="background-color:darkred;width:100px;color:white;font-weight:bold" />
<input type="submit" name = "delete" class="classname" value = "DELETE">
</form>
</div>
<br>
<div class="col-md-12">
<?php if(isset($_REQUEST['notify'])){ ?>
<div class="alert alert-success fade in">
<a href="#" class="close" data-dismiss="alert">×</a>
A New Graph <?php echo $row['graph_title']; ?> has been created.
</div>
<?php } ?>
<?php
$query = stripslashes($row['sql_statement']);
$result = $conn_temp->query($query);
//$row1 = $result->fetch_assoc();
//generating graph now
$x_axis = str_replace('`', '', $row['x_axis']);
$y_axis = str_replace('`', '', $row['y_axis']);
?>
<script type="text/javascript">
google.load('visualization', '1.1', {'packages':['corechart','wordtree','gantt']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
<?php if($row['type_of_graph']==6){ ?>
data.addColumn('string', '<?php echo $x_axis ?>');
data.addColumn('string', '<?php echo $y_axis ?>');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
<?php
$temp = 'null';
$count = 1;
while($row1 = $result->fetch_assoc()){
?>
['<?php echo $row1["$x_axis"] ?>','<?php echo $row1["$y_axis"] ?>', null, new Date(2015, 0, <?php echo $count ?>),daysToMilliseconds(<?php echo $count ?>), <?php echo $count++ ?>, <?php
if($temp=='null') {
?>null
<?php
}else{
echo '"'.$temp.'"';
} ?>],
<?php
$temp = $row1["$x_axis"];
} ?>
]);
<?php }else{ ?>
data.addColumn('string', '<?php echo $x_axis ?>');
data.addColumn('number', '<?php echo $y_axis ?>');
data.addColumn({'type': 'string', 'role': 'style' });
data.addColumn({'type': 'string', 'role': 'tooltip'});
data.addRows([
<?php
$count = 1;
while($row1 = $result->fetch_assoc()){
// print_r($row1);
// echo $x_axis.' '.$row1["$x_axis"].' '.$y_axis.' '.$row1["$y_axis"];
if($count > 10)
$count = 1;
?>
['<?php echo $row1["$x_axis"] ?>',<?php echo $row1["$y_axis"] ?>,'<?php echo $colors[$count++] ?>', '<?php $float = floatval($row1["$y_axis"]); if($float && intval($float) != $float && strlen($float) > 3 && strpos($row1["$y_axis"],"-") == false && strpos($key,"sgd") !== false){ echo $row1["$x_axis"]; echo " : " ; $yourval = number_format($row1["$y_axis"],2); echo "$".$yourval;} elseif ($float && intval($float) == $float && strlen($float) > 3){echo $row1["$x_axis"]; echo " : " ; echo number_format($row1["$y_axis"],2);} else{echo $row1["$x_axis"]; echo " : " ; echo number_format($row1["$y_axis"]);}?>' ],
<?php } ?>
]);
<?php } ?>
// Set chart options
var options = {height: 'auto',
backgroundColor: 'transparent',
chartArea: {
backgroundColor: 'transparent'
},
width : 'auto',
title: '<?php echo $row["graph_title"];?>',
tooltip : {trigger: 'selection', isHtml: true},
is3D: true,
legend: 'none',
vAxis: {title: '<?php echo $row ["y_axis"] ?>'}, //yaxis
hAxis: {title: '<?php echo $row ["x_axis"] ?>'}, //xaxis
bar: { groupWidth: '40%' },
vAxis: {format: '#,###.##'}
};
// Instantiate and draw our chart, passing in some options.
<?php if($row['type_of_graph']==1) { ?>
var chart = new google.visualization.LineChart(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==2){ ?>
var chart = new google.visualization.PieChart(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==3){ ?>
var chart = new google.visualization.ColumnChart(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==4){ ?>
var chart = new google.visualization.AreaChart(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==5){ ?>
var chart = new google.visualization.WordTree(document.getElementById('container1'));
<?php }elseif($row['type_of_graph']==6){ ?>
var chart = new google.visualization.GanttChart(document.getElementById('container1'));
<?php } ?>
chart.draw(data, options);
//set default section for one column
chart.setSelection([{row:0, column:1}]);
}
</script>
<div id="container1" style="width:100%;"></div>
<style>div.google-visualization-tooltip { background-color: #CCCC99; font-weight:bold;border:2px solid darkgray;}</style>
<div class="panel panel-default" style="margin-top:2%;">
<div class="panel-body">
<table border="0" cellpadding="5" cellspacing="5" style="width:100%;">
<tbody>
<tr>
<td>Select Column :</td>
<td>
<select name="select_column" id="select_column" class="form-control">
<option value="">NULL</option>
<?php
//generate query and doing a search
$query = $row['sql_statement'];
$result = $conn_temp->query($query);
while($row1 = $result->fetch_assoc())
{
foreach((array)$row1 as $key=>$val)
{ ?>
<option value="<?php echo $key ?>"><?php echo $key ?></option>
<?php }
break;
}
?>
</select>
</td>
<td>Enter value to search :</td>
<td>
<input type="text" name="select_value" id="select_value" value="" class="form-control">
</td>
</tr>
</tbody>
</table>
<hr>
<table class="table table-striped table-bordered table-hover" id="dataTable_table">
<thead>
<tr>
<?php
//generate query
$query = $row['sql_statement'];
$result = $conn_temp->query($query);
while($row1 = $result->fetch_assoc())
{
foreach((array)$row1 as $key=>$val)
{
?>
<th><?php echo $key ?></th>
<?php
}
break;
}
?>
</tr>
</thead>
<tbody>
<?php
//generate query
$query = $row['sql_statement'];
$result = $conn_temp->query($query);
while($row1 = $result->fetch_assoc())
{ ?>
<tr>
<?php
foreach((array)$row1 as $key=>$val) //generate all the columns
{ ?>
<th><?php
$float = floatval($val);//checking for decimal if it is present
if($float && intval($float) != $float && strlen($float) > 3 ){ //checking for the criteria to place decimalpoints
$yourval = number_format($float,2); //placing it in 2 decimal points
echo $yourval;
}
elseif($float && intval($float) != $float && strlen($float) > 3 && strpos($val,'-') == false){ //checking for the criteria to place decimalpoints
$yourval = number_format($float,2); //placing it in 2 decimal points
echo $yourval;
}
elseif ($float && intval($float) == $float && strlen($float) > 3 && strpos($val,'-') == false){
$yourval = number_format($float,2);
echo $yourval;
}
else{
echo $val; //if does not fit the criteria then place just show the value
}
?></th>
<?php
} ?>
</tr>
<?php
} ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<style>
#dataTable_table thead {
background-color:#D2DCDF;
font-weight:bold;
text-transform:uppercase;
border:2px inset #D2DCDF;
padding:5px;
}
</style>
<link href="scripts/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<script src="scripts/dataTables/jquery.dataTables.js"></script>
<script src="scripts/dataTables/dataTables.bootstrap.js"></script>
<script>
$.fn.dataTable.ext.search.push(//search portion for graphs
function( settings, data, dataIndex ) {
var select_value = $('#select_value').val();
var select_column = $('#select_column').val();
var column_index = '';
//var column = data[1] || 0; // use data for the age column
if ( select_value == '' || select_column == '' )
{
return true;
}
else {
//get the column name of data table
var column = 0;
$('#dataTable_table thead tr th').each(function(){
if( $(this).text() == select_column.toString())
{
return false;
}
column = column + 1;
});
column = data[column] || 0;
if(column!==0 && column.toLowerCase().indexOf(select_value.toString().toLowerCase()) >= 0)
{
return true;
}
}
return false;
}
);
$(document).ready( function () {
$('#dataTable_table').dataTable( {
"bSort": false
} );
} );
$.fn.dataTableExt.sErrMode = 'throw';
$(document).ready(function () {
var table = $('#dataTable_table').DataTable();
$('#select_value').keyup( function() {
table.draw();
});
});
</script>
</body>