C#•14mo ago

✅ Any Frontenders? pagination

Hi, so i was training in building pagination, thats what i got - works well,

<script>
    window.addEventListener("load", async () => {
        await RequestDataForPage(0);

        const response = await fetch("api/pageAmount", {
            method: "GET",
            headers: { "Accept": "application/json" }
        });

        const data = await response.json();

        for (let i = 0; i < data; i++) {
            const btn = document.createElement("button");
            btn.classList.add("pagination_btn");
            btn.addEventListener("click", () => RequestDataForPage(i))
            btn.textContent = i + 1;
            document.querySelector("[data-nation]").appendChild(btn);
        };
    });

    async function RequestDataForPage(id) {
        const response = await fetch(`api/${id}`, {
            method: "GET",
            headers: { "Accept": "application/json" }
        });

        const data = await response.json();

        const dataList = document.querySelector("[data-list]");

        while (dataList.firstChild) {
            dataList.removeChild(dataList.firstChild);
        }

        data.forEach(elemetn => {
            const listElement = document.createElement("li");
            listElement.classList.add("listElement");
            listElement.textContent = elemetn;

            dataList.appendChild(listElement);
        });
    }
</script>

<script>
    window.addEventListener("load", async () => {
        await RequestDataForPage(0);

        const response = await fetch("api/pageAmount", {
            method: "GET",
            headers: { "Accept": "application/json" }
        });

        const data = await response.json();

        for (let i = 0; i < data; i++) {
            const btn = document.createElement("button");
            btn.classList.add("pagination_btn");
            btn.addEventListener("click", () => RequestDataForPage(i))
            btn.textContent = i + 1;
            document.querySelector("[data-nation]").appendChild(btn);
        };
    });

    async function RequestDataForPage(id) {
        const response = await fetch(`api/${id}`, {
            method: "GET",
            headers: { "Accept": "application/json" }
        });

        const data = await response.json();

        const dataList = document.querySelector("[data-list]");

        while (dataList.firstChild) {
            dataList.removeChild(dataList.firstChild);
        }

        data.forEach(elemetn => {
            const listElement = document.createElement("li");
            listElement.classList.add("listElement");
            listElement.textContent = elemetn;

            dataList.appendChild(listElement);
        });
    }
</script>

so, my problem is, i have no clue how to... can't even say what i need, like in this case i have 5 buttons cuz -

const int ITEMS_PER_PAGE = 5;
List<string> list = new List<string>
{
    "1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
    "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
    "21", "22", "23"
};

[Route("api/pageAmount")]
public IActionResult pageAmount()
{
    int pageAmount = list.Count / ITEMS_PER_PAGE;
    return Json(pageAmount + 1);
}

const int ITEMS_PER_PAGE = 5;
List<string> list = new List<string>
{
    "1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
    "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
    "21", "22", "23"
};

[Route("api/pageAmount")]
public IActionResult pageAmount()
{
    int pageAmount = list.Count / ITEMS_PER_PAGE;
    return Json(pageAmount + 1);
}

so, what should i do for render only 3 pages, and like when on page 1 i click page 3, it render 2 - 3 - 4?

13 Replies

wwwwOP•14mo ago

So, if its something super complicated for js without advanced frameworks, i prefer to keep it this way or maybe i need to handle it in controller? like don't send page amount, just send specific pages i want to render?, like make start with 1-2-3 always, and on clicking for examle 3, send ((3-1) (3) (3+1) ? and handle edge cases by if's?

JakenVeina•14mo ago

are you asking if you want server-side pagination?

wwwwOP•14mo ago

will it require to refresh my page all the time? like, when i get to models and views, i thoght it will be super easy to do pagination but its kida sucks to refresh page all the time and a back to js options

JakenVeina•14mo ago

unless you implement some kind of page cache in your client, yes

wwwwOP•14mo ago

atm, i think im on the right way

[Route("api/pagination/{id=1}")]
public IActionResult Pagination(int pageId)
{
    int lastPage = list.Count / ITEMS_PER_PAGE + 1;
    List<int> pages = SetList(pageId - 1, pageId, pageId + 1);
    if (pageId == 0)
        pages = SetList(1, 2, 3);
    if (pageId == lastPage)
        pages = SetList(lastPage - 2, lastPage - 1, lastPage);

    return Json(pages);
}

private List<int> SetList(int a, int b, int c) => new List<int> { a, b, c };

[Route("api/pagination/{id=1}")]
public IActionResult Pagination(int pageId)
{
    int lastPage = list.Count / ITEMS_PER_PAGE + 1;
    List<int> pages = SetList(pageId - 1, pageId, pageId + 1);
    if (pageId == 0)
        pages = SetList(1, 2, 3);
    if (pageId == lastPage)
        pages = SetList(lastPage - 2, lastPage - 1, lastPage);

    return Json(pages);
}

private List<int> SetList(int a, int b, int c) => new List<int> { a, b, c };

JakenVeina•14mo ago

if your intent is to load ALL records at once, and paginate them just for display, I woild propose that the goal you're trying to achieve is a better user experience for viewing a lot of records, and pagination is rather poor for that goal if your intent is to minimize the amount of data being pulled from the server to client, pagination is a fine solution, and having repeat queries to the server to retrieve more data is actually what you WANT

