单击时按字母顺序对div排序

Question

I have a grid which has five columns. Is there a way to sort the columns when a the particular heading is clicked? For example, when name is clicked, the columns are sorted in ascending order and vice versa. I am not using tables. All the data is displayed using divs`

 <div class="Table" id="tab"> <div class="Title"> <p>Financial data</p> </div> <div class="Heading"> <div class="Cell"> <p>Name</p> </div> <div class="Cell"> <p>Plan</p> </div> <div class="Cell"> <p>Forecast</p> </div> <div class="Cell"> <p>Best Case</p> </div> <div class="Cell"> <p>Commit</p> </div> </div> <!-- Structure to display the JSON Data--> <div class="Row"> <div class="Cell"> <p id="country_name1"></p> </div> <div class="Cell"> <p id="plan_1"></p> </div> <div class="Cell"> <p id="forecast_1"></p> </div> <div id="col3" class="Cell"> <p id="best_case1"></p> <p class="ftype" id="best_case1.1"></p> </div> <div id="col4" class="Cell"> <p id="commit1"></p> <p class="ftype" id="commit1.1"></p> </div> </div> 

Can this be done using javascript or jquery?

Answer 1

It can be done with different plugins, for example:

TinySort (rewritten in pure Javascript, compatible with divs) http://tinysort.sjeiti.com

Datatables (jQuery) https://datatables.net/examples/basic_init/table_sorting.html

Tablesorter (jQuery) http://tablesorter.com/docs/

Other examples on Tympanus https://tympanus.net/codrops/2009/10/03/33-javascript-solutions-for-sorting-tables/

Answer 2

You can keep it in an array and then you can use sort, if you put all the names with the same class you can take it like

var x = document.getElementsByClassName("Name").innerHTML;
x.sort(function(a, b) { return b - a });

for (var i = 0; i < x.length; i++) {
    document.getElementsByClassName("Name").innerHTML = x[i] ;
}