-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (88 loc) · 5.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="uFKQyvIftMLcrIL47p4jC-v-gpgXRsNfBCO9_bWzElQ" />
<meta name="description" content="Demonstration page for github repository IrfanAkram5/JavaScriptSorting. Demo is for html tables of 100, 1000 and 10,000 rows using random data" />
<link rel="shortcut icon" href="HTML_Test_Files/favicon.ico" type="image/x-icon">
<link rel="icon" href="HTML_Test_Files/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<title>Javascript Table Sort</title>
<script src="HTML_Test_Files/JS_Files/load_data_tables.js"></script>
</head>
<body>
<section class="hero is-small is-warning">
<div class="hero" style="padding: 10px;">
<div class="columns is-desktop">
<div class="column is-two-fifths">
<div class="block">
<button class="button is-link" type="button" name="HtmlTable100"
onclick="loadTableData(event)">Load
100
rows</button>
<button class="button is-link" type="button" name="HtmlTable1k"
onclick="loadTableData(event)">Load
1,000
rows</button>
<button class="button is-link" type="button" name="HtmlTable10k"
onclick="loadTableData(event)">Load
10,000
rows</button>
<div class="block"></div>
<button class="button is-link" type="button" name="HtmlTable10k2col"
onclick="loadTableData(event)">Load
10k 2 columns </button>
</div>
<div class="content">
<!-- <div class="content" style="padding-top: 5px;"> -->
<h4 id="HeadingH2">Click on one of the above buttons to load data</h4>
</div>
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">parsing time</span>
<span id="parse" class="tag is-info">0ms</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">sorting time</span>
<span id="sort" class="tag is-success">0ms</span>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-dark">re-attach2DOM time</span>
<span id="attach" class="tag is-danger">0ms</span>
</div>
</div>
</div>
</div>
<div class="column">
<div class="card">
<header class="card-header">
<p class="card-header-title">Sorting JS Tables</p>
</header>
<div class="card-content">
<div class="content" style="font-size: medium;">
Click on the header to sort by that column. As the number of rows
increase, building and rendering the table/DOM takes an increasingly disproportionate time. For 10,000 rows, the actual sorting
is a tiny fraction of the time it takes to rebuild the DOM and system rendering. Number of columns also plays a factor. 10,000 rows with 2 columns takes 50% of the time of 11 columns. Render timing is not include(haven't figured it out yet!) but if interested, you can run the performace tool in developer tools(Ctrl+Shift + I in most browsers). A pretty good indication of overall time for the process to complete is simply the time it takes to load the initial file as rendering the table is the biggest time consumer, not the sorting. Beyond the scope of this demo, but for very large tables, the best strategy will be some type of pagination.</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div style="display: block; max-height: 35vmax; overflow-y: scroll; overflow-x: scroll; font-size: small;">
<div id="t1">
<!-- Table will be inserted here -->
</div>
</div>
</section>
<script src="sorting_js_tables.js"></script>
</body>
</html>