wwwwOP•14mo ago

@V.EINA Jaken

wwwwOP•14mo ago

oh wtf

wwwwOP•14mo ago

JakenVeina•14mo ago

is there a question somewhere in there?

wwwwOP•14mo ago

no, just solved and sharing i did it 🙂 so, will save code here and close ticket 🙂

<script>
    window.addEventListener("load", async () => {
        await RequestDataForPage(0);
    });

    async function ReqiestPaginaton(id) {
        const response = await fetch(`api/pagination/${id}`, {
            method: "GET",
            headers: { "Accept": "application/json" }
        });

        const data = await response.json();
        ClearByAttribute("nation");

        data.forEach(i => {
            const btn = document.createElement("button");
            btn.classList.add("pagination_btn");
            btn.addEventListener("click", () => RequestDataForPage(i))
            btn.textContent = i + 1;
            document.querySelector("[data-nation]").appendChild(btn);
        });
    }

    async function RequestDataForPage(id) {
        const response = await fetch(`api/${id}`, {
            method: "GET",
            headers: { "Accept": "application/json" }
        });

        const data = await response.json();

        ClearByAttribute("list");

        data.forEach(elemetn => {
            const listElement = document.createElement("li");
            listElement.classList.add("listElement");
            listElement.textContent = elemetn;

            document.querySelector("[data-list]").appendChild(listElement);
        });
        
        ReqiestPaginaton(id);
    }

    function ClearByAttribute(attr) {
        let elemetn = document.querySelector(`[data-${attr}]`);
        while (elemetn.firstChild) {
            elemetn.removeChild(elemetn.firstChild);
        }
    }
</script>

<script>
    window.addEventListener("load", async () => {
        await RequestDataForPage(0);
    });

    async function ReqiestPaginaton(id) {
        const response = await fetch(`api/pagination/${id}`, {
            method: "GET",
            headers: { "Accept": "application/json" }
        });

        const data = await response.json();
        ClearByAttribute("nation");

        data.forEach(i => {
            const btn = document.createElement("button");
            btn.classList.add("pagination_btn");
            btn.addEventListener("click", () => RequestDataForPage(i))
            btn.textContent = i + 1;
            document.querySelector("[data-nation]").appendChild(btn);
        });
    }

    async function RequestDataForPage(id) {
        const response = await fetch(`api/${id}`, {
            method: "GET",
            headers: { "Accept": "application/json" }
        });

        const data = await response.json();

        ClearByAttribute("list");

        data.forEach(elemetn => {
            const listElement = document.createElement("li");
            listElement.classList.add("listElement");
            listElement.textContent = elemetn;

            document.querySelector("[data-list]").appendChild(listElement);
        });
        
        ReqiestPaginaton(id);
    }

    function ClearByAttribute(attr) {
        let elemetn = document.querySelector(`[data-${attr}]`);
        while (elemetn.firstChild) {
            elemetn.removeChild(elemetn.firstChild);
        }
    }
</script>

JakenVeina•14mo ago

wwwwOP•14mo ago

public class HomeController : Controller
{
    const int ITEMS_PER_PAGE = 5;
    const double IPPFC = (double)ITEMS_PER_PAGE;
    List<string> list = new List<string>
    {
        "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"
    };

    [Route("api/pagination/{pageId}")]
    public IActionResult Pagination(int pageId)
    {
        double xdd = list.Count / IPPFC;
        int lastPage =(int)Math.Ceiling(xdd);

        List<int> pages = SetList(pageId - 1, pageId, pageId + 1);
        if (pageId == 0)
            pages = SetList(0, 1, 2);
        if (pageId + 1 == lastPage)
            pages = SetList(lastPage - 3, lastPage - 2, lastPage - 1);


        return Json(pages);
    }

    [Route("api/{id=1}")]
    public IActionResult Index(int id)
    {
        var x = list.Skip(id * ITEMS_PER_PAGE).Take(ITEMS_PER_PAGE).ToList();
        return Json(x);
    }

    private List<int> SetList(int a, int b, int c) => new List<int> { a, b, c };
}

public class HomeController : Controller
{
    const int ITEMS_PER_PAGE = 5;
    const double IPPFC = (double)ITEMS_PER_PAGE;
    List<string> list = new List<string>
    {
        "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"
    };

    [Route("api/pagination/{pageId}")]
    public IActionResult Pagination(int pageId)
    {
        double xdd = list.Count / IPPFC;
        int lastPage =(int)Math.Ceiling(xdd);

        List<int> pages = SetList(pageId - 1, pageId, pageId + 1);
        if (pageId == 0)
            pages = SetList(0, 1, 2);
        if (pageId + 1 == lastPage)
            pages = SetList(lastPage - 3, lastPage - 2, lastPage - 1);


        return Json(pages);
    }

    [Route("api/{id=1}")]
    public IActionResult Index(int id)
    {
        var x = list.Skip(id * ITEMS_PER_PAGE).Take(ITEMS_PER_PAGE).ToList();
        return Json(x);
    }

    private List<int> SetList(int a, int b, int c) => new List<int> { a, b, c };
}

Gaming

Programming

✅ Any Frontenders? pagination