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>

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.