ZF2共用分页模板显示ajax分页列表
通用的分页模板视图/view/application/page/control.phtml:
<!-- See http://developer.yahoo.com/ypatterns/pattern.php?pattern=searchpagination --> <?php $url = '/application/pagination-test/test-page?page='; ?> <?php if ($this->pageCount): ?> <div class="paginationControl"> <!-- Previous page link --> <?php if (isset($this->previous)): ?> <a href="<?php echo $url. $this->previous; ?>"> < Previous </a> | <?php else: ?> <span class="disabled">< Previous</span> | <?php endif; ?> <!-- Numbered page links --> <?php foreach ($this->pagesInRange as $page): ?> <?php if ($page != $this->current): ?> <a href="<?php echo $url. $page;?>"> <?php echo $page; ?> </a> | <?php else: ?> <?php echo $page; ?> | <?php endif; ?> <?php endforeach; ?> <!-- Next page link --> <?php if (isset($this->next)): ?> <a href="<?php echo $url. $this->next; ?>"> Next > </a> <?php else: ?> <span class="disabled">Next ></span> <?php endif; ?> </div> <?php endif; ?>
常规的ViewModel包含模板/view/application/pagination-test/test-page.phtml:
<html> <body> <h1>Example</h1> <div> <?php if (count($this->paginator)): ?> <ul> <?php foreach ($this->paginator as $item):?> <li><?php echo $item->value; ?></li> <?php endforeach; ?> </ul> <?php endif; ?> <?php echo $this->paginationControl($this->paginator,'Elastic','application/page/control.phtml', array('route' => 'application')); ?> </div> </body> </html>
Action方法:
public function testPageAction(){ $select = new \Zend\Db\Sql\Select(); $select->from('example'); $adapterOrSqlObject = $this->getServiceLocator()->get('dbAdapter'); $adapter = new \Zend\Paginator\Adapter\DbSelect($select, $adapterOrSqlObject); $paginator = new \Zend\Paginator\Paginator($adapter); $paginator->setCurrentPageNumber($this->params()->fromQuery('page')); $paginator->setDefaultItemCountPerPage(1); $vm = new ViewModel(); $vm->setVariable('paginator', $paginator); return $vm; }
以上代码分页没有任何问题。但如果我们需要让列表变成ajax加载,点击页数跳转页面无刷新效果,而不想在Js里重新很麻烦的将分页模板的逻辑及样式再写一遍, 那么我们需要共用之前的通用模板。
分页模板是通过这句代码传递参数的(如果我们AJAx方式时设置一个模板/ajax.phtml去包含这段代码将会有问题):
<?php echo $this->paginationControl($this->paginator,'Elastic','application/page/control.phtml', array('route' => 'application')); ?>
ZF2目前支持设置子模板, 但均是分开设置模板的参数的。如果Ajax方式加载时你想再通过这种方式去调用分页模板control.phtml, 那么会报找不到模板的错误, 因为这个地方分页的参数不能传递到control.phtml, 那么你可能要问为什么前面正常的情况下是能传递,并且没有问题的呢?这因为我们AJAx的action方法里需要解析模板直接返回数据给JS调用,那么加载的方式是不一样了。具体看下面的代码。
那么我们怎么解决呢?可以跳开这种思路, 有时在一个问题上纠结很久时,可以换种方法或许柳暗花明。
也许你想到了,对,我们直接调用分页模板control.phtml来进行参数赋值。
Ajax请求方法代码:
public function ajaxAction(){ $select = new \Zend\Db\Sql\Select(); $select->from('example'); $adapterOrSqlObject = $this->getServiceLocator()->get('dbAdapter'); $adapter = new \Zend\Paginator\Adapter\DbSelect($select, $adapterOrSqlObject); $paginator = new \Zend\Paginator\Paginator($adapter); $paginator->setCurrentPageNumber($this->params()->fromQuery('page')); $paginator->setDefaultItemCountPerPage(1); $renderer = new \Zend\View\Renderer\PhpRenderer(); $resolver = new \Zend\View\Resolver\AggregateResolver(); $map = new \Zend\View\Resolver\TemplateMapResolver(array( 'page' => __DIR__ . '/../../../view/application/page/control.phtml', )); $resolver->attach($map); $renderer->setResolver($resolver); $vm = new ViewModel(); $pages = get_object_vars($paginator->getPages('Elastic')); $vm->setTemplate('page'); if (is_array($pages)) { $vm->setVariables($pages); } $pageHtml = $renderer->render($vm); $response = $this->getResponse(); $response->setContent(json_encode(array('data'=>$paginator->getCurrentItems()->toArray(),'pageHtml'=>$pageHtml))); return $response; }
Ajax方式加载列表的test-page.phtml模板代码(这里是演示代码,js直接写在模板里了,正式编码放置另外单独JS文件,便于维护及缓存管理):
<html> <body> <h1>Example</h1> <div class="ajaxContent"> </div> <script> var PageManager = { init:function(){ this.loadDataList(1); this.changePage(); }, changePage:function(){ var obj = this; $('.ajaxContent').on('click','.paginationControl a',function(e){ e.preventDefault(); var href = this.href; var ps = href.match(/page=\d+/gi); var page = 0; if(ps.length>0){ page = ps[0].substring(5); } if(page>0){ obj.loadDataList(page); } }); }, loadDataList:function(page){ $.ajax({ type:'GET', url:'/application/pagination-test/ajax?page='+page, dataType:'json', success:function(json){ var str = '<ul>'; $.each(json.data,function(i,item){ str += '<li>'+item.value+'</li>'; }); str += '</ul>'; str += json.pageHtml; $('.ajaxContent').html(str); } }); } }; $(function(){ PageManager.init(); }); </script> </body> </html>
相关推荐
<?php. if (!empty($_POST)) {. $data1 = $_POST["data1"];$data2 = $_POST["data2"];$fuhao = $_POST["fuh