Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I Think you are looking for the functionality like this : <img src="https://i.stack.imgur.com/tVt6Y.jpg" alt="Alpabatical Navigation Jquery"> For This Use Following Code :</p> <p>jquery code :</p> <pre><code>&lt;script&gt; $x = jQuery.noConflict(); $x(function() { var _alphabets = $x('.alphabet &gt; a'); var _contentRows = $x('#countries-table tbody tr'); _alphabets.click(function() { var _letter = $x(this), _text = $x(this).text(), _count = 0; _alphabets.removeClass("active"); _letter.addClass("active"); _contentRows.hide(); _contentRows.each(function(i) { var _cellText = $x(this).children('td').eq(0).text(); if (RegExp('^' + _text).test(_cellText)) { _count += 1; $x(this).fadeIn(400); } }); }); }); &lt;/script&gt; </code></pre> <p>phtml Code :</p> <pre><code>&lt;?php $innerhtml = ""; $_helper = Mage::helper('catalog/category') ?&gt; &lt;?php $_categories = $_helper-&gt;getStoreCategories() ?&gt; &lt;?php $currentCategory = Mage::registry('current_category') ?&gt; &lt;?php if (count($_categories) &gt; 0): ?&gt; &lt;?php foreach ($_categories as $_category): $innerhtml.="&lt;tr&gt;&lt;td&gt;&lt;a href=".$_helper-&gt;getCategoryUrl($_category)."&gt;".$_category-&gt;getName()."&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;"; ?&gt; &lt;?php $_category = Mage::getModel('catalog/category')-&gt;load($_category-&gt;getId()) ?&gt; &lt;?php $_subcategories = $_category-&gt;getChildrenCategories() ?&gt; &lt;?php if (count($_subcategories) &gt; 0): ?&gt; &lt;?php foreach ($_subcategories as $_subcategory): $innerhtml.="&lt;tr&gt;&lt;td&gt;&lt;a href=".$_helper-&gt;getCategoryUrl($_subcategory)."&gt;".$_subcategory-&gt;getName()."&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;"; ?&gt; &lt;?php endforeach; ?&gt; &lt;?php endif; ?&gt; &lt;?php endforeach; ?&gt; &lt;?php endif; ?&gt; &lt;h1&gt;Product Categories&lt;/h1&gt; &lt;div class="alphabet" style=""&gt; &lt;a class="first" href="#"&gt;A&lt;/a&gt; &lt;a href="#"&gt;B&lt;/a&gt; &lt;a href="#"&gt;C&lt;/a&gt; &lt;a href="#"&gt;D&lt;/a&gt; &lt;a href="#"&gt;E&lt;/a&gt; &lt;a href="#"&gt;F&lt;/a&gt; &lt;a href="#"&gt;G&lt;/a&gt; &lt;a href="#"&gt;H&lt;/a&gt; &lt;a href="#"&gt;I&lt;/a&gt; &lt;a href="#"&gt;J&lt;/a&gt; &lt;a href="#"&gt;K&lt;/a&gt; &lt;a href="#"&gt;L&lt;/a&gt; &lt;a href="#"&gt;M&lt;/a&gt; &lt;a href="#"&gt;N&lt;/a&gt; &lt;a href="#"&gt;O&lt;/a&gt; &lt;a href="#"&gt;P&lt;/a&gt; &lt;a href="#"&gt;Q&lt;/a&gt; &lt;a href="#"&gt;R&lt;/a&gt; &lt;a href="#"&gt;S&lt;/a&gt; &lt;a href="#"&gt;T&lt;/a&gt; &lt;a href="#"&gt;U&lt;/a&gt; &lt;a href="#"&gt;V&lt;/a&gt; &lt;a href="#"&gt;W&lt;/a&gt; &lt;a href="#"&gt;X&lt;/a&gt; &lt;a href="#"&gt;Y&lt;/a&gt; &lt;a class="last" href="#"&gt;Z&lt;/a&gt; &lt;/div&gt; &lt;div id="conutries"&gt; &lt;table id="countries-table"&gt; &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Category Name&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt; &lt;tbody&gt; &lt;?php echo $innerhtml; ?&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p>Stylesheet is :</p> <pre><code>#conutries { width: 650px; background: white; } #countries-table { border-spacing: 2px; } .alphabet { margin: 0 0 10px; overflow: hidden; } .alphabet a, #countries-table tr { transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out; } .alphabet a { width: 20px; float: left; color: #333; cursor: pointer; height: 20px; border: 1px solid #CCC; display: block; padding: 2px 2px; font-size: 14px; text-align: center; line-height: 20px; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); border-right: none; text-decoration: none; background-color: #F1F1F1; } .alphabet a.first { border-radius: 3px 0 0 3px; } .alphabet a.last { border-right: 1px solid silver; border-radius: 0 3px 3px 0; } .alphabet a:hover, .alphabet a.active { background: #FBF8E9; font-weight: bold; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload