pagination
parent
b3df941551
commit
fefb39141d
|
|
@ -4,7 +4,9 @@ import sqlite3 from 'sqlite3';
|
|||
|
||||
export default function handler(req,res) {
|
||||
|
||||
console.log(req.body.school)
|
||||
// const query = req.query;
|
||||
const { page, limit } = req.query;
|
||||
console.log(page)
|
||||
// const {
|
||||
// query: { name, keyword },
|
||||
// method,
|
||||
|
|
@ -52,7 +54,7 @@ console.log(req.body.school)
|
|||
};
|
||||
async function doSomething() {
|
||||
try {
|
||||
const returnData = await getAllRows('user',2,10);
|
||||
const returnData = await getAllRows('user',page,limit);
|
||||
res.setHeader('Content-Type', 'application/json')
|
||||
res.status(200).json(returnData)
|
||||
// console.log(data);
|
||||
|
|
|
|||
|
|
@ -1,23 +1,28 @@
|
|||
import { signIn, signOut, useSession } from 'next-auth/react'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
import Link from 'next/link'
|
||||
import NavBar from '../components/NavBar'
|
||||
export default function Modal() {
|
||||
export default function UserList() {
|
||||
const router = useRouter();
|
||||
const { data: session } = useSession()
|
||||
const [user, setUser] = useState([]);
|
||||
const [maxPageNumber, setMaxPageNumber] = useState([]);
|
||||
const fetchData = async () => {
|
||||
const response = await fetch("/api/listUsers");
|
||||
const fetchData = async (page) => {
|
||||
const response = await fetch("/api/listUsers?page="+page+"&limit=10");
|
||||
const data = await response.json();
|
||||
console.log(data)
|
||||
setMaxPageNumber(data.maxPageNumber);
|
||||
return setUser(data.data);
|
||||
}
|
||||
// console.log(user)
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
},[])
|
||||
|
||||
// console.log(user)
|
||||
useEffect(()=>{ if(!router.isReady) return; fetchData(4); }, [router.isReady]);
|
||||
|
||||
// useEffect(() => {
|
||||
// fetchData();
|
||||
// },[])
|
||||
if(session) {
|
||||
return (
|
||||
<main>
|
||||
|
|
@ -26,33 +31,33 @@ if(session) {
|
|||
<section className='container mx-auto px-4 mt-16'>
|
||||
<div className="flex flex-row justify-end bg-[#FFF6F2] p-2 gap-x-4 border-x-2 border-t-2 rounded-t-xl">
|
||||
<nav aria-label="Page navigation example">
|
||||
<ul class="inline-flex items-center -space-x-px">
|
||||
<li>
|
||||
<a href="#" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 ">
|
||||
<span class="sr-only">Previous</span>
|
||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||||
<ul className="inline-flex items-center -space-x-px">
|
||||
{/* <li>
|
||||
<a href="#" className="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 ">
|
||||
<span className="sr-only">Previous</span>
|
||||
<
|
||||
</a>
|
||||
</li>
|
||||
</li> */}
|
||||
{maxPageNumber.map((number) => (
|
||||
<li key={number}> <Link href={{ pathname: '/user-list', query: { page: number } }} class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 ">{number}</Link> </li>
|
||||
<button key={number} onClick={() => fetchData(number)} className="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 ">{number} </button>
|
||||
))}
|
||||
|
||||
<li>
|
||||
<a href="?page=6" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 ">
|
||||
<span class="sr-only">Next</span>
|
||||
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
|
||||
{/* <li>
|
||||
<a href="?page=6" className="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 ">
|
||||
<span className="sr-only">Next</span>
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</li> */}
|
||||
</ul>
|
||||
</nav>
|
||||
<div className="flex flex-row justify-center place-items-center">
|
||||
<input type="text" className="md:w-32 md:focus:w-96 duration-[1s] border-2 border-[#FE4501] w-full rounded-l-full p-2 focus:outline-none focus:border-[#F2B705] bg-[#FFF6F2] focus:bg-white text-center" placeholder="Search User" />
|
||||
<a href="" className="bg-[#FE4501] rounded-r-full p-2 px-4 border-2 border-[#FE4501] text-white font-bold ">
|
||||
<svg className="hover:scale-110 active:scale-75 duration-300" width="24px" height="24px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#ffffff" fill-rule="evenodd" d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z"></path> </g></svg>
|
||||
🔍
|
||||
</a>
|
||||
</div>
|
||||
<Link href="/add-user-form" className="inline-flex place-items-center p-2 bg-[#FE4501] text-white font-bold rounded-full whitespace-nowrap">
|
||||
<svg className="font-bold" width="25px" height="25px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="2"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" transform="translate(3 2)"> <path d="m7.5.5c1.65685425 0 3 1.34314575 3 3v2c0 1.65685425-1.34314575 3-3 3s-3-1.34314575-3-3v-2c0-1.65685425 1.34314575-3 3-3z"></path> <path d="m14.5 2.5v4"></path> <path d="m16.5 4.5h-4"></path> <path d="m14.5 14.5v-.7281753c0-3.1864098-3.6862915-5.2718247-7-5.2718247s-7 2.0854149-7 5.2718247v.7281753c0 .5522847.44771525 1 1 1h12c.5522847 0 1-.4477153 1-1z"></path> </g> </g></svg>
|
||||
⛨
|
||||
Add User
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -85,8 +90,7 @@ if(session) {
|
|||
<div className="flex flex-row justify-center place-items-center">
|
||||
<div className="flex justify-center">
|
||||
<a href={'/edit-user/?user='+data.id} className="px-2 py-1 rounded-md">
|
||||
<svg width="35px" height="35px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#166435"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.15" d="M8 16H12L18 10L14 6L8 12V16Z" fill="#166435"></path> <path d="M14 6L8 12V16H12L18 10M14 6L17 3L21 7L18 10M14 6L18 10M10 4L4 4L4 20L20 20V14" stroke="#166435" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
{/* <p className="text-[16px] text-green-800">Edit</p> */}
|
||||
✎
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue