Gridview pagination with ajax

Hi,

I need your help with pagination of gridview. I have a gridvew in a view that is loaded with method

“return $this->renderAjax(…)”

and with jquery i show it in a div:

.done(function (data) {

$("#pgmProductList").html(data);

})

The Gridview is between Pjax::begin and Pjax::end.

The problem is that if the page is loaded first time all work correctly, but if I load the gridview with other records using ajax the pagination stop working.

The controller return the correct page of gridview but the data returned by ajax call is not replaced within gridview.

Have I to re-initialize the Gridview after the ajax call?

Thank you very much.

The problem is with how you are using your function. You need to make sure it is always available for Ajax loaded data.

I don’t know what your code looks like to load the function but something like this

JQuery(document).on("click", ".pagination a" function(e){

e.preventDefault();

JQuery.get(JQuery(this).attr("href")).done();

});

I did this on my phone so there might be errors but you can get the idea.

Hi Skworden,

thank you for your kind reply.

I did as you suggested and now the gridview pagination work correctly even after ajax load.

Thanks


<?php

$this->registerJs('

    $(document).on("click", ".pagination a", function(e){

        e.preventDefault();

        e.stopPropagation();

        $.get($(this).attr("href"))

        .done(function (data) {

            $("#pgmProductList").html(data);

        })

        .fail(function () {

            console.log("Ajax fail: ");

        });

    });

', yii\web\View::POS_READY);

?>

1 Like