-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathgram.html
105 lines (94 loc) · 3.35 KB
/
gram.html
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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>新标准日本语语法一览表</title>
<link rel="stylesheet" type="text/css" href="dataTables.min.css">
<link rel="stylesheet" type="text/css" href="gram.css">
<script src="jquery-3.5.1.min.js"></script>
<script src="datatables.min.js"></script>
<script src="config.js"></script>
<style>
#my_tbl_wrapper {
display: flex;
flex-wrap: wrap;
}
#my_tbl_info,
.dataTables_info {
flex-grow: 1;
width: 20%;
padding: 0;
}
#my_tbl_filter {
flex-grow: 1;
width: 80%;
height: 50px;
}
#my_tbl_filter input {
width: calc(100% - 80px);
height: 80%;
}
#my_tbl>tbody>tr>td:first-child {
vertical-align: top;
}
#my_tbl>tbody>tr>td:nth-child(1) {
width: 15%;
}
#my_tbl_length {
flex-grow: 1;
padding-top: 0.25em;
}
@media screen and (max-width: 767px) {
#my_tbl_length {
margin-top: 0.5em;
padding-left: 5em;
}
}
#my_tbl_length>label>select {
width: auto;
height: 38px;
}
</style>
</head>
<body>
<p>新标准日本语语法一览表</p>
<table id="my_tbl" class="display" style="width:100%">
</table>
<script>
var gram_dict = JSON.parse($.getJSON({ 'url': gram_json_path, 'async': false }).responseText);
$(document).ready(function () {
$('#my_tbl').DataTable({
columnDefs: [
{ orderable: false, targets: 1 }
],
dom: 'ifrtilp',
lengthMenu: [1, 4, 8, 16, 32],
pageLength: 4,
stateSave: true,
stateDuration: 60 * 60 * 24 * 30,
stripeClasses: [],
data: gram_dict,
columns: [
{
title: "编号",
render: function (data, type, row, meta) {
let line = '';
line += "<div class='sticky group'>";
line += "<h2 class='title'><ul><li>编号</li></ui></h2>";
line += "<div class='item book" + (Math.floor(data / 10000) + 1) + "'>";
line += "<span class='hidden'>" + ("0000" + data).slice(-5) + "</span>";
line += ['初级', '中级', '高级'][Math.floor(data / 10000)];
line += '第' + Math.floor((data % 10000) / 100 + 1) + '单元';
line += '第' + (4 * Math.floor((data % 10000) / 100) + data % 100 + 1) + '课';
line += '</div>';
line += '</div>';
return line;
}
},
{ title: "语法" },
]
});
});
</script>
</body>
</html>