Simple Pagination in Asp.Net MVC

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 following scripts and css on 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 since 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 onPageClick method.Now run the application

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