Simple jQuery List Sorting Plugin - List Sorter

List Sorter is an easy and fast jQuery plugin which converts a standard Html unordered list into a sortable list, similar to the table sorter plugin.

Basic Usage:

1. The HList Sorter plugin requires the jQuery library already loaded.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.listSorter.js"></script>

2. Include Bootstrap framework to style the sortable list (Optional).

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css" />

3. Markup Html structure.

<div id="tableLikeList" class="row panel panel-default">
<div class="thead panel-heading clearfix">
<div data-idx="0" class="col-md-6 hcell">
<p class="text-center"><strong>Name</strong> <span class="glyphicon"></span> </p>
</div>
<div data-idx="1" class="col-md-6 hcell">
<p class="text-center"><strong>Age</strong> <span class="glyphicon"></span> </p>
</div>
</div>
<ul class="tbody cb list-group">
<li class="list-group-item clearfix">
<div data-idx="0" class="pointer col-md-6 cell">
<p class="text-center">Aman Dogra</p>
</div>
<div data-idx="1" class="pointer col-md-6 cell">
<p class="text-center">30</p>
</div>
</li>
<li class="list-group-item clearfix">
<div data-idx="0" class="pointer col-md-6 cell">
<p class="text-center">Harry Potter</p>
</div>
<div data-idx="1" class="pointer col-md-6 cell">
<p class="text-center">20</p>
</div>
</li>
<li class="list-group-item clearfix">
<div data-idx="0" class="pointer col-md-6 cell">
<p class="text-center">Hiro Nakamura</p>
</div>
<div data-idx="1" class="pointer col-md-6 cell">
<p class="text-center">35</p>
</div>
</li>
<li class="list-group-item clearfix">
<div data-idx="0" class="pointer col-md-6 cell">
<p class="text-center">Zack Nicholas</p>
</div>
<div data-idx="1" class="pointer col-md-6 cell">
<p class="text-center">15</p>
</div>
</li>
</ul>
</div>

4. The CSS for the sort icon.

ul {
list-style: none;
}
.headerSortDown .glyphicon:before {
content: "\e114";
}
.headerSortUp .glyphicon:before {
content: "\e113";
}

5. Just call the plugin and you're done.

<script>
$('#tableLikeList').listSorter({
sortList : [[0,0]] // Array of [count, order] to provide the default sorting 
});
</script>

6. Settings

headerClass: ".thead", // Class of the div behaving as thead of the table
headClass: ".hcell", // Class on each of the cells in the header
bodyClass: ".tbody", // Class of the ul behaving as the tbody of the table
rowSelector: "li", // Selector for the rows (list elements) in the table
cellClass: ".cell", // Class on each of the div in the li of the ul with 'bodyClass' 
cssAsc: "headerSortUp", // Class to apply on the header cell to show the ascending arrow
cssDesc: "headerSortDown", // Class to apply on the header cell to show the descending arrow
parsers: {}, // List of all the parsers which will be applied on this table. This is sorted per columns of the table.
headers: {}, // To enable/disable sorting on specific headers of a specific type. 0: { sorter: text}, 1: {sorter: false}, 2: {sorter: numeric}
sortList: [], // Example: $('#targetDiv').listSorter({ sortList: [[0,1]] });  This will sort first (0) column of the table in descending(1) order
headerList: [], // Array to contain the list of header cells
sortInitialOrder: "asc", // "asc" or "desc". Default is "asc" (ascending).

---

This awesome jQuery plugin is developed by amandogra. For more Advanced Usages, please check the demo page or visit the official website.