Ajax paging in magento for custom module

Ajax paging in magento for custom module

February 14, 2015magentopractice
Today I have implemented Ajax paging in magento frontend. Please take a look it may help you.


Block file …

class Namesapce_ModuleName_Block_Productlist extends Mage_Core_Block_Template
{

    public function __construct() 
    {
        $this->_setProductCollaction();
    }

    private function _setProductCollaction()
    {

        /** YOUR COLLACTION **/
    $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 have added  product list with AJAX paging and add jquery in 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('*/*/filterproduct'); ?>?p='+pageno+', 
     success: function(data) {
         jQuery("#productlist").html(data);
     }
});
}
Where “productlist” is div id of your parent block.Add action for update to refresh your page block when clicked in paging.

public function filterproductAction()
{
    echo         

  Mage::app()->getLayout()
  ->createBlock('modulename/productlist')->setTemplate('modulename    
 /productlist.phtml')->toHtml();
}
Hope this code is useful for you happy coding..