To add pagination to the agent-wise bids amount statement on the admin dashboard, we need to modify both the PHP script to support pagination and the front-end to handle pagination controls and data display.
### 1. PHP Script to Fetch Data with Pagination (`get_bids.php`)
Update the PHP script to support pagination. We'll add parameters for `page` and `limit` to control the pagination.
```php
<?php
$servername = "your_server_name";
$username = "your_username";
$password = "your_password";
$dbname = "your_database_name";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Get the page and limit from the query string, or set defaults
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$limit = isset($_GET['limit']) ? intval($_GET['limit']) : 10;
$offset = ($page - 1) * $limit;
// SQL query to fetch agent-wise bids amount with pagination
$sql = "SELECT agent_name, SUM(bid_amount) as total_bids FROM bids GROUP BY agent_name LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);
$bids = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$bids[] = $row;
}
}
// Get the total number of records for pagination
$sql_total = "SELECT COUNT(DISTINCT agent_name) as total FROM bids";
$result_total = $conn->query($sql_total);
$total = $result_total->fetch_assoc()['total'];
$conn->close();
echo json_encode(array('bids' => $bids, 'total' => $total));
?>
```
### 2. HTML and JavaScript for Dashboard with Pagination (`index.html`)
Update the HTML to include pagination controls and modify the JavaScript to handle pagination.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
.pagination {
margin: 20px 0;
text-align: center;
}
.pagination button {
margin: 0 5px;
padding: 5px 10px;
}
</style>
</head>
<body>
<h1>Agent-wise Bids Amount Statement</h1>
<div id="js-pool-section">
<h2>JS, JS..12 Pool</h2>
<table id="bids-table">
<thead>
<tr>
<th>Agent Name</th>
<th>Total Bids Amount</th>
</tr>
</thead>
<tbody>
<!-- Data will be inserted here -->
</tbody>
</table>
<div class="pagination">
<button id="prevPage">Previous</button>
<span id="pageInfo"></span>
<button id="nextPage">Next</button>
</div>
</div>
<script>
var currentPage = 1;
var limit = 10;
var totalPages = 1;
function fetchBids(page) {
$.ajax({
url: 'get_bids.php',
method: 'GET',
data: { page: page, limit: limit },
dataType: 'json',
success: function(response) {
var tbody = $('#bids-table tbody');
tbody.empty(); // Clear the existing table data
response.bids.forEach(function(bid) {
var row = '<tr><td>' + bid.agent_name + '</td><td>' + bid.total_bids + '</td></tr>';
tbody.append(row);
});
totalPages = Math.ceil(response.total / limit);
$('#pageInfo').text('Page ' + currentPage + ' of ' + totalPages);
},
error: function(xhr, status, error) {
console.error("AJAX Error: ", status, error);
}
});
}
function updatePaginationButtons() {
$('#prevPage').prop('disabled', currentPage <= 1);
$('#nextPage').prop('disabled', currentPage >= totalPages);
}
$(document).ready(function() {
fetchBids(currentPage); // Initial fetch
$('#prevPage').click(function() {
if (currentPage > 1) {
currentPage--;
fetchBids(currentPage);
updatePaginationButtons();
}
});
$('#nextPage').click(function() {
if (currentPage < totalPages) {
currentPage++;
fetchBids(currentPage);
updatePaginationButtons();
}
});
setInterval(function() {
fetchBids(currentPage);
}, 30000); // Refresh every 30 seconds
});
</script>
</body>
</html>
```
### Explanation
1. **PHP Script (`get_bids.php`)**:
- This script now supports pagination with `page` and `limit` parameters.
- It calculates the offset based on the current page.
- It also returns the total number of distinct agents to help calculate the total number of pages.
2. **HTML & JavaScript (`index.html`)**:
- The HTML includes pagination controls (Previous and Next buttons).
- The JavaScript handles fetching data for the current page, updating the table, and managing pagination controls.
- The `fetchBids` function now takes a `page` parameter to request data for that specific page.
- The `updatePaginationButtons` function enables or disables the pagination buttons based on the current page.
- The data is fetched initially when the document is ready, and pagination buttons are updated accordingly. Additionally, data is refreshed every 30 seconds while keeping the current page.
By following these steps, you can implement pagination for the agent-wise bids amount statement on the admin dashboard.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me