仅使用Javascript对表进行排序

在这个表中，我从JSON API中读取了

tbody

内容，现在我需要将其按列排序，并且只使用javascript而不使用Jquery

任何帮助都将不胜感激

我发现这正是我想要的，但我不知道如何从我的api中引用tbodies

var myRequest=new-XMLHttpRequest（）；
myRequest.open（'GET'，'https://jsonplaceholder.typicode.com/todos');
myRequest.onload=函数（）{
var myData=JSON.parse（myRequest.responseText）；
数据表（myData）；
};
myRequest.send（）；
函数数据表（数据）{
如果（data.length>0）{
var temp=“”；
data.forEach（（u）=>{
温度+=''；
temp+=“”+u.userId+“”；
温度+=“”+u.id+“”；
温度+=''+u.title+''；
温度+=“”+u.completed+“”；
document.getElementById（'data'）。innerHTML=temp；
});
}
}

用户ID
身份证件
标题
完成

这是我上的一堂速成课。 首先使用dt.load（）加载数据，然后当有人单击其中一个标题时，可以添加一个事件，该事件执行以下操作：

elm.addEventListener（“单击”，（e）=>{
prop=e.target.textContent.trim（）；
dt.sort（prop）；
dt.render（）；
})

类数据表{
负荷（arr）{
如果（arr）this.data=arr；
}
排序（道具）{
this.data.sort（（a，b）=>a[prop]-b[prop]）；
}
渲染（选择器=“#数据”）{
if（数据长度）{
html=data.map（u=>{
返回[
"",
`${u.userId}`，
`${u.id}`，
`${u.title}`，
`${u.completed}`
].加入（“”）；
}).加入（“”）；
document.querySelector（selector）.innerHTML=html；
}
}
}

重要信息-您希望能够同时对多个列进行排序，还是一次只对一列进行排序

首先在onload之外初始化myData。您将希望能够在onload之外访问这些结果以对其进行排序。JS提供的实际排序函数非常令人困惑，但它确实是实现普通JS数组排序的唯一方法

function sortData(col, asc = true) {
    //JS sort function
    myData = myData.sort((first, second) => {
        //sort logic

        if (first[col] == second[col]) {
                return 0;
        }

        if (asc) {
            if (first[col] > second[col]) {
                return 1;
            }
            else {
                return -1;
            }
        }
        else {
            if (first[col] > second[col]) {
                return -1;
            }
            else {
                return 1;
            }
        }
    });

    //Re-Create table
    dataTable(myData);
}

编辑：

我添加了排序逻辑，但肯定有可能我搞砸了。我现在无法实际测试这个功能，而且我已经多年没有接触过排序功能了。

var myData，asc={'userId'：true，'id'：true，'title'：true，'completed'：true}；
var myRequest=new XMLHttpRequest（）；
myRequest.open（'GET'，'https://jsonplaceholder.typicode.com/todos');
myRequest.onload=函数（）{
myData=JSON.parse（myRequest.responseText）；
数据表（myData）；
};
myRequest.send（）；
功能可排序（键）{
myData.sort（函数（a，b）{
如果（asc[键]）{
返回a[键]>b[键]？1:-1；
}
否则{
返回a[key]>b[key]？-1:1；；
}  
});
asc[key]=！asc[key]；
document.getElementById（'data'）。innerHTML=''；
数据表（myData）；
}
函数数据表（数据）{
如果（data.length>0）{
var temp=“”；
data.forEach（（u）=>{
温度+=''；
temp+=“”+u.userId+“”；
温度+=“”+u.id+“”；
温度+=''+u.title+''；
温度+=“”+u.completed+“”；
document.getElementById（'data'）。innerHTML=temp；
});
}
}

用户ID
身份证件
标题
完成

您是否尝试过如中所示的基本方法？是的，但速度太慢，无法很好地处理大数字您是否尝试过使用datatable？您可以参考以下URL:Sortable as in draggable或按javascript自动排序？我也不应该使用任何jquery或库，只使用vanilla javascriptAwesome，首先感谢大家，但这实际上非常有效，但是我还需要从asc切换到desc来查看修改后的代码段。我还可以麻烦您从asc反向排序到desc吗？@salehratin检查我的最新编辑