页面刷新后保留表格排序结果？
Posted
技术标签:
【中文标题】页面刷新后保留表格排序结果？【英文标题】：Keep table sort result after page refresh? 【发布时间】：2018-06-06 23:38:09 【问题描述】：我正在使用 w3.js(https://www.w3schools.com/howto/howto_js_sort_table.asp) 中的表格排序器。 此外，我使用 setTimeout 每分钟刷新页面以更新数据。 我想在刷新页面后保留排序结果。 我知道有一个方法正在使用 sessionStorage，但不知道如何使用它。 谁能给我一些建议？
【问题讨论】：
页面/表格加载时可以调用 sortTable() 吗？ 对不起，我忘了说我使用的是第二个例子。它给每列不同的数字。我该怎么办？ 我在下面添加了一个sn-p。 【参考方案1】：下面是SortTable 中示例的更新后的 sn-p。我们使用浏览器cookies来恢复上次的排序信息，主要是排序列和方向。 W3school 中还有另一个示例，我从中获得了 cookie 处理 (Cookies)。由于跨源策略，下面的 sn-p 在网站中将不起作用。当然，它也需要一些重构，但这是一个开始。
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
th
cursor: pointer;
th, td
text-align: left;
padding: 16px;
tr:nth-child(even)
background-color: #f2f2f2
</style>
</head>
<body onload="checkCookie();">
<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>
<table id="myTable">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
<script>
function sortTable(n, dir)
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
!dir && (dir = "asc");
/*Make a loop that will continue until
no switching has been done:*/
while (switching)
//start by saying: no switching is done:
switching = false;
rows = table.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++)
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc")
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase())
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
else if (dir == "desc")
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase())
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
if (shouldSwitch)
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount ++;
else
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc")
dir = "desc";
switching = true;
setCookie("sortBy", n, 30);
setCookie("sortByDir", dir);
function setCookie(cname,cvalue,exdays)
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
function getCookie(cname)
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++)
var c = ca[i];
while (c.charAt(0) == ' ')
c = c.substring(1);
if (c.indexOf(name) == 0)
return c.substring(name.length, c.length);
return "";
function checkCookie()
var sortBy=getCookie("sortBy");
if (sortBy != "")
sortTable(parseInt(sortBy), getCookie("sortByDir"));
</script>
</body>
</html>编辑： 再一个 sn-p 来使用 sessionStorage
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table Alphabetically</title>
<style>
table
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
th
cursor: pointer;
th, td
text-align: left;
padding: 16px;
tr:nth-child(even)
background-color: #f2f2f2
</style>
</head>
<body onload="checkStrorage();">
<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>
<table id="myTable">
<tr>
<!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Country</th>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>North/South</td>
<td>UK</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Italy</td>
</tr>
<tr>
<td>Paris specialites</td>
<td>France</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Canada</td>
</tr>
</table>
<script>
function sortTable(n, dir)
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
!dir && (dir = "asc");
/*Make a loop that will continue until
no switching has been done:*/
while (switching)
//start by saying: no switching is done:
switching = false;
rows = table.getElementsByTagName("TR");
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++)
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc")
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase())
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
else if (dir == "desc")
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase())
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
if (shouldSwitch)
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount ++;
else
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc")
dir = "desc";
switching = true;
sessionStorage.setItem('sortBy', n);
sessionStorage.setItem('sortByDir', dir);
function checkStrorage()
var sortBy= sessionStorage.getItem('sortBy');
if (sortBy !== null)
sortTable(parseInt(sortBy), sessionStorage.getItem('sortByDir'));
</script>
</body>
</html>【讨论】：
谢谢。我想。但是使用 sessionStorage 而不是 cookie 更好吗？因为当页面关闭时，会话将清除该值，而 cookie 不会。 添加了另一个使用 sessionStorage 的 sn-p。决定哪个更好可以在这篇文章中看到 (***.com/questions/19867599/…) 请告诉我进展如何。如果一切正常，请选择我的答案来结束您的问题。 非常感谢！它确实有效！顺便说一句，我认为使用 sessionStorage 时没有使用 getStorage 函数。以上是关于页面刷新后保留表格排序结果？的主要内容，如果未能解决你的问题，请参考以下文章
jQuery插件 tablesorter 表格排序 使用说明