-
Notifications
You must be signed in to change notification settings - Fork 0
/
datatable.html
139 lines (123 loc) · 6.19 KB
/
datatable.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Table Preview</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body class="bg-light">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">HTML Elements</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="datatable.html">Data Table</a>
</li>
<li class="nav-item">
<a class="nav-link" href="formelements.html">Form Elements</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<div class="container-fluid bg-dark text-light text-center py-5">
<div class="container">
<h1 class="display-4">Data Table / Grid View</h1>
<p class="lead">Data Table Preview is a user-friendly and dynamic data table solution built with HTML, CSS
(Bootstrap), and JavaScript. It offers essential features like sortable columns, searchable data,
pagination, and export options (CSV, Excel, PDF). Ideal for quick data previews and organization, the
table is customizable and easy to integrate.</p>
</div>
</div>
<div class="container my-5">
<!-- Search Bar -->
<div class="row mb-3">
<div class="nav-bar col-md-4 position-relative">
<input type="text" id="searchInput" class="form-control" placeholder="Search..."
oninput="showDropdown()" autocomplete="off">
<div id="suggestionsDropdown" class="dropdown-menu w-100" style="display: none;"></div>
</div>
<!-- Export Buttons (Icons Only) -->
<div class="nav-bar col-md-6 text-end">
<button class="btn btn-primary" onclick="exportToCSV()" id="csvExportButton" title="Export to CSV">
<i class="fas fa-file-csv"></i> <!-- CSV Icon -->
</button>
<button class="btn btn-success mx-2" onclick="exportToExcel()" id="excelExportButton"
title="Export to Excel">
<i class="fas fa-file-excel"></i> <!-- Excel Icon -->
</button>
<button class="btn btn-secondary" onclick="printTable()" id="printButton" title="Print to PDF">
<i class="fas fa-print"></i> <!-- Print Icon -->
</button>
</div>
<div class="nav-bar col-md-2 text-end">
<select id="rowsPerPage" class="form-select w-auto d-inline">
<option value="5">5 rows</option>
<option value="10">10 rows</option>
<option value="20">20 rows</option>
<option value="50">50 rows</option>
</select>
</div>
</div>
<!-- Export and Print Buttons -->
<!-- <div class="row mb-3">
<div class="col-md-12 text-end">
<button class="btn btn-primary" onclick="exportToCSV()">Export to CSV</button>
<button class="btn btn-success" onclick="exportToExcel()">Export to Excel</button>
<button class="btn btn-secondary" onclick="printTable()">Print to PDF</button>
</div>
</div> -->
<!-- Data Table -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="sortable" id="sortableColoumn" onclick="sortTable(0, this)">Reagent Code <span
class="sort-arrow"></span></th>
<th class="sortable" id="sortableColoumn" onclick="sortTable(1, this)">Reagent Name <span
class="sort-arrow"></span></th>
<th class="sortable" id="sortableColoumn" onclick="sortTable(2, this)">IsDisabled <span
class="sort-arrow"></span></th>
</tr>
</thead>
<tbody id="tableBody">
<!-- Table rows will be inserted here by JavaScript -->
</tbody>
</table>
<!-- Pagination -->
<nav>
<ul class="pagination justify-content-center" id="pagination">
<!-- Pagination items will be inserted here by JavaScript -->
</ul>
</nav>
</div>
<!-- Footer -->
<footer class="bg-dark text-light py-4">
<div class="container text-center">
<p class="mb-0">© 2024 HTML Elements. Talha Yaseen Zafar 😊</p>
</div>
</footer>
<!-- including JavaScript files-->
<script src="script.js"></script>
<!-- Include libraries for exporting -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js"></script>
<!-- Include Bootstrap libraries -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>
</html>