Today, I want to do a html table ALV that can sort and filter.
But not do this in SAP Web Dynpro. So I made it with HTML and Java Script technical.
The result can be see here: http://hot583.com/%E8%87%AA%E5%8A%A8%E5%8C%96.html
Below is the detail source code and comment in Chinese.
Hope you like this.
<!DOCTYPE html>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>
<input type=”text” id=”myInput” onkeyup=”filterTable()” placeholder=”输入后双击列筛选行..”>
<h2>学生信息表，自动缩放，JS实现排序，筛选</h2>
<table id=”myTable”>
<tr>
<!– 添加 onclick 事件，当用户点击表头时，调用 sortTable 函数 –>
<th onclick=”sortTable(0)” ondblclick=”filterTable(0)”>学号</th>
<th onclick=”sortTable(1)” ondblclick=”filterTable(1)”>姓名</th>
<th onclick=”sortTable(2)” ondblclick=”filterTable(2)”>成绩</th>
<th onclick=”sortTable(3)” ondblclick=”filterTable(3)”>评价</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>003</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>004</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>005</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>006</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>007</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>008</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>009</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>010</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>003</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>004</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>005</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>006</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>007</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>008</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>009</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>010</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>003</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>004</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>005</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>006</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>007</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>008</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
<tr>
<td>009</td>
<td>张三</td>
<td>90</td>
<td>优秀</td>
</tr>
<tr>
<td>010</td>
<td>李四</td>
<td>80</td>
<td>良好</td>
</tr>
</table>
<script>
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById(“myTable”);
switching = true;
// 设置排序方向为升序
dir = “asc”;
// 循环，直到没有需要交换的行为止
while (switching) {
// 开始时假定没有需要交换的行
switching = false;
rows = table.rows;
// 循环遍历除第一行（表头）以外的所有行
for (i = 1; i < (rows.length – 1); i++) {
// 开始时假定不需要交换
shouldSwitch = false;
// 获取当前行和下一行的两个元素，用于比较
x = rows[i].getElementsByTagName(“TD”)[n];
y = rows[i + 1].getElementsByTagName(“TD”)[n];
// 检查两行是否需要交换位置
if (dir == “asc”) {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// 如果是升序排序，则标记为需要交换，并退出循环
shouldSwitch= true;
break;
}
} else if (dir == “desc”) {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// 如果是降序排序，则标记为需要交换，并退出循环
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
// 如果已经标记为需要交换，则进行交换，并标记已经完成一次交换
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// 每完成一次交换，计数器加一
switchcount ++;
} else {
// 如果在上一轮循环中没有进行过任何交换，则所有行都已经按顺序排列好了，此时可以改变排序方向并重新排序
if (switchcount == 0 && dir == “asc”) {
dir = “desc”;
switching = true;
}
}
}
}
</script>
<script>
function filterTable(n) {
// 获取输入框中的筛选条件
var input, filter, table, tr, td, i;
input = document.getElementById(“myInput”);
filter = input.value.toUpperCase();
table = document.getElementById(“myTable”);
tr = table.getElementsByTagName(“tr”);
// 循环遍历所有表格行，根据筛选条件显示或隐藏行
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName(“td”)[n];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = “”;
} else {
tr[i].style.display = “none”;
}
}
}
}
</script>
</body>
</html>
This post is come from www.hot583.com, you can share/use it with the post original link for free.
But pay attention of any risk yourself.
微信原文《The End》
