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>

ZF2共用分页模板显示ajax分页列表

相关推荐