Create a Magento Custom grid – Frontend

Step 1

Create a layout for action index: app/design/frontend/base/default/modulename.xml

<layout version="0.1.0">
<modulename_index_index>
<reference name="content">
<block type="modulename/blockname" name="modulename" template="modulename/modulename.phtml" />
</reference>
</modulename_index_index>
</layout>

Step 2

app/code/local/Packagename/Modulename/controllers/IndexController.php

class Packagename_Modulename_IndexController extends Mage_Core_Controller_Front_Action
{

  public function indexAction()
  {
    $this->loadLayout();
    $this->renderLayout();
  }
}

 Step 3

app/code/local/Packagename/Modulename/Block/Blockname.php

class Packagename_Modulename_Block_Blockname extends Mage_Core_Block_Template
{
      public function __construct()
      {
           parent::__construct();
           $collection = Mage::getModel('modelname/modelname')->getCollection();
           $this->setCollection($collection);
       }
}

 Step 4

<?php echo $this->getPagerHtml() ?>
<table id="my-data-table" class="data-table">
<colgroup>
<col width="1">
<col width="1">
<col>
</colgroup>
<thead>
<tr class="first last">
<th><?php echo $this->__('No.')?></th>
<th><?php echo $this->__('Name')?></th>
<th><?php echo $this->__('Time')?></th>
</tr>
</thead>
<tbody>
<?php foreach($this->getCollection() as $data): ?>
<tr>
<td><?php echo $person->getData('id')?></td>
<td><?php echo $person->getData('name')?></td>
<td><?php echo Mage::helper('core')->formatDate($data->getData('time'))?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>
<?php echo $this->getPagerHtml() ?>
<script type="text/javascript">decorateTable('my-data-table')</script>

Step 5

app/code/local/Packagename/Modulename/Block/Blockname.php

public function _prepareLayout()
{
     parent::_prepareLayout();
     $pager = $this->getLayout()->createBlock('page/html_pager', 'block.pager')->setCollection($this->getCollection());
     $this->setChild('pager', $pager);
     return $this;
}
public function getPagerHtml()
{
     return $this->getChildHtml('pager');
}