top of page

Subscribe to get best practices, tutorials, and many other cool things directly to your email inbox

  • Writer's pictureAhmed Tarek

Paging/Partitioning — Learn the Main Equations to Make it Easy

Learn paging/partitioning mathematical equations and how to apply them in JavaScript and .NET C# code.


Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering

The Paging or Partitioning concept is used in many fields. When you have a set of items and you want to divide them equally between some sort of containers or groups, you are thinking of paging or partitioning but may be you don’t recognize it, yet…


The main goals of this story are to:

  1. Explain some mathematical equations which can make it easy for you to implement the paging or partitioning concept.

  2. Provide some code examples of how to implement paging.


 

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Jessica Tan on Unsplash

Disclaimer


  1. If you are expecting to find explanations for the paging concept on specific applications like operating systems memory management or file system,… then you are reading the wrong story.

  2. Whenever “Page” or “Paging” is mentioned, “Partition” and “Partitioning” would be valid. Therefore, for brevity, I will use “Page” and “Paging”.


 

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Sigmund on Unsplash

Back to Basics


The best way to explain paging is to apply to an example. Let’s assume that we have a collection of 10 items, any kind of items, maybe bottles, pencils, bananas… whatever makes you happy.


Now, we want to divide these 10 items into groups where each group contains 3 items.


If we do this manually, we will have the items distributed as in the image below.


Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering

This was easy, right?


Let’s explain what we have in the table above.

  1. The First item, holding 0 as its Zero-Index, would be found at the 0 Zero-Index position, inside the page of 0 Zero-Index.

  2. The Second item, holding 1 as its Zero-Index, would be found at the 1 Zero-Index position, inside the page of 0 Zero-Index.

  3. The Third item, holding 2 as its Zero-Index, would be found at the 2 Zero-Index position, inside the page of 0 Zero-Index.

  4. The Fourth item, holding 3 as its Zero-Index, would be found at the 0 Zero-Index position, inside the page of 1 Zero-Index.

  5. The Fifth item, holding 4 as its Zero-Index, would be found at the 1 Zero-Index position, inside the page of 2 Zero-Index.

  6. And so on,…


This time you were able to do it manually as the items count is not that big, but, this is not always the case. Therefore, we need to analyze the example above and come up with some mathematical formulas.


 

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Saad Ahmad on Unsplash

The Formula


Doing some analysis, we can come up with the following formula:


Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering

Let me explain; when you divide the Item Zero-Index on the Page Size, you get two things:

  1. The result which would represent the Page Zero-Index.

  2. The remainder which would represent the Item Zero-Index Per Page.


Don’t you believe me? ok, I will show you…


 

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Markus Winkler on Unsplash

Moment of Truth


Let’s apply the formula on our example and see where it goes from there.


Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The First (0) item, would be found at the position 0, inside page 0

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Second (1) item, would be found at the position 1, inside page 0

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Third (2) item, would be found at the position 2, inside page 0

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Fourth (3) item, would be found at the position 0, inside page 1

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Fifth (4) item, would be found at the position 1, inside page 1

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Sixth (5) item, would be found at the position 2, inside page 1

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Seventh (6) item, would be found at the position 0, inside page 2

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Eighth (7) item, would be found at the position 1, inside page 2

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Ninth (8) item, would be found at the position 2, inside page 2

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Tenth (9) item, would be found at the position 0, inside page 3

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
The Eleventh (10) item, would be found at the position 1, inside page 3

I think now you believe me. The formula is proved to be working as charm.


 

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Firmbee.com on Unsplash

Further Analysis


Having the formula proved, let’s do some further analysis.


The formula could be transformed into the shape below:

Item Zero-Index = (Page Zero-Index * Page Size) + (Item Zero-Index Per Page)

This means that if we have a value for Page Zero-Index, and a value for Page Size, and we need to know the Zero-Index of the first item and the last item on this page, we can use the equation above as follows.


First Item Zero-Index= (Page Zero-Index Page Size) + Minimum (Item Zero-Index Per Page)= (Page Zero-Index Page Size) + 0= (Page Zero-Index * Page Size)


Last Item Zero-Index= (Page Zero-Index Page Size) + Maximum (Item Zero-Index Per Page)= (Page Zero-Index Page Size) + (Page Size — 1)


But note that if the calculated Last Item Zero-Index is greater than the index of the last item in the whole collection, then take the smaller number which is the index of the last item in the whole collection.


Again, still you don’t believe me?


To verify these equations, let’s apply on our example:

  • On the first page, (first item Zero-Index = 0 3 = 0) and (last item Zero-Index = (0 3) + (3–1) = 2)

  • On the second page, (first item Zero-Index = 1 3 = 3) and (last item Zero-Index = (1 3) + (3–1) = 5)

  • On the third page, (first item Zero-Index = 2 3 = 6) and (last item Zero-Index = (2 3) + (3–1) = 8)

  • On the fourth page, (first item Zero-Index = 3 3 = 9) and (last item Zero-Index = (3 3) + (3–1) = 11 which is greater than the max available item index (9), therefore, last item Zero-Index = 9)


 

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Nubelson Fernandes on Unsplash

Let’s See Some Code


Having all the equations proved, let’s see how to apply them in code. I will provide two implementations, one in JavaScript, and the other one in .NET C#.


 

JavaScript Code

Applying the equations in the form of an extension function to the JavaScript Array.



Now, executing this code



Would return


Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering

And, executing this code



Would return


Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering

 

.NET C# Code

Applying the equations in the form of an extension method to the .NET C# List.



Now, executing this code



Would return


Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering

And, executing this code



Would return


Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering

Learn paging/partitioning mathematical equations and how to apply them in JavaScript (JS) and DotNet (.NET) CSharp (C#) code. Best Practice Code Coding Programming Software Development Architecture Engineering
Photo by Grégoire Bertaud on Unsplash

Final Words


That’s it. These are the most important equations you would need to know about to apply paging in any situation.


You can also use the code samples to apply in your own project using whatever language or framework you are using.


That’s it, hope you found reading this article as interesting as I found writing it.



Recent Posts

See All

Subscribe to get best practices, tutorials, and many other cool things directly to your email inbox

bottom of page