yii_CGridView_ajax_pagination_and_ajax

本文主要内容：

1，正常情况下 CGridView 实现 Ajax 分页和排序的原理

2，分页和排序无法Ajax的情况分析

3，自定义分页（重写CLinkPager）后如何实现 Ajax 分页和排序

/***

author: php攻城师

http://blog.csdn.net/phpgcs

***/

[php]

$this->widget('zii.widgets.grid.CGridView', array(

'id'=>'keyword-grid',

'dataProvider'=>$model->search(),

'cssFile'=>false,

'template'=>'{items}

{pager} {summary}

'pager'=>array('cssFile'=>false),

'ajaxUpdate'=>true,

'columns'=>array(

array(

'name'=>'leader_name',

'value'=>'$data->event',

'header'=>'关键词名称',

'headerHtmlOptions'=>array('width'=>'130px'),

), .... ....

以上代码实现一个常规的 CGridView ，除了 pager 用了自定义的样式。。

而在页面的源代码中，我来找出相关的部分：

[javascript]

[javascript] view plaincopyprint?

jQuery(function($) {

jQuery('#keyword-grid a.delete').live('click',function() {

if(!confirm('确定要删除这条数据吗?')) return false;

var th=this;

var afterDelete=function(){};

$.fn.yiiGridView.update('keyword-grid', {

type:'POST',

url:$(this).attr('href'),

success:function(data) {

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

afterDelete(th,true,data);

error:function(XHR) {

return afterDelete(th,false,XHR);

}

});

return false;

});

jQuery('#keyword-grid').yiiGridView({'ajaxUpdate':['1','keyword-grid'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items','selectableRows':1,'pageVar':'keyword_page'});

});

/*]]>*/

其中会发现 yii 自动加载了 jquery.ba-bbq.js && jquery.yiigridview.js ,以及2段代码

其中一段是用来实现删除一行数据时弹出提示框让用户确认是否删除功能的；

一段是最核心关键的用于 ajax update grid 的，也正是这部分代码实现了 ajax 的翻页和排序。

/*********** 我是分割线 *******************************/

如果发现点击了分页或者排序后，不是ajax 方式的（也就是你可以在地址栏中看到每次请求的常常的 url ）

一个要检查的地方：

ajaxUpdate=>'', 这个参数

updateSelector=>'', 这个参数

/*********** 我是分割线 *******************************/

一般情况下，CLinkPager都无法满足我们的需求，要重写；

而重写我这里提供3种方式：

1，禁用 CGridView自己的Pager ，在 CGridView 之外自己写

2，禁用 CGridView自己的Pager ，重写 CGridView 文件，将自己的pager 写在 public function renderItems() 中

3，配置 CGridView 的 pager 参数。

如下是默认的 CLinkPager 的样子

翻页:

现在我们想要如下的Pager 效果

第 31 - 40 条, 共 14546 条

上一页 1 2 3 4 5 6 7 8 9 10 下一页

/***

author: php攻城师

***/

先看第1种重写方案：

重写 CLinkpager 如下：

[php]

$this->widget('CLinkPager', array(

'header'=>'第 '.($paginationTop->getCurrentPage()*$paginationTop->getPageSize()+1).

' - '.($paginationTop->getCurrentPage()*$paginationTop->getPageSize()+$paginationTop->getPageSize()).

' 条, 共 '.$paginationTop->getItemCount().' 条 ',

'pages' => $paginationTop,

'itemCount'=>$totalItemFoundCount,

'prevPageLabel' => '上一页',

'cssFile'=>false,

'nextPageLabel' => '下一页',

'footer'=>' ',

));

其中的 pagination 在 controller 中生成

[php]

$paginationTop = new CPagination($totalItemFoundCount);

$paginationTop->pageSize= $pageSize;

然后把重写的 CLinkPager 放在 CGridView 前面即可。

运行后发现一个Bug ，就是分页不是 Ajax 的。

不是Ajax的不要紧，关键是分页和排序不能结合使用了。

原因很简单，分页不是ajax 的，而排序是ajax 的，两个请求发出后 url 不在一个地方，那么分页参数和排序参数就不再一地方，当然无法结合使用。

解决方案：统一起来。

要么统一为url排序&分页，要么统一为ajax排序&分页。

url的简单，设置 ajaxUpdate=>false,

ajax的也简单，只要理解了本文第一部份说的 ajax 排序的原理，

之所以不能够 ajax 分页，是因为我们的分页是重写了，而且还放在了CGridView 之外，这样如何让

ajaxUpdate的时候还去照顾到你写在外面的 CLinkPager 呢？

配置2个参数：

'ajaxUpdate'=>'datalist-grid, yw0',

'updateSelector'=>'.pager a, thead th a',

本来 ajaxUpdate 的作用范围只是 datalist-gird ，现在我们告诉他还要作用在我们重写在grid 外面的分页 ul ，其id 是 yw0.

updateSelector 指定了触发 ajaxUpdate 这个动作的html元素，也是要保证包含了分页的链接和排序的链接，否则也是无法成功 ajax 排序/分页。

再看第2种重写方案：

上面第一种方案太复杂了把，既然问题的核心关键是没有把自定义的 ClinkPager 放在 CGridView 中，那我们就重写 CGridView将其放进去呗。

对，确实是可行的。

[php]

Yii::import('zii.widgets.grid.CGridView');

class EbuCGridView extends CGridView

{

/**

* Renders the data items for the grid view.

public function renderItems()

{

if($this->dataProvider->getItemCount()>0 $this->showTableOnEmpty)

{

$this->renderCustomerPager();

echo "

itemsCssClass}\">\n";

$this->renderTableHeader();

ob_start();

$this->renderTableBody();

$body=ob_get_clean();

$this->renderTableFooter();

echo $body; // TFOOT must appear before TBODY according to the standard.

echo "

$this->renderCustomerPager();

}

else

$this->renderEmptyText();

}

public $paginationTop;

public $totalItemCount;

public $totalItemFoundCount;

public function renderCustomerPager()

{

$paginationTop = $this->paginationTop;

$totalItemCount = $this->totalItemCount;

$totalItemFoundCount = $this->totalItemFoundCount;

echo '

yii_CGridView_ajax_pagination_and_ajax_sort