单击分页时Yii2停止重新加载页面

Question

我有一个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>

任何过滤器前的屏幕

​

​

过滤后的屏幕

​

​

这些页面也带有分页。当我单击分页时，整个页面将重新加载并设置为它的原始状态。

我该怎么处理呢？

Answer 1

在索引视图中使用pjax https://www.yiiframework.com/doc/api/2.0/yii-widgets-pjax

Pjax::begin();
//your reload code
Pjax::end();