-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (93 loc) · 3.58 KB
/
index.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
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>Demo JsonSearchTools</title>
<style>
table {
width: 100%;
}
table thead tr th {
border: 1px solid #444444;
}
</style>
</head>
<body>
<h1>Demo JsonSearchTools</h1>
<input type="text" id="keyword">
<button onclick="tableUtils.search();">Search</button>
<select onchange="tableUtils.search();" id="sort">
<option value="asc">newest</option>
<option value="desc">oldest</option>
</select>
<br><br>
<table>
<thead>
<tr>
<th>title</th>
<th>create date</th>
</tr>
</thead>
<tbody id="demo_tbody">
</tbody>
</table>
<br>
<span>page:</span>
<span id="page_number">
</span>
<script src="./jsonSearchTools/v0.1.0/JsonSearchTools.js"></script>
<script>
window.onload = function(){
jsonMapString = '[ { "title": "title-1", "create_date": "2019-01-01" }, { "title": "title-2", "create_date": "2019-01-02" }, { "title": "title-3", "create_date": "2019-01-03" }, { "title": "title-4", "create_date": "2019-01-04" }, { "title": "title-5", "create_date": "2019-01-05" }, { "title": "title-6", "create_date": "2019-01-06" }, { "title": "title-7", "create_date": "2019-01-07" }, { "title": "title-8", "create_date": "2019-01-08" }, { "title": "title-9", "create_date": "2019-01-09" }, { "title": "title-10", "create_date": "2019-01-10" }, { "title": "title-11", "create_date": "2019-01-11" }]';
jsonSearchTools = new JsonSearchTools();
jsonSearchTools.init(jsonMapString);
tableUtils.search(1);
}
var tableUtils = {
tbodyElement: document.getElementById("demo_tbody"),
keywordElement: document.getElementById("keyword"),
sortElement: document.getElementById("sort"),
pageNumberElement: document.getElementById("page_number"),
clear : function(){
tableUtils.tbodyElement.innerHTML = "";
},
search(pageNumber){
var rowCount = 5;
var keyword = tableUtils.keywordElement.value;
var sort = tableUtils.sortElement.value;
pageNumber = (pageNumber == null) ? "1": pageNumber;
jsonSearchTools.doSearch("title", keyword, "create_date", sort, (pageNumber * rowCount) - rowCount, (pageNumber * rowCount), function(selectedItemLength, searchItemList){
tableUtils.clear();
for(idx in searchItemList){
var searchItem = searchItemList[idx];
tableUtils.appendRowToTable(searchItem["title"], searchItem["create_date"]);
}
tableUtils.createPageNumber(selectedItemLength, rowCount);
});
},
appendRowToTable : function(title, create_date){
var tr = document.createElement("tr");
var tdTitle = document.createElement("td");
var tdCreateDate = document.createElement("td");
tdTitle.innerText = title;
tdCreateDate.innerText = create_date;
tr.appendChild(tdTitle);
tr.appendChild(tdCreateDate);
tableUtils.tbodyElement.appendChild(tr);
},
createPageNumber : function(selectedItemLength, rowCount){
var pageNumberCount = Math.ceil(selectedItemLength/rowCount);
tableUtils.pageNumberElement.innerHTML = "";
for(var i=0; i<pageNumberCount; i++){
var pageNumer = i + 1;
var a = document.createElement("a");
a.setAttribute("href", "#");
a.setAttribute("onclick", "tableUtils.search({pageNumber});".replace("{pageNumber}", pageNumer));
a.style.margin = "5px";
a.innerText = pageNumer;
tableUtils.pageNumberElement.appendChild(a);
}
}
}
</script>
</body>
</html>