Sum of a gridview column in a textbox in yii2

Question

I want to show the sum of a gridview column in a textbox. When the page loads, the sum should pass to the textbox. I've written the following javascript code in my index.php file. But not getting the sum. The javascript code might not be correct. Please let me know how to do it -

index.php -

<?php

use yii\helpers\Html;
use yii\grid\GridView;

/* @var $this yii\web\View */
/* @var $searchModel frontend\modules\sgledger\models\SellitemsgSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = 'Sunglass Ledger';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="sellitemsg-index">

    <h1>Sunglass Ledger</h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <div class= 'col-md-6'>
        <?= GridView::widget([
        'id' => 'purchasetable',
        'dataProvider' => $dataProvider2,
        'filterModel' => $searchModel2,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            //'poisg_id',
            [
             'attribute' => 'Date',
             'value' => 'posg.posg_date'
            ],
            'posg_invno',
            [
             'attribute' => 'Vendor',
             'value' => 'posg.posg_vname'
            ],

            //'poisg_sgname',
            'poisg_qty',

            //['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
    </div>

    <div class= 'col-md-6'>
    <?= GridView::widget([
        'id' => 'selltable',
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],

            //'ssgi_id',
            [
             'attribute' => 'Date',
             'value' => 'sellsg.ssg_date'
            ],
            'ssgi_invoiceno',
            [
             'attribute' => 'Customer',
             'value' => 'sellsg.ssg_customer'
            ],
            //'ssgi_sgname',
            //'ssgi_price',

            //['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
</div>
</div>
<?php
/* start getting the textboxes */
$script = <<< JS
$(document).on('ready', function(e) {

        var purgrid = purchasetable.getElementsByTagName('poisg_qty');
        var total0 = 0;


        for (var i = 0; i < purgrid.length; i++) {

            var totp = purgrid[i].value
            total0 = parseInt(total0) + parseInt(totp);
        }

        // ^ This number takes (n+1)th column
        console.log('First table total value: ' + total0);

    })
JS;
$this->registerJs($script);
/* end getting the textboxes */
?>

Present output -

Answer 1

Could be you can use showFooter for gridView

Firts you ca can calculate the value using the dataProvider

        $yourTotal =0;
        $numRow = 0;
        foreach ($dataProvider->models as $key => $value) {
            $yourTotal += $value['your_attribute'];
            $numRow++;
        }

Then in GridView you can set showFooter => TRUE and in the column you need you can add footer (and eventually footerOptions)

        echo GridView::widget([
        'dataProvider' => $dataProvider,
        ......
        'showFooter'=>TRUE,
        ..... 
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            ......
            [   'attribute' => 'your_attribute',
                'label' => 'Your Lable',
                'footer' => $yourTotal,
                'footerOptions' => ['style' => 'text-align:right;'],        
            ],            
            ........

and you can add you text using input

<?= Html::textInput('your_name', $yourTotal , options[]); ?>

or you can add a simple div

<div id='my_id'> <?=  $yourTotal ?> </div>