jsRapTable/index.html at master · Thibor/jsRapTable · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="jsRapTable.css" />
<link rel="stylesheet" href="index.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jsRapTable.js"></script>
<script>

function RandomString(){
let s = '';
l = Math.floor(Math.random() * 10 + 3)
while(l--)
	s += String.fromCharCode(Math.floor(Math.random() * 26) + 97);
return s;
}

$(document).ready(function(){

for(let n = 1; n < 40;n++)
$('<tr onclick="alert(\'id ' + n + '\')">').html('<td>' + Math.floor(Math.random() * 100 + 1) + '</td><td>' + RandomString()+ '</td><td>' + RandomString()+ '</td><td>' + RandomString() + '</td>').appendTo($('tbody'));

$('#demo1').jsRapTable({
	onSort:function(i,d){
		$('tbody').find('td').filter(function(){
					return $(this).index() === i;
				}).sortElements(function(a, b){
					if(i)
						return $.text([a]).localeCompare($.text([b])) * (d ? -1 : 1);
					else
						return (parseInt($.text([a])) - parseInt($.text([b]))) * (d ? -1 : 1);
				}, function(){
					return this.parentNode;
				});
	}
});

});
</script>
</head>
<body>
<div id="divMain">
<div id="divGitHub">
<div id="GitHub" onclick="location.href='https://github.com/Thibor/jsRapTable'"></div>
</div>
<div id="demo1" >
<table>
<thead>
<tr><th>AAA</th><th>BBB</th><th>CCC</th><th>DDD</th></tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>