Sorting as we all know refers to the rearrangement of data in some predefined format, it can either be ascending or descending or alphabetically or numerically. This is a small blog on sorting the list data using jquery. Here is a sample code to sort the list data alphabetically. Without wasting any time let's just start with our code.
Step 1: You are required to add the following link to your web page.
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> |
Step 2: Here is sample html code. You can add your our html code to your page.
<body>
<ul class="sorting-filter clearfix">
<li><a href="#all" class="active">All</a></li>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#d">D</a></li>
</ul>
<ul class="sorting_list">
<li class="a">
<h3>A</h3>
<p>Mauris quis augue ut metus ullamcorper auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse convallis auctor turpis, quis placerat felis ornare vitae. Maecenas non suscipit felis. Nunc semper tincidunt eros a gravida. Donec in ultrices mauris. Nunc dictum libero ac urna dignissim fermentum. Mauris ac arcu nunc. Nullam venenatis nibh eu eros tempor semper. Curabitur volutpat leo a elit tristique, in viverra nulla finibus. Vivamus justo libero, accumsan elementum diam eget, lobortis condimentum massa. Duis hendrerit, lorem eu dictum ornare, massa enim posuere lectus, et eleifend nulla orci sit amet lectus. Pellentesque vehicula justo id est faucibus, vitae ullamcorper sapien porttitor. Aliquam mollis ipsum varius luctus facilisis. Curabitur mauris ipsum, bibendum quis lorem et, imperdiet scelerisque felis.</p>
</li>
<li class="b">
<h3>B</h3>
<p>Mauris quis augue ut metus ullamcorper auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse convallis auctor turpis, quis placerat felis ornare vitae. Maecenas non suscipit felis. Nunc semper tincidunt eros a gravida. Donec in ultrices mauris. Nunc dictum libero ac urna dignissim fermentum. Mauris ac arcu nunc. Nullam venenatis nibh eu eros tempor semper. Curabitur volutpat leo a elit tristique, in viverra nulla finibus. Vivamus justo libero, accumsan elementum diam eget, lobortis condimentum massa. Duis hendrerit, lorem eu dictum ornare, massa enim posuere lectus, et eleifend nulla orci sit amet lectus. Pellentesque vehicula justo id est faucibus, vitae ullamcorper sapien porttitor. Aliquam mollis ipsum varius luctus facilisis. Curabitur mauris ipsum, bibendum quis lorem et, imperdiet scelerisque felis.</p>
</li>
<li class="c">
<h3>C</h3>
<p>Mauris quis augue ut metus ullamcorper auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse convallis auctor turpis, quis placerat felis ornare vitae. Maecenas non suscipit felis. Nunc semper tincidunt eros a gravida. Donec in ultrices mauris. Nunc dictum libero ac urna dignissim fermentum. Mauris ac arcu nunc. Nullam venenatis nibh eu eros tempor semper. Curabitur volutpat leo a elit tristique, in viverra nulla finibus. Vivamus justo libero, accumsan elementum diam eget, lobortis condimentum massa. Duis hendrerit, lorem eu dictum ornare, massa enim posuere lectus, et eleifend nulla orci sit amet lectus. Pellentesque vehicula justo id est faucibus, vitae ullamcorper sapien porttitor. Aliquam mollis ipsum varius luctus facilisis. Curabitur mauris ipsum, bibendum quis lorem et, imperdiet scelerisque felis.</p>
</li>
<li class="d">
<h3>D</h3>
<p>Mauris quis augue ut metus ullamcorper auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse convallis auctor turpis, quis placerat felis ornare vitae. Maecenas non suscipit felis. Nunc semper tincidunt eros a gravida. Donec in ultrices mauris. Nunc dictum libero ac urna dignissim fermentum. Mauris ac arcu nunc. Nullam venenatis nibh eu eros tempor semper. Curabitur volutpat leo a elit tristique, in viverra nulla finibus. Vivamus justo libero, accumsan elementum diam eget, lobortis condimentum massa. Duis hendrerit, lorem eu dictum ornare, massa enim posuere lectus, et eleifend nulla orci sit amet lectus. Pellentesque vehicula justo id est faucibus, vitae ullamcorper sapien porttitor. Aliquam mollis ipsum varius luctus facilisis. Curabitur mauris ipsum, bibendum quis lorem et, imperdiet scelerisque felis.</p>
</li>
</ul>
</body>
Step 3: Simple css code that I have applied in my page for basic styling.
*{list-style: none;text-decoration: none;padding: 0;margin: 0;}
.hide {display: none;}
ul {padding: 15px;}
li {display: inline-block;padding: 0 15px;}
li a {padding: 3px 6px;display: block;border-radius: 4px;}
li .active {background-color: #f7811f;color: #fff;}
.sorting_list li {width: 25%;float: left;box-sizing: border-box;}
.sorting_list li p {text-align: justify;}
Step 4: Here comes the main section of the program- the js code
<script type="text/javascript">
$('.sorting-filter a').click(function(e) {
$('.sorting-filter a').removeClass('active');
$(this).addClass('active');
e.preventDefault();
var f = $(this).attr('href');
f = f.substr(1);
$('.sorting_list > li').each(function() {
if (!$(this).hasClass(f) && f != 'all')
$(this).addClass('hide');
else
$(this).removeClass('hide');
});
});
</script>
Happy Coding :)
0 Comment(s)