如何排序我的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表格

回答

相关问题