Вы не дали нам много работы, поэтому я собрал все вместе, делая некоторые предположения.Самым большим из них является то, что у вас есть json источник данных.
Следующее довольно гибкое, вы можете изменить макет с помощью базовых html и css.Единственная реальная зависимость от javasctipt - это имена классов, которые используются для привязки и сортировки данных.
По сути, мы имеем дело с шаблоном, который не был предоставлен в качестве оболочки в <script type="text/template" id="stationsTemplate">.У нас также есть представление json, которое мы можем отсортировать, используя метод dynamicSort.Наконец, мы используем делегирование событий для обработки событий щелчка для динамически добавляемых элементов.
/*Table Data*/
var stations = [{
id: 1,
name: "Khar",
total: 5
},
{
id: 2,
name: "SantaCruz",
total: 3
},
{
id: 3,
name: "Sion",
total: 2
},
{
id: 4,
name: "VT",
total: 1
},
{
id: 5,
name: "newFort",
total: 3
},
{
id: 6,
name: "Bandra",
total: 2
}
];
/*Performs the sort on the obect property passed*/
function dynamicSort(property) {
return function(a, b) {
var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
return result;
}
}
//Generates the list
function generateList(sortedStations) {
//Set Up the template
var s = document.getElementById("stationsTemplate").innerHTML.trim();
var holder = document.createElement('div');
holder.innerHTML = s;
var template = holder.childNodes;
var stations = document.getElementById('stations');
stations.innerHTML = "";
sortedStations.forEach(function(object) {
//Clone Template
var newItem = template[0].cloneNode(true);
//Populate it
newItem.querySelector(".name").innerHTML = object.name;
newItem.querySelector(".id").innerHTML = object.id;
newItem.querySelector(".total").innerHTML = object.total;
//Append it
document.getElementById("stations").appendChild(newItem);
});
}
//Add event listener to the list and then use event delegation
document.getElementById("stations").addEventListener('click', function(e) {
if (e.target) {
var sortKey = "";
if (e.target.classList.contains("lblId")) {
sortKey = "id";
} else if (e.target.classList.contains("lblName")) {
sortKey = "name";
} else if (e.target.classList.contains("lblTotal")) {
sortKey = "total";
}
}
if (sortKey !== "") {
generateList(stations.sort(dynamicSort(sortKey)));
}
});
//Initial build
generateList(stations);
#stations {
list-style: none;
padding: 0;
}
#stations li {
display: inline-block;
width: 250px;
margin: 10px;
background-color: #CCC;
padding: 5px;
vertical-align: top;
}
#stations label {
font-weight: bold;
cursor: pointer;
}
Click on label to sort
<ul id="stations">
</ul>
<!-- Template for our stations -->
<script type="text/template" id="stationsTemplate">
<li>
<div><label class="lblName">Name:</label> <span class="name"></span></div>
<div><label class="lblId">Id: </label><span class="id"></span></div>
<div><label class="lblTotal">Total: </label><span class="total"></span></div>
</li>
</script>
Да, это можно оптимизировать, но оно должно быть достаточно для начальной точки
В качестве альтернативы вы можете использоватьследующий
Это не зависит от существующей структуры данных, но сортирует фактические узлы DOM в массиве.
Снова вы можете изменить макет с помощью html и css.Имена классов используются для идентификации ключа сортировки и значений сортировки.
/*Performs the sort on the obect property passed*/
function dynamicSort(property) {
return function(a, b) {
var selector = "." + property;
var aVal = a.querySelector(selector).innerHTML;
var bVal = b.querySelector(selector).innerHTML;
//Convert to number if appropriate - adjust if you need other data types
if (!isNaN(aVal) && !isNaN(bVal)) {
aVal = parseFloat(aVal);
bVal = parseFloat(bVal);
}
var result = (aVal < bVal) ? -1 : (aVal > bVal) ? 1 : 0;
return result;
}
}
//Generates the list
function sortList(sortKey) {
//Convert Node LIst to array
var arrItems = Array.prototype.slice.call(document.querySelectorAll("#stations li"));
//Sort using our key
arrItems.sort(dynamicSort(sortKey));
//Append to original list
var list = document.getElementById("stations");
for (var i = 0; i < arrItems.length; i++) {
list.appendChild(arrItems[i]);
}
}
//Add event listener to the list and then use event delegation
document.getElementById("stations").addEventListener('click', function(e) {
if (e.target) {
var sortKey = "";
if (e.target.classList.contains("lblId")) {
sortKey = "id";
} else if (e.target.classList.contains("lblName")) {
sortKey = "name";
} else if (e.target.classList.contains("lblTotal")) {
sortKey = "total";
}
}
if (sortKey !== "") {
sortList(sortKey);
}
});
#stations {
list-style: none;
padding: 0;
}
#stations li {
display: inline-block;
width: 250px;
margin: 10px;
background-color: #CCC;
padding: 5px;
vertical-align: top;
}
#stations label {
font-weight: bold;
cursor: pointer;
}
Click on label to sort
<ul id="stations">
<li>
<div><label class="lblName">Name:</label> <span class="name">Khar</span></div>
<div><label class="lblId">Id: </label><span class="id">1</span></div>
<div><label class="lblTotal">Total: </label><span class="total">5</span></div>
</li>
<li>
<div><label class="lblName">Name:</label> <span class="name">SantaCruz</span></div>
<div><label class="lblId">Id: </label><span class="id">2</span></div>
<div><label class="lblTotal">Total: </label><span class="total">3</span></div>
</li>
<li>
<div><label class="lblName">Name:</label> <span class="name">Sion</span></div>
<div><label class="lblId">Id: </label><span class="id">3</span></div>
<div><label class="lblTotal">Total: </label><span class="total">2</span></div>
</li>
<li>
<div><label class="lblName">Name:</label> <span class="name">VT</span></div>
<div><label class="lblId">Id: </label><span class="id">4</span></div>
<div><label class="lblTotal">Total: </label><span class="total">1</span></div>
</li>
<li>
<div><label class="lblName">Name:</label> <span class="name">newFort</span></div>
<div><label class="lblId">Id: </label><span class="id">5</span></div>
<div><label class="lblTotal">Total: </label><span class="total">3</span></div>
</li>
<li>
<div><label class="lblName">Name:</label> <span class="name">Bandra</span></div>
<div><label class="lblId">Id: </label><span class="id">6</span></div>
<div><label class="lblTotal">Total: </label><span class="total">2</span></div>
</li>
</ul>