How to sort my html table

Question

I have generic data that I built html table from it using Javascript only like this:

HTML:

<div id="container"></div>

Javascript:

var dataset  = [ { "field1":"val1", "field2":"val2", "field3":"val3" }, { "field1":"val4", "field2":"val5", "field3":"val6", "field4":"val7" } ] ;

function addHeaders(table, keys) {
  var row = table.insertRow();
  for( var i = 0; i < keys.length; i++ ) {
    var cell = row.insertCell();

    cell.appendChild(document.createTextNode(keys[i]));
  }
}

var max_keys = 0;
var max_idx = 0;
for( var i = 0; i < dataset.length; i++ ) {

  var child = dataset[i];

  cur_keys = Object.keys(child).length;
  if (cur_keys > max_keys) {
      max_keys = cur_keys;
      max_idx = i;
  }

}

var table = document.createElement('table');
addHeaders(table, Object.keys(dataset[max_idx]));

for( var i = 0; i < dataset.length; i++ ) {

  var child = dataset[i];

  var row = table.insertRow();
  Object.keys(child).forEach(function(k) {

    var cell = row.insertCell();
    cell.appendChild(document.createTextNode(child[k]));
  })
}

document.getElementById('container').appendChild(table);

How I can allow user to sort the columns ascending and descending ?

jsfiddle

update: sorting code work for strings but not for numeric !!

dataset.sort(function (a, b) {    
  var nameA = Number(a.field2); 
  var nameB = Number(b.field2); 

  return (nameA - nameB);   

});

By sorting the "rows" in `dataset` by one of the "fields" and recreating the table, but it may be quite time and resources consuming depending on your data... you could presort the data and keep it in different "datasets" so it will do it only once every time you read your data from the server or DB... well is an idea. — DIEGO CARRASCAL, Dec 23 '16 at 19:22

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

I would sort the dataset beforehand (dataset.sort(...)), and recreate the table rows everytime the sorting order (and dataset) changes.

Or use something that gives this already done for you like Bootstrap tables.

Bootstrap - How to sort table columns

Edit:

Sorting with pure JavaScript:

const dataset  = [ { "field1":1, "field2":"val2", "field3":"val3" }, { "field1":4, "field2":"val5", "field3":"val6", "field4":"val7" } ];

Asc (field1): dataset.sort((a,b) => a.field1 - b.field1)

Desc (field1): dataset.sort((a,b) => b.field1 - a.field1)

Edit2:

If you are working with string, remember to cast them to Number first:

dataset.sort((a,b) => Number(a.field1) - Number(b.field1))

edited May 23 '17 at 12:24

Community

1
1

answered Dec 23 '16 at 19:54

zurfyx

31,043
20
111
145

I tried dataset.sort and did not work also I need to use Javascript only – zac Dec 23 '16 at 20:04
@Wel see sorting example. – zurfyx Dec 23 '16 at 20:10
thanks but it really does not want to return correct sorting !! see screenshot from actual data http://imgur.com/g6wMPKs this is should be desc – zac Dec 23 '16 at 20:15
@Wel By taking a look at the question, you might be trying to compare strings. You might want to cast them to `Number` before doing the comparison, see Edit2. – zurfyx Dec 23 '16 at 20:24
do you have time to chat ? http://chat.stackoverflow.com/rooms/info/131371/tab111?tab=general – zac Dec 23 '16 at 20:33
@Wel you need `<` or `>` for sorting strings. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort – zurfyx Dec 23 '16 at 20:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131372/discussion-between-wel-and-zurfyx). – zac Dec 23 '16 at 20:35
sorting code work for strings but not for numbers, please check my update above and advise – zac Dec 23 '16 at 22:13
@Wel it's `-` for `Number` (not `<` nor `>`), like it says on the documentation. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/sort See my second edit. – zurfyx Dec 23 '16 at 22:16
still I dont get correct sorting. see the code in my post I get the same result like in the screen shot above – zac Dec 23 '16 at 22:41
there is gaps between numbers I mean not all rows has numbers some are empty so the sorting seems to reset when it reach empty value – zac Dec 23 '16 at 22:52

How to sort my html table

1 Answers1