在网站上显示数据时，提供使用户更容易浏览数据的功能非常重要。其中一项功能是对数据进行排序的能力。

数据排序是指将数据按照指定的值，按升序或降序排列。我们可以使用 JavaScript 在网站的客户端手动处理数据排序。如果您在静态网站上工作或从服务器中删除排序数据的冲击，这将特别有用。

在本教程中，我们将使用 JavaScript 将来自模拟 JSON 响应的数据显示到 HTML 表中。我们还将包括根据表头中的值使表可排序的功能。

下面来看看成品。单击任何表格标题以对表格进行相应的排序。

1.用 HTML 放置内容

标签是用于在网页上显示数据的语义 HTML 标签。我们将把我们的标签放在一个表格容器 div 中，这将允许我们在 CSS 中包含一些响应式样式。

我们的表格将包含表格标题、thead表格内容、tbody标签。在我们的表格标题中，我们将在每个th单元格中包含用于处理排序功能的按钮。表格内容的单元格将使用来自我们 JSON 响应的数据通过 JavaScript 添加。

Name	Type	HP	Attack	Defense	Sp. Attack	Sp. Defense	Speed	Total

2.使用 CSS 制作响应式表格

使用 HTML 表格时更常见的问题之一是缺乏响应能力。表格可能存在单元格重叠问题或超出整页边界。

我们可以通过将表格放置在一个表格容器中来解决这些问题，该表格容器是具有溢出滚动属性的整个页面的宽度。这样，表格总是只有整页宽，并且由于可滚动溢出，无需缩小单元格。我们还将在表格单元格中包含 min-width 属性以避免文本换行。

表格溢出视口而不被压扁

这是使我们的表格可滚动所需的 CSS：

.table-container {

width: 100%;

overflow: scroll;

}

table {

width: 100%;

}

然后我们可以添加其余的样式：

.table-container {

margin: auto;

max-width: 1200px;

min-height: 100vh;

overflow: scroll;

width: 100%;

}

table {

border-collapse: collapse;

width: 100%;

}

thead tr {

border-bottom: 1px solid #ddd;

border-top: 1px solid #ddd;

height: 1px;

}

th {

font-weight: bold;

height: inherit;

padding: 0;

}

th:not(:first-of-type) {

border-left: 1px solid #ddd;

}

th button {

background-color: #eee;

border: none;

cursor: pointer;

display: block;

font: inherit;

height: 100%;

margin: 0;

min-width: max-content;

padding: 0.5rem 1rem;

position: relative;

text-align: left;

width: 100%;

}

tbody tr {

border-bottom: 1px solid #ddd;

}

td {

padding: 0.5rem 1rem;

text-align: left;

}

3.将 JSON 数据放入 HTML 表中

对于此示例，我们将使用模拟解析的 JSON 响应。这是我们的数据的样子：

const response = {

"pokedata": [

{

"name": "Bulbasaur",

"type": "Grass",

"hp": 45,

"attack": 49,

"defense": 49,

"spAttack": 65,

"spDefense": 65,

"speed": 45,

"total": 318

},

...

]

}

我们将把数据放在我们的标签中，以便我们在 JavaScript 中定位该元素；

const tableContent = document.getElementById("table-content")

行内容将基于我们的response.pokedata. 让我们定义一个基于对象数据创建新行的函数：

const createRow = (obj) => {

const row = document.createElement("tr");

const objKeys = Object.keys(obj);

objKeys.map((key) => {

const cell = document.createElement("td");

cell.setAttribute("data-attr", key);

cell.innerHTML = obj[key];

row.appendChild(cell);

});

return row;

};

在这个函数中，我们使用Object.keys()方法来获取对象键作为一个数组。这是返回值的样子：

Object.keys() 返回一个包含对象键的数组

一旦我们获得了对象键的数组，我们就使用该.map()方法遍历每个键。map 方法在数组中的每个项目上执行我们传递给它的函数。

在这个 map 函数中，我们为数组中的每个项目创建一个新单元格，并将单元格 innerHTML 设置为相应的对象键值。

使用键数组映射对象

最后，我们使用该方法将我们创建的单元格附加到函数开头定义的行中.appendChild()。

现在我们有了行创建函数，我们将定义一个函数来循环遍历response.pokedata数组并将每个新行附加到我们的tableContent元素。

const getTableContent = (data) => {

data.map((obj) => {

const row = createRow(obj);

tableContent.appendChild(row);

});

};

我们将把我们的getTableContent函数传递给一个事件监听器，以便在页面加载后将内容添加到表中。

