如何對我的HTML表格進行排序

Question

我只有使用Java使用它從中構建html表的通用數據，如下所示：

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);

如何允許用戶對列進行升序和降序排序？

jsfiddle

更新：排序代碼適用於字符串，但不適用於數字！

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

  return (nameA - nameB);   

});

Answer 1

我將預先對數據集進行排序 （ dataset.sort(...) ），並在排序順序（和數據集）每次更改時重新創建表行。

或使用諸如Bootstrap表之類的功能為您完成任務。

Bootstrap-如何對表列進行排序

編輯：

使用純JavaScript排序：

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

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

Desc（field1）：數據集dataset.sort((a,b) => b.field1 - a.field1)

編輯2：

如果使用字符串，請記住先將它們轉換為Number ：

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