Loadmore pagination in php with ajax
अधिक पृष्ठांकन लोड करना वेब विकास में एक सामान्य सुविधा है, जो उपयोगकर्ताओं को स्क्रॉल करते समय या “अधिक लोड करें” बटन पर क्लिक करते समय अतिरिक्त सामग्री लाने और प्रदर्शित करने की अनुमति देता है। इस ट्यूटोरियल में, हम PHP और AJAX का उपयोग करके एक सरल लोड अधिक पेजिनेशन लागू करने के चरणों के बारे में जानेंगे। उदाहरण में वास्तविक डेटा लाने को प्रदर्शित करने के लिए एक MySQL डेटाबेस शामिल होगा।
आवश्यकताएँ
– HTML, जावास्क्रिप्ट, PHP और MySQL का बुनियादी ज्ञान।
– PHP और MySQL समर्थन के साथ एक वेब सर्वर वातावरण (जैसे, Apache, Nginx)।
डेटाबेस सेटअप
– एक MySQL डेटाबेस बनाएं (उदाहरण के लिए, जिसका नाम `टेस्ट` है)।
– कॉलम के साथ एक तालिका बनाएं (उदाहरण के लिए, ‘कर्मचारी’ नाम): (कर्मचारी_आईडी, प्रथम_नाम, अंतिम_नाम, ईमेल, फोन, नियुक्ति तिथि, वेतन)
-- Create the employee table
CREATE TABLE employees (
employee_id INT PRIMARY KEY,
first_name VARCHAR(50),
last_name VARCHAR(50),
email VARCHAR(100),
phone VARCHAR(20),
hire_date DATE,
salary DECIMAL(10, 2)
);
-- Insert dummy data for 30 employees
INSERT INTO employees (employee_id, first_name, last_name, email, phone, hire_date, salary)
VALUES
(1, 'John', 'Doe', 'john.doe@example.com', '123-456-7890', '2023-01-01', 50000.00),
(2, 'Jane', 'Smith', 'jane.smith@example.com', '987-654-3210', '2023-02-01', 60000.00),
(3, 'Robert', 'Johnson', 'robert.johnson@example.com', '555-123-4567', '2023-03-01', 55000.00),
(4, 'Emily', 'Davis', 'emily.davis@example.com', '789-456-1230', '2023-04-01', 62000.00),
(5, 'Michael', 'Miller', 'michael.miller@example.com', '321-654-0987', '2023-05-01', 58000.00),
(6, 'Amanda', 'Brown', 'amanda.brown@example.com', '987-654-3210', '2023-06-01', 65000.00),
(7, 'David', 'Wilson', 'david.wilson@example.com', '555-789-0123', '2023-07-01', 70000.00),
(8, 'Sarah', 'Johnson', 'sarah.johnson@example.com', '123-456-7890', '2023-08-01', 53000.00),
(9, 'Daniel', 'Clark', 'daniel.clark@example.com', '789-012-3456', '2023-09-01', 56000.00),
(10, 'Olivia', 'Anderson', 'olivia.anderson@example.com', '555-123-4567', '2023-10-01', 59000.00),
(11, 'James', 'Taylor', 'james.taylor@example.com', '321-987-6543', '2023-11-01', 51000.00),
(12, 'Sophia', 'White', 'sophia.white@example.com', '555-555-5555', '2023-12-01', 54000.00),
(13, 'Matthew', 'Harris', 'matthew.harris@example.com', '789-654-3210', '2024-01-01', 62000.00),
(14, 'Emma', 'Moore', 'emma.moore@example.com', '555-987-6543', '2024-02-01', 58000.00),
(15, 'Christopher', 'Evans', 'christopher.evans@example.com', '123-654-7890', '2024-03-01', 66000.00),
(16, 'Ava', 'Thompson', 'ava.thompson@example.com', '987-654-3210', '2024-04-01', 71000.00),
(17, 'Joseph', 'Martin', 'joseph.martin@example.com', '555-321-6540', '2024-05-01', 55000.00),
(18, 'Mia', 'Anderson', 'mia.anderson@example.com', '321-555-7890', '2024-06-01', 59000.00),
(19, 'William', 'Brown', 'william.brown@example.com', '555-789-0123', '2024-07-01', 64000.00),
(20, 'Ella', 'Garcia', 'ella.garcia@example.com', '123-456-7890', '2024-08-01', 52000.00),
(21, 'Benjamin', 'Davis', 'benjamin.davis@example.com', '789-012-3456', '2024-09-01', 57000.00),
(22, 'Amelia', 'Martinez', 'amelia.martinez@example.com', '555-123-4567', '2024-10-01', 60000.00),
(23, 'Elijah', 'Hernandez', 'elijah.hernandez@example.com', '321-987-6543', '2024-11-01', 63000.00),
(24, 'Grace', 'Young', 'grace.young@example.com', '555-555-5555', '2024-12-01', 68000.00),
(25, 'Daniel', 'Lee', 'daniel.lee@example.com', '789-654-3210', '2025-01-01', 54000.00),
(26, 'Madison', 'Taylor', 'madison.taylor@example.com', '555-987-6543', '2025-02-01', 59000.00),
(27, 'Jackson', 'Moore', 'jackson.moore@example.com', '123-654-7890', '2025-03-01', 64000.00),
(28, 'Lily', 'Brown', 'lily.brown@example.com', '987-654-3210', '2025-04-01', 69000.00),
(29, 'Logan', 'Harris', 'logan.harris@example.com', '555-321-6540', '2025-05-01', 57000.00),
(30, 'Chloe', 'Anderson', 'chloe.anderson@example.com', '321-555-7890', '2025-06-01', 61000.00);
HTML (index.html)
– कर्मचारी डेटा और “अधिक लोड करें” बटन प्रदर्शित करने के लिए HTML संरचना बनाएं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Load More Pagination with AJAX</title>
<!-- Added bootstrap css file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- Added bootstrap js cdn file -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Added jquery cdn file -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<!-- Start table -->
<div class="container p-5">
<h3 class="p-4 alert-primary font-weight-normal text-center">Load More Pagination with Php, Ajax, and Bootstrap</h3>
<div class="table-responsive">
<table class="table table-bordered">
<thead class="alert-info">
<tr>
<th>Employee_Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Hire Date</th>
<th>Salary</th>
</tr>
</thead>
<tbody id="employee-list">
</tbody>
</table>
<div class="d-flex justify-content-center align-items-center">
<button id="load-more" class="btn btn-success shadow-none">Load More</button>
</div>
</div>
</div>
<!-- End table -->
<script>
$(document).ready(function () {
let page = 1;
// Function to load employees using AJAX
function loadEmployees() {
$.ajax({
url: 'pagination-ajax.php',
method: 'POST',
data: { page: page },
success: function (data) {
$('#employee-list').append(data);
page++; // Increment page for the next request
if(data === 'No more records'){
$('#load-more').hide();
}
},
error: function (error) {
console.log('Error:', error);
}
});
}
// Load initial set of employees
loadEmployees();
// Load more button click event
$('#load-more').on('click', function () {
loadEmployees();
});
});
</script>
</body>
</html>
PHP (pagination-ajax.php)
– सर्वर-साइड लॉजिक को संभालने, डेटाबेस से कनेक्ट करने और कर्मचारी डेटा लाने के लिए एक PHP स्क्रिप्ट बनाएं।
<?php
// Database connection parameters
$host = 'localhost';
$username = 'root';
$password = '';
$database = 'test';
// Create a connection
$conn = new mysqli($host, $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Get the page parameter from the AJAX request
$page = $_POST['page'];
// Calculate limits for pagination
$employeesPerPage = 5;
$start = ($page - 1) * $employeesPerPage;
// Simulated database query. Replace this with your actual database query.
$sql = "SELECT * FROM employees LIMIT $start, $employeesPerPage";
$result = $conn->query($sql);
// Output employee data
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) { ?>
<tr>
<td><?php echo $row['employee_id']; ?></td>
<td><?php echo $row['first_name']; ?></td>
<td><?php echo $row['last_name']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $row['hire_date']; ?></td>
<td><?php echo $row['salary']; ?></td>
</tr>
<?php }
} else {
echo "No more records";
}
// Close the database connection
$conn->close();
?>
इन चरणों का पालन करके, आप PHP और AJAX का उपयोग करके एक सरल लोड अधिक पेजिनेशन सिस्टम बना सकते हैं। यह उदाहरण सरलता के लिए jQuery का उपयोग करता है, लेकिन यदि आप चाहें तो आप इसे वेनिला जावास्क्रिप्ट में अनुकूलित कर सकते हैं। अपने डेटाबेस संरचना और कनेक्शन विवरण के अनुसार PHP स्क्रिप्ट को कस्टमाइज़ करें। यह ट्यूटोरियल एक आधार प्रदान करता है जिसे आप अपनी विशिष्ट आवश्यकताओं के आधार पर अधिक उन्नत सुविधाओं और संवर्द्धन को लागू करने के लिए तैयार कर सकते हैं।
