[英]How to sort my html table
I have generic data that I built html table from it using Javascript only like this: 我只有使用Java使用它从中构建html表的通用数据,如下所示:
HTML: HTML:
<div id="container"></div>
Javascript: 使用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 ? 如何允许用户对列进行升序和降序排序?
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);
});
I would sort the dataset beforehand ( dataset.sort(...)
), and recreate the table rows everytime the sorting order (and dataset) changes. 我将预先对数据集进行排序 (
dataset.sort(...)
),并在排序顺序(和数据集)每次更改时重新创建表行。
Or use something that gives this already done for you like Bootstrap tables. 或使用诸如Bootstrap表之类的功能为您完成任务。
Bootstrap - How to sort table columns Bootstrap-如何对表列进行排序
Edit: 编辑:
Sorting with pure JavaScript: 使用纯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)
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)
Desc(field1):数据集
dataset.sort((a,b) => b.field1 - a.field1)
Edit2: 编辑2:
If you are working with string, remember to cast them to Number
first: 如果使用字符串,请记住先将它们转换为
Number
:
dataset.sort((a,b) => Number(a.field1) - Number(b.field1))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.