C
C#15mo ago
wwww

✅ 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?
No description
13 Replies
wwww
wwwwOP15mo 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
JakenVeina15mo ago
are you asking if you want server-side pagination?
wwww
wwwwOP15mo 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
JakenVeina15mo ago
unless you implement some kind of page cache in your client, yes
wwww
wwwwOP15mo 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
JakenVeina15mo 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
wwww
wwwwOP15mo ago
@V.EINA Jaken
wwww
wwwwOP15mo ago
oh wtf
wwww
wwwwOP15mo ago
JakenVeina
JakenVeina15mo ago
is there a question somewhere in there?
wwww
wwwwOP15mo 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
JakenVeina15mo ago
gg
wwww
wwwwOP15mo 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 };
}
Want results from more Discord servers?
Add your server