Simple jQuery List Sorting Plugin - List Sorter
File Size: | 98.3KB |
---|---|
Views Total: | 1578 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.