-
Notifications
You must be signed in to change notification settings - Fork 0
/
pagination.js
46 lines (40 loc) · 1.8 KB
/
pagination.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$(document).ready(function() {
const urlParams = new URLSearchParams(window.location.search);
const page = parseInt(urlParams.get('page')) || 1;
const limit = parseInt(urlParams.get('limit')) || 10;
// URL of CRUD
const apiUrl = 'http://localhost:3001/students';
function fetchAndDisplayStudents(page, limit) {
const startIndex = (page - 1) * limit;
$.ajax({
url: apiUrl,
type: 'GET',
dataType: 'json',
success: function(data) {
const paginatedData = data.slice(startIndex, startIndex + limit);
$('#studentTable tbody').empty();
paginatedData.forEach(student => {
const studentRow = `
<tr>
<td><a href="studentDetails.html?id=${encodeURIComponent(student.id)}">${student.id}</a></td>
<td>${student.firstname}</td>
<td>${student.lastname}</td>
<td>${student.date_of_birth}</td>
<td>${student.class}</td>
<td>${student.mobileNo}</td>
<td>
<i class="fas fa-edit edit-icon" data-id="${student.id}"></i> <!-- Edit icon -->
<i class="fas fa-trash delete-icon" data-id="${student.id}"></i> <!-- Delete icon -->
</td>
</tr>
`;
$('#studentTable tbody').append(studentRow);
});
},
error: function(xhr, status, error) {
console.error('Error fetching student data:', error);
}
});
}
fetchAndDisplayStudents(page, limit);
});