如何在Yii2上用 AJAX 占领gridView?

rsaldnfx  于 2022-11-09  发布在  其他
关注(0)|答案(1)|浏览(178)

这是我第一次使用Yii2框架,所以我对它的特性和提供的东西了解不多。
目前,我将 AJAX 与所有项目集成在一起,并使用脚本和一个表来根据您选择的选项更新数据。
问题是,项目占用了GridView的表,我被要求所有的表都是一样的,也就是说,我现在使用的表是GridView的,不知道如何使用GridView实现 AJAX 。
我把我的HTML作品留给你:

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 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>
fdbelqdn

fdbelqdn1#

您可以使用Pjax。请参阅文档https://www.yiiframework.com/doc/api/2.0/yii-widgets-pjax
您还可以在使用jquery单击刷新按钮时刷新表

$.pjax.reload({container: '#boxPjax', async: false});

boxPjax是Pjax容器ID

相关问题