-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
131 lines (114 loc) · 3.88 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
119
120
121
122
123
124
125
126
127
128
129
130
131
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add select drop-down filter to DataTable</title>
<meta name="description" content="">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<style>
select.form-control{
display: inline;
width: 200px;
margin-left: 25px;
}
</style>
</head>
<body>
<div class="container mt-4">
<!-- Create the drop down filter -->
<div class="category-filter">
<select id="categoryFilter" class="form-control">
<option value="">Show All</option>
<option value="Classical">Classical</option>
<option value="Hip Hop">Hip Hop</option>
<option value="Jazz">Jazz</option>
</select>
</div>
<!-- Set up the datatable -->
<table class="table" id="filterTable">
<thead>
<tr>
<th scope="col">Artist</th>
<th scope="col">Category</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col">Public Enemy</td>
<td scope="col">Hip Hop</td>
</tr>
<tr>
<td scope="col">Chet Baker</td>
<td scope="col">Jazz</td>
</tr>
<tr>
<td scope="col">Billie Holiday</td>
<td scope="col">Jazz</td>
</tr>
<tr>
<td scope="col">Vivaldi</td>
<td scope="col">Classical</td>
</tr>
<tr>
<td scope="col">Jurrasic 5</td>
<td scope="col">Hip Hop</td>
</tr>
<tr>
<td scope="col">Onyx</td>
<td scope="col">Hip Hop</td>
</tr>
<tr>
<td scope="col">Tchaikovsky</td>
<td scope="col">Classical</td>
</tr>
<tr>
<td scope="col">Oscar Peterson</td>
<td scope="col">Jazz</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script>
$("document").ready(function () {
$("#filterTable").dataTable({
"searching": true
});
//Get a reference to the new datatable
var table = $('#filterTable').DataTable();
//Take the category filter drop down and append it to the datatables_filter div.
//You can use this same idea to move the filter anywhere withing the datatable that you want.
$("#filterTable_filter.dataTables_filter").append($("#categoryFilter"));
//Get the column index for the Category column to be used in the method below ($.fn.dataTable.ext.search.push)
//This tells datatables what column to filter on when a user selects a value from the dropdown.
//It's important that the text used here (Category) is the same for used in the header of the column to filter
var categoryIndex = 0;
$("#filterTable th").each(function (i) {
if ($($(this)).html() == "Category") {
categoryIndex = i; return false;
}
});
//Use the built in datatables API to filter the existing rows by the Category column
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var selectedItem = $('#categoryFilter').val()
var category = data[categoryIndex];
if (selectedItem === "" || category.includes(selectedItem)) {
return true;
}
return false;
}
);
//Set the change event for the Category Filter dropdown to redraw the datatable each time
//a user selects a new filter.
$("#categoryFilter").change(function (e) {
table.draw();
});
table.draw();
});
</script>
</body>
</html>