window.addEventListener("load", () => {

getTableContent(response.pokedata);

});

4.使用 JavaScript 对数据进行排序

现在我们已经创建了表格，让我们添加排序功能。在我们的 HTML 中，我们在标题单元格中包含按钮，这些按钮将对象键作为其 id。现在让我们定位这些按钮：

const tableButtons = document.querySelectorAll("th button");

我们希望根据单击的按钮对数据进行排序，并且还包括一个在单击按钮时切换排序方向（升序或降序）的功能。

我们可以使用该.sort()方法对response.pokedata数组中的数据进行排序。sort 方法接受一个比较两个不同参数的函数，并根据函数响应对它们进行排序：

> 0排序 a 后 b

< 0a先排序b

=== 0a保持和的原始顺序b

compareFunction(a, b) 返回值排序

来源：MDN

关于 sort 方法需要注意的另一件事是它会改变它所操作的原始数组。这意味着它改变了我们原始数组的值。

使用 .sort() 时的数组突变

我们可以通过使用扩展语法来避免改变我们的原始数组[...]

使用扩展语法避免数组变异

现在我们可以创建排序函数了。这就是我们排序函数的逻辑：

1. 清除 tableContent 元素中的内容
2. 根据选择的参数和方向对数据进行排序
3. getTableContent使用函数将排序后的数据附加到我们的 tableContent

const sortData = (data, param, direction = "asc") => {

tableContent.innerHTML = '';

const sortedData =

direction == "asc"

? [...data].sort(function (a, b) {

if (a[param] < b[param]) {

return -1;

}

if (a[param] > b[param]) {

return 1;

}

return 0;

})

: [...data].sort(function (a, b) {

if (b[param] < a[param]) {

return -1;

}

if (b[param] > a[param]) {

return 1;

}

return 0;

});

getTableContent(sortedData);

};

我们的排序函数接受三个参数：

• data：要排序的数组
• param：用于对数组进行排序的值
• direction: 按升序或降序对数组进行排序。默认参数值设置为“asc” 。

我们通过将 innerHTML 设置为空白字符串来清除 tableContent 元素中的内容。然后我们使用.sort()方法和direction参数来确定数据应该如何排序。我们反转比较函数以便按降序排序。以这种方式使用比较函数可以让我们对数据进行排序，而不考虑类型值（字符串、整数、浮点数等）

最后，我们将sortedData作为新值传递给我们的表格内容。

现在我们将排序函数传递给表格按钮的单击事件侦听器，并处理切换排序方向。

window.addEventListener("load", () => {

getTableContent(response.pokedata);

[...tableButtons].map((button) => {

button.addEventListener("click", (e) => {

if (e.target.getAttribute("data-dir") == "desc") {

sortData(response.pokedata, e.target.id, "desc");

e.target.setAttribute("data-dir", "asc");

} else {

sortData(response.pokedata, e.target.id, "asc");

e.target.setAttribute("data-dir", "desc");

}

});

});

});

在这个函数中，我们通过data-dir在按钮上设置一个属性来确定排序方向来处理切换。我们还将更新我们的 CSS 以根据排序方向在按钮旁边显示一个图标：

th button::after {

position: absolute;

right: 0.5rem;

}

th button[data-dir="asc"]::after {

content: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='0, 0 8,0 4,8 8' fill='%23818688'/%3E%3C/svg%3E");

}

th button[data-dir="desc"]::after {

content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpolygon points='4 0,8 8,0 8' fill='%23818688'/%3E%3C/svg%3E");

}

我们不希望图标显示在所有先前单击的按钮上，因此我们将定义一个resetButtons函数，该函数删除任何未单击按钮的按钮上的 data-dir 属性。

const resetButtons = (event) => {

[...tableButtons].map((button) => {

if (button !== event.target) {

button.removeAttribute("data-dir");

}

});

};

我们将该函数传递给我们的按钮事件侦听器，以在单击新按钮时重置以前的按钮

window.addEventListener("load", () => {

getTableContent(response.pokedata);

[...tableButtons].map((button) => {

button.addEventListener("click", (e) => {

resetButtons(e);

if (e.target.getAttribute("data-dir") == "desc") {

sortData(response.pokedata, e.target.id, "desc");

e.target.setAttribute("data-dir", "asc");

} else {

sortData(response.pokedata, e.target.id, "asc");

e.target.setAttribute("data-dir", "desc");

}

});

});

});

结论

这样，我们就完成了！我们只使用原生 JavaScript 创建了一个可排序的表！