Member Avatar for techyworld

Hi i need some help of how to display data dynamically.i just need someone to explain me the concept. actually I am retrieving some data from database but i dont know how many data there will.it can 2,3 10,50,150,...200 and so on.
in javascript, i will display 10 par page,when the user will click on next button then it will display the next 10 and goes on like this. I am using a javscript library which allow me to bind event on next and previous button. normally if i know how many data exactly, i can already calculate the number of times the user can click on "next" and using for loop i can do the job. but here the scenario is different i dont know how many data will there be. how will i know how many for loop i should defined? any idea? can someone guide me?

  • 3 Contributors
  • 4 Replies
  • 213 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by lambing

Dani AI

Generated

For the scenario described by (an array of records arriving on the client, page size = 10), there is no need to "guess" how many Next clicks are allowed. Track a current page index and derive the number of pages from the array length at runtime. That keeps the UI correct even if the record count changes.

Example (client-side pagination):

const pageSize = 10;
let pageIndex = 0; // zero-based
const totalItems = data.length;
const totalPages = Math.ceil(totalItems / pageSize);

function getPageItems(arr, idx) {
  const start = idx * pageSize;
  return arr.slice(start, start + pageSize);
}

function render() {
  const items = getPageItems(data, pageIndex);
  // replace container contents with items...
  prevBtn.disabled = pageIndex === 0;
  nextBtn.disabled = pageIndex >= totalPages - 1;
}

Event handlers simply increment/decrement the index and call render. No precomputed loop is required.

Notes and alternatives:

  • If the client already holds all records (<= 50 as mentioned), client-side slicing is simplest and fast.
  • If the dataset can grow or should not be fully loaded, implement server-side pagination and return only the requested page. As recommended, including the total count in the response lets the client compute pages. As outlined, limit/offset on the backend is the usual approach.
  • If the backend cannot supply a total, the client can detect the end by checking whether a fetched page has fewer than pageSize items and then disable Next.

Troubleshooting tips:

  • Keep page indexing consistent (0-based vs 1-based) across code and UI.
  • After any data update, recompute totalPages and clamp pageIndex: pageIndex = Math.min(pageIndex, totalPages - 1).
  • For very large sets, prefer server-side or cursor-based pagination to avoid memory and performance issues.

Recommended Answers

All 4 Replies

Member Avatar for pritaeas

If you control what is returned from the database, then you can decide to return the total number of records with every call. What I would do is an Ajax call that has the current page as parameter, and the number of items you want to show. What I would return is either the number of records, or the number of pages, and the requested results.

Member Avatar for techyworld

the database will return me the whole record in an array. according to the length of array i will know how much record in all i have. but i cant understand why i should use ajax?actually i have reduced my complexity. i can have records up to 50. it can be 2 3 15 25...50 not more.

Member Avatar for pritaeas

Apparently I misunderstood your original question.

Member Avatar for lambing

Basically when you click a next button, you pass some parameters (e.g. {:page => 2}) to your backend, then your backend will then do the query on the set of data you are going to display. Let's say per page you display 10 records you do some query like this.

I'm using ruby so never mind my syntax

per_page = 10
page = params[:page]
offset = per_page * page

so your query will be something like this.
Table.limit(10).offset(offset) - What this does is something like select * from table limit 10 offset 20

It will start searching data on the 20th record given the fact that you passed page 2 on your params and will return a set of 10 records.

Then return the data on your client and display the retrieved data. If no more data is returned, then that's the end of your pagination, so you may hide the next button. I hope that helps.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.