How Do I Do Simple Pagination in ASP.NET MVC? | Code2Night
Code2night
  • Home
  • Blogs
  • Guest Posts
  • Tutorial
  • Post Blog
  • Register
  • Login
  1. Home
  2. Blogpost

Simple Pagination in Asp.Net MVC

Date- Feb 12,2023

5659

Free Download Pay & Download
Simple Pagination Pagination in mvc

Hello guys and welcome to Code2Night! In MVC projects, we often come across the need to incorporate pagination either on the client side or the server side. In this article, we will delve into the implementation of simple pagination in ASP.NET MVC using jQuery.

Pagination plays a vital role in enhancing user experience by dividing large data sets into manageable chunks, thus reducing the clutter on a single page. By implementing pagination, we can present data in a more organized and user-friendly manner.

ASP.NET MVC, a powerful web development framework, offers a seamless integration with jQuery, a popular JavaScript library, to achieve efficient pagination functionality. By leveraging the combined power of these two technologies, we can create a smooth and interactive pagination experience for our users.

In this article, we will walk you through the step-by-step process of implementing pagination in ASP.NET MVC using jQuery. We will explore the concepts of client-side and server-side pagination, and discuss their respective advantages and use cases. You will gain insights into the underlying principles and techniques involved, enabling you to incorporate pagination seamlessly into your own MVC projects.

So, whether you are a seasoned developer looking to enhance your skills or a beginner seeking a solid introduction to pagination in ASP.NET MVC, this article is tailored to meet your needs. By the end of this article, you will not only have a solid understanding of implementing pagination in ASP.NET MVC using jQuery but also be equipped with the knowledge to customize and extend the functionality to suit your unique application needs.

So, fasten your seatbelts as we embark on this exciting journey into the world of pagination in ASP.NET MVC. Together, let's unlock the potential of jQuery and ASP.NET MVC to create stunning and user-friendly web applications that provide an exceptional browsing experience.

Stay tuned, and let's embark on how to implement a simple pagination in ASP.NET MVC using the powerful capabilities of jQuery!

Simple Pagination

Simple Pagination is a jquery library that helps us in setting up client-side pagination as well as can support in server-side pagination.

For implementing this in your project you have to follow these steps

So, first of all, add the following scripts and CSS to your webpage

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.4/simplePagination.css" integrity="sha512-emkhkASXU1wKqnSDVZiYpSKjYEPP8RRG2lgIxDFVI4f/twjijBnDItdaRh7j+VRKFs4YzrAcV17JeFqX+3NVig==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.4/jquery.simplePagination.js" integrity="sha512-D8ZYpkcpCShIdi/rxpVjyKIo4+cos46+lUaPOn2RXe8Wl5geuxwmFoP+0Aj6wiZghAphh4LNxnPDiW4B802rjQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Now, we have to create one table with some demo data which we will try to add pagination on 

<div class="row">
    <table id="tableDemo" class="table table-striped">
        <thead>
            <tr>
                <th>
                    Id
                </th>
                <th>
                    Name
                </th>
                <th>
                    Address
                </th>

            </tr>
        </thead>
        <tbody>
            <tr><td>1</td><td>Name 1</td> <td>Address 1</td></tr>
            <tr><td>2</td><td>Name 2</td> <td>Address 2</td></tr>
            <tr><td>3</td><td>Name 3</td> <td>Address 3</td></tr>
            <tr><td>4</td><td>Name 4</td> <td>Address 4</td></tr>
            <tr><td>5</td><td>Name 5</td> <td>Address 5</td></tr>
            <tr><td>6</td><td>Name 6</td> <td>Address 6</td></tr>
            <tr><td>7</td><td>Name 7</td> <td>Address 7</td></tr>
            <tr><td>8</td><td>Name 8</td> <td>Address 8</td></tr>
            <tr><td>9</td><td>Name 9</td> <td>Address 9</td></tr>
            <tr><td>10</td><td>Name 10</td> <td>Address 10</td></tr>
            <tr><td>11</td><td>Name 11</td> <td>Address 11</td></tr>
            <tr><td>12</td><td>Name 12</td> <td>Address 12</td></tr>
            <tr><td>13</td><td>Name 13</td> <td>Address 13</td></tr>
            <tr><td>14</td><td>Name 14</td> <td>Address 14</td></tr>

        </tbody>
    </table>
    <div id="pagination"></div>
</div>

Simple Pagination

Now that we have the demo data we can add this script for initializing the pagination.

<script>
    $(function () {
        $('#pagination').pagination({
            items: $('#tableDemo tr').length,
            itemsOnPage: 5,
            cssStyle: 'light-theme',
            onPageClick: function (pageNumber) {
                debugger;
                var perpage = 5;
                var showfrom = perpage * (pageNumber - 1);
                var showTo = showfrom + perpage;
                $('#tableDemo tbody tr').hide().slice(showfrom, showTo).show();
            }
        });
        $('#pagination').pagination('selectPage', 1);
    });
</script>

So, here you can set how many items you want to see on each page and also implement server-side code in the onPageClick method. Now run the application

So this is how you can implement pagination in Asp.net MVC using Simple Pagination js.

Comments

Tags

LinkedinLogin
LinkedinProfile
GetLinkedinProfile
C#
Aspnet
MVC
Linkedin
ITextSharp
Export to Pdf
AspNet Core
AspNet
View to Pdf in Aspnet
Model Validation In ASPNET Core MVC 60
Model Validation
Model Validation In ASPNET Core MVC
Model Validation In ASPNET
Image Compression in AspNet
Compress Image in c#
AspNet MVC
Free Download for Youtube Subscribers!

First click on Subscribe Now and then subscribe the channel and come back here.
Then Click on "Verify and Download" button for download link

Subscribe Now | 1190
Download
Support Us....!

Please Subscribe to support us

Thank you for Downloading....!

Please Subscribe to support us

Continue with Downloading
Be a Member
Join Us On Whatsapp Join Us On Facebook

Welcome To Code2night, A common place for sharing your programming knowledge,Blogs and Videos

  • Panipat
  • info@Code2night.com

Links

  • Home
  • Blogs
  • Tutorial
  • Post Blog

Popular Tags

Copyright © 2025 by Code2night. All Rights Reserved

  • Home
  • Blog
  • Login
  • SignUp
  • Contact
  • Terms & Conditions
  • Refund Policy
  • About Us
  • Privacy Policy
  • Json Beautifier
  • Guest Posts