pagination - Yii2在点击分页时停止页面重新加载
问题描述
我有一个index
页面,我在其中根据选择调用一些视图。另外,我有一个在每个发送的请求上提交的表单。
<section class="container-fluid">
<div class="box">
<div class="box-body">
<form action="index" method="post" >
<select required id="s" name="dtype" class="dropdown"
style="float: left; text-align: left;width: 20%; margin: 10px;">
<option value="400">Select Data Type</option>
<option value="401"<?php if(isset($_POST['dtype']) && $_POST['dtype'] == '401')
echo 'selected= "selected"';
?>>Current</option>
<option value="402"<?php if(isset($_POST['dtype']) && $_POST['dtype'] == '402')
echo 'selected= "selected"';
?>>Voltage</option>
<option value="403"<?php if(isset($_POST['dtype']) && $_POST['dtype'] == '403')
echo 'selected= "selected"';
?>>kWh</option>
</select>
<input style="float: left; text-align: left; margin: 10px; width: 15%" type="text" id="name" name="msn" required
minlength="4" maxlength="15" size="15" placeholder="MSN"
value="<?php echo isset($_POST['msn']) ? htmlspecialchars($_POST['msn'], ENT_QUOTES) : ''; ?>">
<?php
echo DateTimePicker::widget([
'name' => 'datetime_10',
'id'=>'start',
'value' => Yii::$app->request->post('datetime_10', null),
'options' => [
'placeholder' => 'Start',
'autocomplete' => 'off',
'required' =>true,
],
'convertFormat' => false,
'pluginOptions' => [
'format' => 'yyyy-mm-dd hh:i:ss',
//'startDate' => '01-Mar-2014 12:00 AM',
'todayHighlight' => true,
'autoclose' => true,
]
]);
echo DateTimePicker::widget([
'name' => 'datetime_11',
'id'=>'end',
'value' => Yii::$app->request->post('datetime_11', null),
'options' => [
'placeholder' => 'End',
'autocomplete' => 'off',
'required' =>true,
],
'convertFormat' => false,
'pluginOptions' => [
'format' => 'yyyy-mm-dd hh:i:ss',
//'startDate' => '01-Mar-2014 12:00 AM',
'todayHighlight' => true,
'autoclose' => true,
]
]);
?>
<input type="submit" value="Query" id="btnSubmit" class="btn btn-success pull-right" style="margin: 5px" />
</form>
</div>
</div>
</section>
<section class="content">
<div class="box">
<div class="box-body">
<?php // echo $this->render('_search', ['model' => $searchModel]); ?>
<?php
if($type == '401')//current
{
$columns = [
[
'class' => 'yii\grid\SerialColumn',
],
'Device_ID',
'Customer_ID',
'MSN',
'Current_Phase_1',
'Current_Phase_2',
'Current_Phase_3',
'Data_Date_Time',
];
echo $this->render('_currentChart', [
'dataProvider' => $dataProvider,
]) ;
}else if($type == '402')//voltages
{
$columns = [
[
'class' => 'yii\grid\SerialColumn',
],
'Device_ID',
'Customer_ID',
'MSN',
'Voltage_Phase_1',
'Voltage_Phase_2',
'Voltage_Phase_3',
'Data_Date_Time',
];
echo $this->render('_voltageChart', [
'dataProvider' => $dataProvider,
]) ;
}
else if($type == "403")
{
$columns = [
[
'class' => 'yii\grid\SerialColumn',
],
'Device_ID',
'Customer_ID',
'MSN',
'kWh_Total',
'Data_Date_Time',
];
echo $this->render('_kwhChart', [
'dataProvider' => $dataProvider,
]) ;
}
else if($type == "404")
{
$columns = [
['class' => 'yii\grid\SerialColumn'],
'Device_ID',
'Customer_ID',
'MSN',
'Total_Power',
'Data_Time',
];
echo $this->render('_totalChart', [
'dataProvider' => $dataProvider,
]) ;
}
else
{
$columns = [
['class' => 'yii\grid\SerialColumn'],
'device_id',
'cust_id',
'msn',
'kwh_t',
'voltage_p1',
'voltage_p2',
'voltage_p3',
'current_p1',
'current_p2',
'current_p3',
'data_date_time',
];
}
?>
<?=
GridView::widget([
'dataProvider' => $dataProvider,
//'filterModel' => $searchModel,
'columns' => $columns
]);
?>
</div>
</div>
</section>
当前图表
<?PHP
$dataPointsC1 = array();
$dataPointsC2 = array();
$dataPointsC3 = array();
$model = $dataProvider->getModels();
foreach ($model as $row){
// pushing for voltages
array_push($dataPointsC1, array("label"=>$row['Data_Date_Time'],"y"=>$row['Current_Phase_1']));
array_push($dataPointsC2, array("label"=>$row['Data_Date_Time'],"y"=>$row['Current_Phase_2']));
array_push($dataPointsC3, array("label"=>$row['Data_Date_Time'],"y"=>$row['Current_Phase_3']));
}
?>
<div id="chartContainer1" style="width: 100%; height: 300px;display: inline-block;">
</div>
<script>
var chart1 = new CanvasJS.Chart("chartContainer1", {
exportEnabled: true,
animationEnabled: true,
zoomEnabled: true,
theme: "light1",
title:{
text: "Current"
},
legend:{
cursor: "pointer",
verticalAlign: "bottom",
horizontalAlign: "center",
itemclick: toggleDataSeries
},
data: [
{
type: "line",
//lineColor:"yellow",
// legendMarkerColor: "yellow",
name: "Current(Phase-1)",
indexLabel: "{y}",
//yValueFormatString: "V1#0.##",
showInLegend: true,
dataPoints: <?php echo json_encode($dataPointsC1, JSON_NUMERIC_CHECK); ?>
},
{
type: "line",
// lineColor:"orange",
// legendMarkerColor: "orange",
name: "Current(Phase-2)",
indexLabel: "{y}",
//yValueFormatString: "V2#0.##",
showInLegend: true,
dataPoints: <?php echo json_encode($dataPointsC2, JSON_NUMERIC_CHECK); ?>
},
{
type: "line",
// lineColor:"purple",
// legendMarkerColor: "purple",
name: "Current(Phase-3)",
indexLabel: "{y}",
//yValueFormatString: "V3#0.##",
showInLegend: true,
dataPoints: <?php echo json_encode($dataPointsC3, JSON_NUMERIC_CHECK); ?>
}
]
});
chart1.render();
function toggleDataSeries(e){
e.dataSeries.visible = !(typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible);
chart1.render();
}
</script>
在任何过滤器之前筛选
筛选后的屏幕
这些页面还带有分页。当我点击分页时,整个页面重新加载并设置为原始状态。
我该如何管理?
解决方案
在索引视图中使用 pjax https://www.yiiframework.com/doc/api/2.0/yii-widgets-pjax
Pjax::begin();
//your reload code
Pjax::end();
推荐阅读
- python - 在jira中使用python循环创建票证
- mitmproxy - mitmdump 替换模式构造
- python - 将 Excel 工作簿加载到 Python 中的 COM 对象时,数据未正确刷新/加载
- python-3.x - mxnet 导入 nd 或 np 以使用数组
- machine-learning - 具有连续特征的决策树回归器中从中选择最佳分割的切点?
- cordova - Cordova airwatch-sdk-plugin 的自定义启动闪屏
- javascript - Swapi 在人民卡中获取和渲染电影
- machine-learning - 如何强制 GAN 中的生成器进行探索?
- java - 使用 Target=ElementType.TYPE(类注释)为注释创建 AspectJ
- vega - Vega-lite 从数据中设置颜色,同时保留图例