Home

Introducion

listSorter is a jQuery plugin which could be used to sort the lists which look like tables.

jQuery.tablesorter is an awesome plugin to sort tables. Thanks to [Christian Bach] (https://twitter.com/lovepeacenukes)

I was using this plugin and life was good, but then, in one of my projects the data in tables grew exponentially which started affecting the performance. It was decided that we should ditch the tables altogether and use lists instead. Using a list instead of table was a good idea, it improved the performance, but we were not able to sort the columns anymore as jquery.tablesorter works only on tables.

So I decided to create a separate plugin to sort the lists which look like tables.

How to use

The HTML code should look like the code below:

 <div id="tableLikeList">
    <div class="thead">
        <div data-idx="0" class="gs grid-1of2 hcell pointer">
           <p>Name
              <span class="icn"></span>
           </p>
        </div>
        <div data-idx="1" class="gs grid-1of2 hcell pointer">
            <p class="last">Age
                <span class="icn"></span>
            </p>
        </div>
    </div>
    <ul class="tbody cb">
        <li class="clientListItem cb clearfix">
            <div data-idx="0" class="pointer gs grid-1of2 cell">
                <p>Aman Dogra</p>
            </div>
            <div data-idx="1" class="pointer gs grid-1of2 cell">
                <p>30</p>
            </div>
        </li>
        <li class="clientListItem cb clearfix">
            <div data-idx="0" class="pointer gs grid-1of2 cell">
                <p>Harry Potter</p>
            </div>
            <div data-idx="1" class="pointer gs grid-1of2 cell">
                <p>20</p>
            </div>
       </li>
       <li class="clientListItem cb clearfix">
            <div data-idx="0" class="pointer gs grid-1of2 cell">
                <p>Hiro Nakamura</p>
            </div>
            <div data-idx="1" class="pointer gs grid-1of2 cell">
                <p>25</p>
            </div>
       </li>
    </ul>
</div>

To initiate the plugin do the following:

$('#tableLikeList').listSorter();

Add the following CSS styles to make it look useful: .gs { float: left; min - height: 1px; }

.grid - 1of1 {
    width: 100 % ;
}

.grid - 1of2 {
    width: 50 % ;
}

.cb {
    clear: both;
}

.clearfix: before,
.clearfix: after {
    content: " ";
    display: table;
}

.clearfix: after {
    clear: both;
}

ul {
    list - style: none;
}

.headerSortDown .icn,
.headerSortUp .icn {
    background: transparent url("asc.gif") no-repeat 0 0;
    display: inline;
    height: 13px;
    right: 5px;
    position: absolute;
    top: 8px;
    width: 13px;
}

.headerSortUp .icn {
    background: transparent url("desc.gif") no-repeat 0 0;
    right: 1px;
}