如何排序我的HTML表格

Question

我有我使用Javascript只喜歡這款內置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

我sort數據集預先（dataset.sort(...)），並重新創建表的行每次排序順序（和數據集）的變化。

或者使用一些已經爲你做的事情，比如Bootstrap表。

Bootstrap - How to sort table columns

編輯：

與純JavaScript排序：

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

升序（FIELD1）：dataset.sort((a,b) => a.field1 - b.field1)

說明（FIELD1）：dataset.sort((a,b) => b.field1 - a.field1)

EDIT2：

如果您正在使用的字符串時，請記住，以將它們轉換成Number第一：

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