Home > Article > Backend Development > yii_CGridView_ajax_pagination_and_ajax_sort_PHP tutorial
yii_CGridView_ajax_pagination_and_ajax_sort_PHP tutorial
- WBOYOriginal
- 2016-07-13 17:19:14768browse
The main content of this article:
1. Under normal circumstances, CGridView implements the principle of Ajax paging and sorting
2. Analysis of situations where Ajax cannot be used for paging and sorting
3. How to implement Ajax paging and sorting after customizing paging (rewriting CLinkPager)
/***
author: php siege division
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'=>'Keyword name',
'headerHtmlOptions'=>array('width'=>'130px'),
), .... ....
The above code implements a regular CGridView, except that the pager uses a custom style. .
And in the source code of the page, let me find the relevant part:
[javascript]
[javascript] view plaincopyprint?
You will find that yii automatically loaded jquery.ba-bbq.js && jquery.yiigridview.js, and 2 pieces of code
One of the paragraphs is used to realize the function of deleting a row of data. A prompt box will pop up to let the user confirm whether to delete it;
This section is the most core and critical one for ajax update grid. It is also this part of the code that implements ajax page turning and sorting.
/*********** I am the dividing line *****************************/
If you find that after clicking paging or sorting, it is not the ajax method (that is, you can see the URL of each request in the address bar)
One place to check:
ajaxUpdate=>'', this parameter
updateSelector=>'', this parameter
/*********** I am the dividing line *****************************/
Under normal circumstances, CLinkPager cannot meet our needs and needs to be rewritten;
I provide 3 ways to rewrite:
1. Disable CGridView’s own Pager and write it yourself outside of CGridView
2. Disable CGridView's own Pager, rewrite the CGridView file, and write your own pager in public function renderItems()
3. Configure the pager parameters of CGridView.
The following is what the default CLinkPager looks like
Page turning:
< Previous page 1 2 3 Next page >
Now we want the following Pager effect
Items 31 - 40, 14546 in total
Previous page 1 2 3 4 5 6 7 8 9 10 Next page
/***
author: php siege division
***/
Let’s look at the first rewriting solution first:
Rewrite CLinkpager as follows:
[php]
$this->widget('CLinkPager', array(
'header'=>'th'.($paginationTop->getCurrentPage()*$paginationTop->getPageSize()+1).
' - '.($paginationTop->getCurrentPage()*$paginationTop->getPageSize()+$paginationTop->getPageSize()).
' items, total '.$paginationTop->getItemCount().' items ',
'pages' => $paginationTop,
'itemCount'=>$totalItemFoundCount,
'prevPageLabel' => 'Previous page',
'cssFile'=>false,
'nextPageLabel' => 'Next page',
'footer'=>' ',
));
The pagination is generated in the controller
[php]
$paginationTop = new CPagination($totalItemFoundCount);
$paginationTop->pageSize= $pageSize;
Then put the rewritten CLinkPager in front of CGridView.
After running, I found a bug, that is, paging is not Ajax.
It doesn’t matter if it’s not Ajax. The key is that paging and sorting cannot be used together.
The reason is very simple, paging is not ajax, but sorting is ajax. After the two requests are sent, the url is not in the same place, so the paging parameters and sorting parameters are no longer in the same place, and of course they cannot be used together.
Solution: Unify.
Either unified url sorting & paging, or unified ajax sorting & paging.
The URL is simple, set ajaxUpdate=>false,
Ajax is also simple, as long as you understand the principle of ajax sorting mentioned in the first part of this article,
The reason why ajax paging cannot be done is because our paging has been rewritten and placed outside of CGridView. How can we make it so
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'});
When using ajaxUpdate, do you still take care of the CLinkPager you wrote outside?
Configure 2 parameters:
'ajaxUpdate'=>'datalist-grid, yw0',
'updateSelector'=>'.pager a, thead th a',
Originally, the scope of ajaxUpdate is only datalist-gird. Now we tell it that it also affects the paging ul that we rewrite outside the grid, and its id is yw0.
updateSelector specifies the html element that triggers the ajaxUpdate action. It must also ensure that it contains paging links and sorting links, otherwise ajax sorting/pagination will not be successful.
Look at the second rewriting solution:
The first solution above is too complicated. Since the core of the problem is that the custom ClinkPager is not placed in CGridView, then we will rewrite CGridView and put it in.
Yes, it is indeed feasible.
[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 "n";
";
$this->renderCustomerPager();
}
else
$this->renderEmptyText();
}
public $paginationTop;
public $totalItemCount;
public $totalItemFoundCount;
public function renderCustomerPager()
{
$paginationTop = $this->paginationTop;
$totalItemCount = $this->totalItemCount;
$totalItemFoundCount = $this->totalItemFoundCount;
echo '
';
echo '
';
$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'=>' ',
));
....
第3种方案：
前2种方案，说实话，都太麻烦了，破坏了yii 自身的机制， 又在其上弥补了半天。。
最好的方案 ，还是 配置 CGridView 的 'pager' ,来实现我们要更复杂的CLinkPager的目标。
但是，有些时候还真必须用第 1、2种方案；
比如我应用的情况是：
用 Coreseek 全文索引 查询出 数据 的id ，再 用 id 来到数据库中找出数据，形成 CActiveDataProvider ，最后用 CGridView来展示。
我这里的 CDbCriteria 如下
[php]
$criteria = new CDbCriteria;
$criteria->join = 'LEFT JOIN site2 AS si** ON t.**=**.domain_hash';
$criteria->addInCondition('t.id', $IDARRAY);
$criteria->select = array("t.id", "t.content", "t.pubtime", "t.url", "t.reply_num", "t.retweet_num", "site_config .site_name");
$criteria->order = 'FIND_IN_SET(t.id, "'.join(",", $IDARRAY).'")';
The variable IDARRAY is exactly an array composed of ids obtained by coreseek
If you follow the normal
[php]
$dataProvider = new CActiveDataProvider('TData', array(
'criteria'=>$criteria,
'pagination'=>array(
'pageSize'=>10,
),
));
does not meet my needs.
Because my paging and sorting are all done in coreseek, the CActiveDataProvider used here only provides 10 records of the current page (for example, 10 records per page).
end.
If you have better suggestions and opinions, you are welcome to learn together.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Solve the problem of multiple people operating data tables at the same time under PHP_PHP tutorialNext article：Solve the problem of multiple people operating data tables at the same time under PHP_PHP tutorial