How to occupy gridView with AJAX on Yii2?

Yii 2.0 General Discussions
1

This is my first time using the Yii2 Framework, so I don’t have much knowledge of the features or what it offers.

Currently I integrate Ajax as I do with all projects with script and a table that updates the data according to the option you select.

The issue is that the project occupies GridView for the tables and I was asked that all the tables were the same, ie, that the table I did now is with GridView and do not know how to implement Ajax with the Gridview.

I leave you my HTML work:

HTML

<div class="course-index container">
    <div class="row">
        <div class="col-sm-4">
            <div class="panel">
                <div class="panel-heading">
                    Cursos
                </div>
                <div class="panel-body">
                    <div class="refresh-course">
                        <table class="table">
                            <tbody id="course-item">
                                <?php foreach ($courses as $key): ?>
                                <tr class="course-<?= $key['id'] ?> course-tr" id="<?= $key['id'] ?>">
                                <td class="name"><?= $key['name'] ?></td>
                                <td><span class="badge badge-info"><?= $key['amount'] ?></span></td>
                                <td><a title="Listar estudiantes" class="list-course" data-id="<?= $key['id'] ?>"><i class="fa fa-chevron-right"></i></a></td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="panel">
                <div class="panel-heading">
                    Estudiantes inscritos
                </div>
                <div class="panel-body">
                    <div class="refresh-students">
                        <table class="table table-striped table-bordered tablesorter" id="report-table">
                            <thead>
                                <th>Email</th>
                                <th>Fecha inicio</th>
                                <th>% Completados</th>
                                <th>Tiempo realizado</th>
                            </thead>
                            <tbody id="resultData">
                            
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Script

<script type="text/javascript">
initializate();
function initializate(){
    $('#report-table > tbody').empty();
    $("#course-item tr[id]").click(function(){
        var order = $(this).attr('id');
       $.ajax({
            url: '<?= Url::to(['default/load/']); ?>',
            type: 'POST',
            data : {id: order},
            success:function(data){
                $('#report-table > tbody').empty();
                var html = '';
                data.data.forEach(element => {
                    html += '<tr>' +
                    '<td>' + element.email + '</td>' +
                    '<td style="text-align: center;">' + (element.start_date == null ? '-' : new Date(element.start_date).toLocaleDateString("en-US") ) + '</td>' +
                    '<td style="text-align: center;">' + element.percent + '</td>' +
                    '<td>' + element.time + '</td>' +
                    '</tr>';
                });
                $('#resultData').html(html);
            }
        });
    });
};
</script>
2

There are extensions that exist, such as: https://github.com/chrisb34/yii2-gridview-editable

Or you may simply prefer to upgrade to using https://demos.krajee.com/grid which include numerous extra features that you may appreciate.

Or am I misunderstanding the request and you are looking to add a checkbox for each row to be to apply an action against multiple rows.

3

Mostly fill the gridview with AJAX as it appears in the script code

4

I’m afraid I’m still not clear on what you are after exactly. “as it appears in the script code”? Can you give a concrete example? Do you mean attach events to the grid table row, cell, …?

Perhaps someone else will be able to help.

5

I want to fill a table through ajax occupying the Gridview

6

I’m not sure what you mean by “occupy” …

Anyway, I’d like to recommend that you take your time to play with the Gii’s CRUD generator before you resume your work.
GridView works quite nicely with PJAX out of the box. You usually don’t have to write a single line of javascript code to implement what you want.