52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import axios from 'axios';
|
|
|
|
const Pagination = () => {
|
|
const [data, setData] = useState([]);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const itemsPerPage = 10; // Number of items to display per page
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await axios.get('https://v1api.ccnnct.dp.gtfs.swingbe.de/trip-updates-odd-trips?day=2024-01-31');
|
|
setData(response.data);
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
};
|
|
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
const currentItems = data.slice(startIndex, endIndex);
|
|
|
|
const handlePreviousPage = () => {
|
|
if (currentPage > 1) {
|
|
setCurrentPage(currentPage - 1);
|
|
}
|
|
};
|
|
|
|
const handleNextPage = () => {
|
|
const totalPages = Math.ceil(data.length / itemsPerPage);
|
|
if (currentPage < totalPages) {
|
|
setCurrentPage(currentPage + 1);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<dl>
|
|
{currentItems.map((item) => (
|
|
<dt key={item.id}>{item.trip_trip_id}</dt>
|
|
))}
|
|
</dl>
|
|
<button onClick={handlePreviousPage}>Previous</button>
|
|
<button onClick={handleNextPage}>Next</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Pagination;
|