Product Search, Filter, Paging & Grid/Row View

by wutyeetun87

HTML

<script src="http://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
<div id="control">
    <!-- Displayed Filters List -->
    <div style="float:left;width:40%;">
        <h3>Category</h3>
        <ul class="fake_filter">
            <li target="c1">Cable Technology</li> 
            <li target="c2">Light Switches &amp; Accessories</li> 
            <li target="c3">Lighting Accessories </li>
            <li target="c4">Light Fixtures &amp; Accessories</li> 
            <li target="c5">Trunking &amp; Pipe Power</li> 
            <li target="c6">Drills &amp; Handheld Gadget </li> 
            <li target="c7">Aircon Accessories</li>
            <li target="c8">CCM Electrical Materials</li>
            <li target="c9">Ventilating Fans &amp; Decorative Fans</li>
        </ul>
    </div>
    <div style="float:left;width:30%;">
        <h3>Sub Category</h3>
        <ul class="fake_filter">
            <li target="cc1">CC1</li>
            <li target="cc2">CC2</li>
            <li target="cc3">CC3</li>
        </ul>
    </div>
    <div style="float:left;width:30%;">
        <h3>Brand</h3>
        <ul class="fake_filter">
            <li target="3m">3M</li>
            <li target="advanced">Advanced</li>
            <li target="ccm">CCM</li>
            <li target="elmark">Elmark</li>
            <li target="holdkey">Holdkey</li>
            <li target="lapp">Lapp</li>
            <li target="cable">Cable</li> 
            <li target="kdk">KDK</li>
            <li target="keystone">Keystone</li>
            <li target="tj">TJ</li>
        </ul>
    </div>
    <!-- Hidden Filters Checkbox List -->
    <article id="filters" style="display:none;">
    <section id="category">
        <p id="fHeader"><b>Category</b></p>
        <input type="checkbox" name="fl-category" value="c1" id="c1" />Cable Technology
        <input type="checkbox" name="fl-category" value="c2" id="c2" />Light Switches &amp; Accessories
        <input type="checkbox"...

CSS

html,body{
    font-family:Arial;
    font-size:12px;
    margin:0;
    padding:0;
}
#control{
    float:left;
    width:100%;
    background:#e8e8e8;
    border-bottom:1px solid #555;
    padding:10px;
}
#search_div {float:left;width:30%;}
#paging_div {float:left;width:60%;}
#view_div {float:left;width:10%;}

#product{}
#product .item.grid{
    float:left;
    min-width:130px;
    width:30%;
    padding:10px .2%;
    border:1px solid #dfdfdf;
    margin:5px 1%;
}
#product .item.row{
    float:left;
    width:96%;
    padding:1%;
    border:1px solid #dfdfdf;
    margin:5px 1%;
}
#product .item.grid .image,
#product .item.grid .description{
    margin:0 auto;
    text-align:center;
}
#product .item.row .image{
    float:left;
    width:150px;
    padding:5px;
}
#paging ul { float:left;margin:0;}
#paging li,
#paging_div #view_all {
    float:left;
    font-size:13px;
    padding:2px 4px;
    margin-left:3px;
    list-style:none;
    color:#666;
}
#paging li.active {
    color:#000;
}
#paging li a {
    color:#aaa;
    text-decoration:none;
}
.fake_filter li {
    list-style:none;
    padding:2px 0 2px 20px;
    margin-bottom:2px;
    cursor:pointer;
    background:transparent url('http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif') no-repeat left;
}
.fake_filter li.selected {
    background:transparent url('http://www.simplycharmingsocials.com/wp-content/themes/simplycharmingsocials/images/ui_shortcodes/list-bullets/green-tick.png') no-repeat left;
}

JavaScript

$(document).ready(function(){
    
    // paging setup
    var no_items = $('div.item').length;
    var no_items_per_page = 5; 
    var no_of_pages = Math.round(no_items / no_items_per_page); // page count
    
    // paging plug-in call
    $('#paging').pagination({
        pages: no_of_pages,
        displayedPages: 2, // Eg: 1 2
        edges: 2, // Eg: 1 2 ...
        onPageClick : function(){
            showItemByPageNumber();
			adjustMargin();
        }
    });
    
    // view all
    $('#paging_div #view_all').on('click', function(){
        $('#s_category').val('');
        $('#product .item').fadeIn(400);
		adjustMargin();
    });
    
    // show page no.1
    showItemByPageOne();
    function showItemByPageOne() {
        var current_pg = 1;
        // set page one items
        $('#product .item').fadeOut(0);
        $('#product .item').slice(0,no_items_per_page).fadeIn(400);
    }
    
    // show page by selected no.
    function showItemByPageNumber() {
        $('#product .item').fadeOut(0);
        
        var current_pg = $('#paging li span.current').text();
        
        if(current_pg.indexOf('Next') > -1) {
            var str = current_pg;
            var rep = str.replace('Next', '');
            current_pg = rep;
            
            var start = (current_pg-1) * no_items_per_page;
            var end = current_pg * no_items_per_page;
            $('#product .item').slice(start,end).fadeIn(400);
        }    
        else if(current_pg === 'Prev1') {
            $('#product .item').hide(0);
            $('#product .item').slice(0,no_items_per_page).fadeIn(400);
        } 
        else{
            current_pg = current_pg;
            
            var start = (current_pg-1) * no_items_per_page;
            var end = current_pg * no_items_per_page;
            $('#product .item').slice(start,end).fadeIn(400);
        }
    }

    $('#grid_view').on('click',...