Reformatting HTML Table

Question

I currently have a basic html table that can sort by column, for example it looks like:

id | stationname | total
-------------------------
 1 | Khar        | 5
 2 | SantaCruz   | 3
 3 | Sion        | 2
 4 | VT          | 1
 5 | newFort     | 3
 6 | Bandra      | 2

But what I want is to display in a format similar to how products are displayed on a website, so:

Khar | SantaCruz | Sion
1    | 2         | 3
5    | 3         | 2

VT   | newFort   | Bandra 
4    | 5         | 6
1    | 3         | 2

But still retain the ability to sort by "id" "stationame" and "total". I appreciate any help!

Jon P · Accepted Answer

You haven't given us much to work with so I've cobbled the following together making some assumptions. The biggest of which is that you have a json data source.

The following is fairly flexible, you can change the layout with the basic html and css. The only real dependencies through to the javasctipt is the class names which are used for data binding and sorting.

Basically what we have happening is a template that is not rendered courtesy of wrapping it in

Yes this can be optimized but it should be good enough for a starting point

Alternately you can use the following

This does not rely on an existing data structure, but sorts the actual DOM nodes in an array.

Again you can change the layout via html and css. The class names are used to identify the sort key and sort values.

/*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

  
    Name: Khar
    Id: 1
    Total: 5
  
  
    Name: SantaCruz
    Id: 2
    Total: 3
  
  
    Name: Sion
    Id: 3
    Total: 2
  
  
    Name: VT
    Id: 4
    Total: 1
  
  
    Name: newFort
    Id: 5
    Total: 3
  
  
    Name: Bandra
    Id: 6
    Total: 2

Reformatting HTML Table

Answers (2)

Related Questions