如何排序我的HTML表格

我有我使用Javascript只喜歡這款內置HTML表格從中通用數據：如何排序我的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); 

});

來源

2016-12-23 Wel

添加的jsfiddle環節，也要考慮「排序」按鈕 – RomanPerekhrest

通過排序「行」在'dataset'中的一個「fields」中重新創建表格，但這可能會花費相當多的時間和資源，這取決於您的數據...您可以預先設置數據並將其保存在不同的「數據集」中，以便它可以執行此操作每次從服務器或數據庫讀取數據時，只有一次...這是一個想法。 –

我添加了jsfiddle – Wel

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

來源

2016-12-23 19:54:35 zurfyx

我試過dataset.sort並且沒有工作，我還需要使用Javascript – Wel

@請參閱排序示例。 – zurfyx

謝謝，但它真的不想返回正確的排序！從實際數據http://imgur.com/g6wMPKs查看屏幕截圖，這應該是desc – Wel

如何排序我的HTML表格

回答

相關問題