Today I implemented Ajax paging in the magento interface. Please take a look that this may help you understand.
Block file ...
class Namesapce_ModuleName_Block_Productlist extends Mage_Core_Block_Template { public function __construct() { $this->_setProductCollaction(); } private function _setProductCollaction() { $collection = Mage::getModel('catalog/product')->getCollection(); $this->setCollection($collection); } protected function _prepareLayout() { parent::_prepareLayout(); $pager = $this->getLayout()->createBlock('page/html_pager', 'custom.pager'); $pager->setAvailableLimit(array(5 => 5)); $pager->setCollection($this->getCollection()); $this->setChild('pager', $pager); $this->getCollection()->load(); return $this; } public function getPagerHtml() { return $this->getChildHtml('pager'); } }
Your PHTML file
<table class="data-table gapBottom14" id="order-table"> <colgroup> <col width="23%" /> <col width="67%" /> <col width="10%" /> </colgroup> <thead> <tr class="first last"> <th rowspan="1"><span class="nobr"><?php echo $this->__('sku'); ?></span></th> <th rowspan="1"><span class="nobr"><?php echo $this->__('NAME'); ?></span></th> </tr> </thead> <tbody> <?php foreach($products as $product): ?> <tr class="first odd"> <td><?php echo $product->getSku(); ?></td> <td class=""><?php echo $product->getName(); ?></td> </tr> <?php endforeach;?> </tbody> </table> <?php echo $this->getPagerHtml();?>
// ADD THIS block WHERE YOU ADD PRODUCTS using AJAX Paging.
And add 1 jQuery to the parent block.
jQuery(document).ready(function() { jQuery(".pagination a").live('click', function(event) { event.preventDefault(); page = jQuery(this).html(); updateTable(page); }); function updateTable(pageno){ jQuery.ajax({ type:"get", url:'<?php echo $this->getUrl('*
// where productlist is the div id of your parent block.
Add 1 refresh action to refresh the page block when you click on the paging.
public function filterproductAction() { echo Mage::app()->getLayout() ->createBlock('modulename/productlist')->setTemplate('modulename /productlist.phtml')->toHtml(); }
source share