Yii2 stop page re-load while clicking on pagination - pagination

Question

I have an index page in which I am calling some views based on a selection. Also, I have a form that is submitting on every sent request.
<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>
Current Chart
<?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>
Screen before any filter
Screen After filter
The pages also come with pagination. When I click on the pagination the entire page reloads and sets to it's original state.
How can I manage this ?

Answer 1

use pjax
https://www.yiiframework.com/doc/api/2.0/yii-widgets-pjax
in your index view
Pjax::begin();
//your reload code
Pjax::end();