Project Name : WP_POSTS

JavaScript (script.js)

1. Event Listener for DOM Content Loaded

document.addEventListener('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 = document.getElementById('table-body');

const pagination = document.getElementById('pagination');
const searchInput = document.getElementById('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(`data.php?page=${page}&limit=${rowsPerPage}&search=${search}`);
 const result = await response.json();
return result;
}

● fetchData(page, search): Fetches data from the data.php 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) {
tableBody.innerHTML = '';
for (const row of data) {
const tr = document.createElement('tr');
for (const cell in row) {
const td = document.createElement('td');
td.textContent = row[cell];
tr.appendChild(td);
}
tableBody.appendChild(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) {

pagination.innerHTML = '';
const pageCount = Math.ceil(total / limit);

const createButton = (text, page) => {

const button = document.createElement('button');
button.textContent = text;
button.addEventListener('click', () => {
currentPage = page;
 updateTable();
});
if (page === currentPage) {
button.disabled = true;
button.classList.add('active');
}
return button;
};

if (currentPage > 1) {
pagination.appendChild(createButton('Previous', currentPage -
1));
}

const maxVisibleButtons = 7;
let startPage = Math.max(1, currentPage -
Math.floor(maxVisibleButtons / 2));
let endPage = Math.min(pageCount, startPage + maxVisibleButtons -
1);

if (endPage - startPage < maxVisibleButtons - 1) {

startPage = Math.max(1, endPage - maxVisibleButtons + 1);
}

for (let i = startPage; i <= endPage; i++) {

pagination.appendChild(createButton(i, i));
}

if (currentPage < pageCount) {

pagination.appendChild(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(result.data);
renderPagination(result.total, result.page, result.limit);
}

● updateTable(): Fetches data using the current page and search query, then updates
the table and pagination.

8. Search Table Function

window.searchTable = async function () {

searchQuery = searchInput.value;
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 script.js 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 (styles.css)

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 button.active {
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.