Collectpagination.js
import React, { useState, useEffect } from 'react'
function CollectionPagination(props) {
const [pageCount, setPageCount] = useState(props.itemsPerPage);// Initial page count, you can set it based on your requirements
const [currentPage, setCurrentPage] = useState(props.currentPage);
const [totalItems, setTotalItems] = useState(props.totalItems);
// Handler function for changing the page count
useEffect(() => {
setTotalItems(props.totalItems);
const newPageCount = parseInt(props.currentPage, 10);
// setCurrentPage(newPageCount);
handlePageChange(newPageCount)
}, [props.totalItems]);
const handlePageCountChange = (event) => {
const newPageCount = parseInt(event.target.value, 10);
setCurrentPage(newPageCount);
props.onPageChange(newPageCount);
};
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
props.onPageChange(newPage);
};
const totalPages = Math.ceil(totalItems / pageCount);
return (
<div>
<div className="flex pt-2 pb-4 justify-between items-center mb-4 w-11/12 md:w-11/12 xl:w-10/12 m-auto">
<div className="flex content-center justify-start items-center">
<p className='font-AnekOdia text-xsmall font-light text-black'>
Showing
<span className='mx-2 border-b border-warmgray-300 font-medium'>
<select
defaultValue={currentPage}
onChange={handlePageCountChange}
className="bg-white border-b outline-none p-1 cursor-pointer"
>
{[...Array(totalPages).keys()].map((value) => (
<option key={value + 1} value={value + 1}>
{value + 1}
</option>
))}
{/* Add more options as needed */}
</select>
</span>
of {totalPages}
</p>
</div>
<div className='mx-4 mr-0 md:mx-0 flex'>
{/* Previous Page Button */}
<div
className={`bg-gray-100 w-[42px] h-[27px] flex justify-center items-center border border-collectionbg rounded-3xl ${(currentPage === 1 || totalPages === 0) ? 'opacity-50 cursor-not-allowed pointer-events-none' : 'cursor-pointer '
}`}
onClick={() => handlePageChange(currentPage - 1)}
>
<svg xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none">
<path d="M-5.60304e-05 5.49998C-5.60217e-05 5.30284 0.0752175 5.10572 0.225448 4.95541L4.95526 0.225656C5.25613 -0.0752187 5.74395 -0.0752186 6.0447 0.225656C6.34545 0.526409 6.34545 1.01413 6.0447 1.31503L1.8595 5.49998L6.04455 9.68496C6.34531 9.98583 6.34531 10.4735 6.04455 10.7742C5.7438 11.0752 5.25598 11.0752 4.95511 10.7742L0.225301 6.04454C0.0750468 5.89417 -5.6039e-05 5.69705 -5.60304e-05 5.49998Z" fill="#5053BB" />
</svg>
</div>
{/* Next Page Button */}
<div
className={`bg-collectionbg w-[42px] h-[27px] mx-3 md:mr-0 mr-0 flex justify-center items-center rounded-3xl ${(currentPage === totalPages || totalPages === 0) ? 'opacity-50 cursor-not-allowed pointer-events-none' : 'cursor-pointer'
}`} onClick={() => handlePageChange(currentPage + 1)}
>
<svg xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none">
<path d="M6.27032 5.50002C6.27032 5.69716 6.19505 5.89428 6.04482 6.04458L1.31501 10.7743C1.01413 11.0752 0.526317 11.0752 0.225565 10.7743C-0.0751882 10.4736 -0.0751882 9.98587 0.225564 9.68497L4.41076 5.50002L0.22571 1.31504C-0.0750424 1.01417 -0.0750425 0.5265 0.22571 0.225771C0.526463 -0.0752497 1.01428 -0.0752497 1.31515 0.225771L6.04496 4.95546C6.19522 5.10583 6.27032 5.30295 6.27032 5.50002Z" fill="white" />
</svg>
</div>
</div>
</div>
</div>
)
}
export default CollectionPagination
paymentcollectionindex.js
<div className='mt-5'>
<CollectionPagination itemsPerPage={itemsPerPage} totalItems={filteredData?.totalCount||0} currentPage={currentPage} onPageChange={(e) => Filters(e, 'page')} />
</div>
Filter Function
const updateURL = (() => {
const queryParams = new URLSearchParams();
if (subsidary) { queryParams.set('subsidary', subsidary); }
if (collector) { queryParams.set('collector', collector); }
if (statusFilter) { queryParams.set('status', statusFilter); }
if (fromDateFilter) { queryParams.set('fromDate', fromDateFilter); }
if (toDateFilter) { queryParams.set('toDate', toDateFilter); }
if (page) { queryParams.set('page', page); }
if (searchValue) { queryParams.set('q', searchValue); }
const filterdata = filterItems(Data, subsidary, collector, statusFilter, fromDateFilter, toDateFilter, searchValue, parseInt(page, 10), 10,Sort)
setFilteredData(filterdata);
console.log( parseInt(page, 10), 'Date')
navigate(`?${queryParams.toString()}`);
});
const filterItems = (array, subsidary, collector, status, fromDate, toDate, nameSubstring, page, pageSize,sortBy) => {
console.log(sortBy,'dskhi')
if (!collector && !subsidary && !status && !fromDate && !toDate && !nameSubstring&& !sortBy) {
// No filters specified, return the entire array
return { paginatedArray: array.slice((page - 1) * pageSize, page * pageSize), totalCount: array.length };
}
const filteredArray = array.filter(item => {
// Filter by collector
if (collector && item.collector !== collector) {
return false;
}
if (subsidary && item.subsidary !== subsidary) {
return false;
}
// Filter by status
if (status && item.Status !== status) {
return false;
}
// Filter by date range
if (fromDate && new Date(formatbyYear(item.date)) < new Date(formatbyYear(fromDate))) {
return false;
}
if (toDate && new Date(formatbyYear(item.date)) > new Date(formatbyYear(toDate))) {
return false;
}
// Filter by name substring
if (nameSubstring && !item.Receipt.includes(nameSubstring)) {
return false;
}
// If all criteria match, include the item in the filtered result
return true;
});
if (sortBy) {
filteredArray.sort((a, b) => {
if (typeof a[sortBy] === 'string' && typeof b[sortBy] === 'string') {
// If both values are strings, use localeCompare for string comparison
return a[sortBy].localeCompare(b[sortBy]);
} else {
// Otherwise, convert to numbers and compare
return a[sortBy] - b[sortBy];
}
});
}
// Apply pagination
const totalCount = filteredArray.length;
// Apply pagination
const startIndex = (page - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedArray = filteredArray.slice(startIndex, endIndex);
return { paginatedArray, totalCount };
};