Cgridview Ajax Paging

I have a view defined as such:


<div class="row">

    <div class="col-md-12">

        <div id="dashboard-grid">

            <?php $this->renderPartial('_locations', array('model' => $locations)); ?>

        </div>   

    </div>

</div>

I update the ‘dashboard-grid’ div with a new CGridView when a link is pressed using the following Javascript:


<script>

   $(document).ready(function(){                     

      $(function(){

         $("#service-active-job-badge").click(function(e){

            $.ajax({

               type: "POST",

               url: "<?php echo $this->createUrl('dashboard/jobList'); ?>",

               success: function(data) {

                    $("#dashboard-grid").html(data);

               }


           });

        });

      });

    });

</script>

My controller action looks like this:


    public function actionJobList() { 

        $job = new Job;

        $jobs = $job->getCustomerJobs();


        if ($jobs) {

            $this->renderPartial("_jobs", array(

                'title' => 'Jobs',

                'model' => $jobs,

            ), false);

        }

        else {

            echo 'No jobs found!';

        }

    }

Everything works fine with the first rendering of this CGridView. However, if I attempt to use the pager of the CGridView I get back the partial render from my controller action. How do I make the paging on the CGridView just update the grid view rather than attempting to render the entire page?

What is the content of your _locations view? If it’s CGridView, why don’t you put them in the same view replacing the dashboard-grid div?

Let’s say the ID of your CGridView is ‘employee-grid’, so you can use


$.fn.yiiGridView.update('employee-grid');

to refresh your CGridView with latest data.