Project Name : WP_POSTS
JavaScript ([Link])
1. Event Listener for DOM Content Loaded
[Link]('DOMContentLoaded', function () {
● This line waits for the HTML document to be completely loaded and parsed before
executing the enclosed code.
2. DOM Elements
javascript
const tableBody = [Link]('table-body');
const pagination = [Link]('pagination');
const searchInput = [Link]('search');
● tableBody: The <tbody> element where the table rows will be dynamically inserted.
● pagination: The container for the pagination buttons.
● searchInput: The input field for searching the table content.
3. Variables for Pagination and Search
const rowsPerPage = 10;
let currentPage = 1;
let searchQuery = '';
● rowsPerPage: The number of rows to display per page.
● currentPage: The currently active page.
● searchQuery: The search term entered by the user.
4. Fetch Data Function
async function fetchData(page = 1, search = '') {
const response = await
fetch(`[Link]?page=${page}&limit=${rowsPerPage}&search=${search}`);
const result = await [Link]();
return result;
}
● fetchData(page, search): Fetches data from the [Link] script with the
specified page and search query.
● Uses the Fetch API to make an asynchronous request and returns the response in
JSON format.
5. Render Table Function
function renderTable(data) {
[Link] = '';
for (const row of data) {
const tr = [Link]('tr');
for (const cell in row) {
const td = [Link]('td');
[Link] = row[cell];
[Link](td);
}
[Link](tr);
}
}
● renderTable(data): Clears the current table body content and fills it with rows of
data fetched from the server.
6. Render Pagination Function
function renderPagination(total, page, limit) {
[Link] = '';
const pageCount = [Link](total / limit);
const createButton = (text, page) => {
const button = [Link]('button');
[Link] = text;
[Link]('click', () => {
currentPage = page;
updateTable();
});
if (page === currentPage) {
[Link] = true;
[Link]('active');
}
return button;
};
if (currentPage > 1) {
[Link](createButton('Previous', currentPage -
1));
}
const maxVisibleButtons = 7;
let startPage = [Link](1, currentPage -
[Link](maxVisibleButtons / 2));
let endPage = [Link](pageCount, startPage + maxVisibleButtons -
1);
if (endPage - startPage < maxVisibleButtons - 1) {
startPage = [Link](1, endPage - maxVisibleButtons + 1);
}
for (let i = startPage; i <= endPage; i++) {
[Link](createButton(i, i));
}
if (currentPage < pageCount) {
[Link](createButton('Next', currentPage + 1));
}
}
● renderPagination(total, page, limit): Clears the current pagination and
creates new buttons based on the total number of pages.
● createButton(text, page): Creates a button with the specified text and page
number. When clicked, it updates the currentPage and calls updateTable() to
refresh the data.
7. Update Table Function
async function updateTable() {
const result = await fetchData(currentPage, searchQuery);
renderTable([Link]);
renderPagination([Link], [Link], [Link]);
}
● updateTable(): Fetches data using the current page and search query, then updates
the table and pagination.
8. Search Table Function
[Link] = async function () {
searchQuery = [Link];
currentPage = 1;
updateTable();
};
● searchTable(): Updates the search query and resets the current page to 1, then calls
updateTable() to refresh the data based on the new search term.
9. Initial Table Update
updateTable();
● Calls updateTable() to populate the table with the initial set of data when the page is
first loaded.
The JavaScript code in [Link] handles dynamic data fetching, table rendering, pagination,
and search functionality. This explanation will help developers understand each part of the
script, enabling them to make modifications as needed.
CSS ([Link])
1. Body Styles
css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
● Applies to the <body> element of the HTML.
● font-family: Arial, sans-serif;: Sets the font of the entire document to Arial,
with a fallback to sans-serif.
● margin: 0;: Removes the default margin from the body.
● padding: 20px;: Adds a 20px padding around the body content to give it some space
from the edges.
2. Container Styles
css
.container {
max-width: 100%;
overflow-x: auto;
}
● Applies to the <div class="container"> element.
● max-width: 100%;: Ensures the container does not exceed 100% of the width of its
parent.
● overflow-x: auto;: Allows horizontal scrolling if the content inside the container
overflows.
3. Input Text Styles
css
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
● Applies to the <input type="text"> element with the id="search".
● width: 100%;: Makes the input field take up the full width of its container.
● padding: 10px;: Adds a 10px padding inside the input field for better spacing.
● margin-bottom: 20px;: Adds a 20px margin below the input field to separate it from
the table.
● border: 1px solid #ddd;: Gives the input field a light gray border.
● border-radius: 5px;: Rounds the corners of the input field with a 5px radius.
4. Table Styles
css
.table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
● Applies to the <table id="data-table" class="table"> element.
● width: 100%;: Makes the table take up the full width of its container.
● border-collapse: collapse;: Collapses the borders of the table cells into a single
border for a more compact and uniform appearance.
● margin-bottom: 20px;: Adds a 20px margin below the table.
5. Table Header and Cell Styles
.table th, .table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
● Applies to both <th> and <td> elements within the table.
● border: 1px solid #ddd;: Adds a 1px solid light gray border around each table
cell.
● padding: 8px;: Adds an 8px padding inside each table cell for better spacing.
● text-align: left;: Aligns the text to the left inside each table cell.
6. Table Header Background Color
css
.table th {
background-color: #f4f4f4;
}
● Applies to the <th> elements within the table.
● background-color: #f4f4f4;: Sets a light gray background color for the table
headers.
7. Pagination Container Styles
.pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
● Applies to the <div id="pagination" class="pagination"> element.
● display: flex;: Uses flexbox for the pagination container.
● justify-content: center;: Centers the pagination buttons horizontally.
● align-items: center;: Centers the pagination buttons vertically.
● flex-wrap: wrap;: Allows the pagination buttons to wrap to the next line if
necessary.
● gap: 5px;: Adds a 5px gap between pagination buttons.
8. Pagination Button Styles
.pagination button {
background-color: #FFC523;
color: white;
border: none;
padding: 10px 15px;
margin: 0;
cursor: pointer;
font-size: 14px;
border-radius: 5px;
}
● Applies to the <button> elements within the pagination container.
● background-color: #FFC523;: Sets the background color of the buttons to a
specific shade of yellow.
● color: white;: Sets the text color of the buttons to white.
● border: none;: Removes the default border.
● padding: 10px 15px;: Adds a 10px vertical padding and a 15px horizontal padding
inside the buttons.
● margin: 0;: Removes any default margin.
● cursor: pointer;: Changes the cursor to a pointer when hovering over the buttons.
● font-size: 14px;: Sets the font size of the button text to 14px.
● border-radius: 5px;: Rounds the corners of the buttons with a 5px radius.
9. Pagination Button Hover State
.pagination button:hover {
background-color: #FFC523;
}
● Applies to the <button> elements within the pagination container when hovered over.
● background-color: #FFC523;: Ensures that the background color of the buttons
remains the same when hovered over.
10. Disabled Pagination Button
.pagination button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
● Applies to the <button> elements within the pagination container when they are
disabled.
● background-color: #ccc;: Sets the background color of disabled buttons to a light
gray.
● cursor: not-allowed;: Changes the cursor to indicate that the button is not
clickable.
11. Active Pagination Button
.pagination [Link] {
background-color: #333;
}
● Applies to the <button> elements within the pagination container when they are active.
● background-color: #333;: Sets the background color of the active button to a dark
gray.
This detailed explanation of the CSS styles and their application to the HTML structure will help
any developer understand the current styles and make changes as needed.