%%javascript
<head>
<!-- Load jQuery, DataTables style and scripts -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
</head>
<!-- the head section contains the jquery library to handle DOM manipulation -->
<!-- DOM means Document Object Model, defines logical structure, the way document is accessed/manipulated -->
<!-- also has DataTables, gives the functionality to create the interactive table -->
<input type="text" id="searchBar" placeholder="Search">
<table id="overwatchTable" class="table" style="width:100%">
<thead id="overwatchHead">
<tr>
<th>ID</th>
<th>Name</th>
<th>Role</th>
<th>Ultimate Ability</th>
</tr>
</thead>
<tbody id="overwatchBody"></tbody>
</table>
<!-- This defines all the parts of the table with the table, thead, and tbody tags. -->
<!-- The <th> tag is responsible for making the four columns -->
<script>
$(document).ready(function() {
// Define Overwatch character data
var characters = [
{ id: 1, name: "Tracer", role: "Damage", ultimate: "Pulse Bomb" },
{ id: 2, name: "Reinhardt", role: "Tank", ultimate: "Earthshatter" },
{ id: 3, name: "Mercy", role: "Support", ultimate: "Valkyrie" },
{ id: 4, name: "Genji", role: "Damage", ultimate: "Dragonblade" },
{ id: 5, name: "Hanzo", role: "Damage", ultimate: "Dragonstrike" },
{ id: 6, name: "Ashe", role: "Damage", ultimate: "B.O.B." },
{ id: 7, name: "Doomfist", role: "Tank", ultimate: "Meteor Strike" },
{ id: 8, name: "Orisa", role: "Tank", ultimate: "Terra Surge" },
{ id: 9, name: "Moira", role: "Tank", ultimate: "Coalescence" },
// Add more character objects as needed
];
<!-- responsible for defining the array of character objects -->
<!-- Each character makes up a row in the data table -->
<!-- They have properties that correspond to the column -->
<!-- array is a container object that holds a fixed number of values of a single type -->
// Populate the table with character data
for (const character of characters) {
$('#overwatchBody').append('<tr><td>' +
character.id + '</td><td>' +
character.name + '</td><td>' +
character.role + '</td><td>' +
character.ultimate + '</td></tr>');
}
<!-- uses a for loop that iterates through the character data array and generates the row of the tables through the .append() function -->
<!-- retrieves the values from each character object and inserts them into the respective <td> elements within the table. -->
// Initialize DataTables with custom options
var table = $('#overwatchTable').DataTable({
paging: true, // Enable pagination
ordering: true, // Enable sorting
searching: true, // Enable searching
lengthChange: false, // Disable showing entries
responsive: true, // Enable responsive design
// Add additional options or callbacks as needed
});
<!-- the $('#overwatchTable').DataTable({ initializes the table -->
<!-- options to customize the behavior and appearance of the table -->
// Add event listener for search bar input
$('#searchBar').on('keyup', function() {
table.search(this.value).draw();
});
<!-- when using a search bar, triggers a callback function that performs the search operation -->
<!-- search() function to filter the table data based on the users input and redraws the table to reflect the filtered results. -->
// Override default DataTables search behavior
$.fn.dataTable.ext.search.push(function(settings, searchData, index, rowData, counter) {
var searchValue = $('#searchBar').val().toLowerCase();
var rowDataLowerCase = searchData.join(' ').toLowerCase();
return rowDataLowerCase.includes(searchValue);
});
});
<!-- this changes the default search behavior to a custom one -->
<!-- custom search function compares the search value entered by the user with the combined data of each row (converted to lowercase) and returns true if the search value is found within the row data. -->
</script>
