Click here to Skip to main content
15,880,392 members
Articles / Operating Systems / Windows

Custom Pager using prev and next in jQuery

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
21 Oct 2015CPOL2 min read 17.2K   5   2
Custom Pager using prev and next in jQuery

In this post, we will create a custom pager using prev and next functions in jQuery. You can treat this post as a simple demo of using prev and next functions. We will be using some html UI elements and we will apply the paging functionality by using native jQuery codes. In this way, you can get the information about which page is requested by the user, once you get it, you can create an jQuery Ajax call and fetch the data from the database and show. You need to know the basics of jQuery and CSS before going further. I hope you will like this.

Background

We can find so many pages on-line. Here in this post, I am just trying to populate my own pager. Please note that this is just a demo, so you cannot find more functionalities here.

Using the Code

First thing you need to do is create a page.

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Prev Next In jQuery - Sibeesh Passion</title>
</head>
<body>
   <div id="container">
        <div id="outer">
            <div>-6</div>
            <div>-5</div>
            <div>-4</div>
            <div>-3</div>
            <div>-2</div>
            <div>-1</div>
            <div class="first">0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>
        <div>
            <table>
                <tr>
                    <td class="prev" title="Previous"><<<</td>
                    <td class="next" title="Next">>>></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Then we will apply some CSS so that it will look nice.

CSS
<style>
       #outer div {
           width: 20px;
           height: 20px;
           border: 1px solid #ccc;
           border-radius: 5px;
           padding: 10px;
           margin: 10px;
           box-shadow: 1px 1px 1px #999;
           font-style: oblique;
           text-align: center;
           float: left;
           background: green;
       }

       #outer .first {
           background: blue;
       }

       .prev, .next {
           font-weight: bold;
           font-size:30px;
           padding:10px;
           cursor:pointer;
       }

       #container {
           text-align: center;
           width: 50%;
           margin-left: 25%;
       }
   </style>

Now add jQuery reference.

JavaScript
<script>
 <script src="JQuery%20Versions/jquery-1.11.3.min.js"></script>

Run your page and make sure that our custom pager design is fine.

Custom Pager Using prev and next In jQuery

Custom Pager Using prev and next In jQuery

Now it is time to add our scripts.

JavaScript
<script>
        $(document).ready(function () {
            var $first = $(".first");
            var i = 0;
            $(".prev").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");                   
                } else {
                    $first = $first.prev();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
            $(".next").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");
                } else {
                    $first = $first.next();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
        });
    </script>

If you notice in the code block, you can see that we are checking $(‘#outer div’).length / 2 < i in each click. This will get true when the user clicked after the selection goes to end. We are just making the iteration to first when this occurs.

We are doing the above mentioned scenario both in prev click and next click. Now it is time for demo right?

Please see the demo here: Custom Pager

That is all. We did it.

Complete Code

HTML
<!DOCTYPE html>
<html>
<head>
    <title>Prev Next In jQuery - Sibeesh Passion</title>
    <script src="http://sibeeshpassion.com/content/scripts/jquery-2.0.2.min.js"></script>
    <script>
        $(document).ready(function () {
            var $first = $(".first");
            var i = 0;
            $(".prev").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");                   
                } else {
                    $first = $first.prev();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
            $(".next").click(function () {
                ++i;
                if ($('#outer div').length / 2 < i) {
                    i = 0;
                    $('#outer .first').css('background', 'blue');
                    $first = $(".first");
                } else {
                    $first = $first.next();
                    $("#outer div").css("background", "green");
                    $first.css("background", "blue");
                }
            });
        });
    </script>
    <style>
        #outer div {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            box-shadow: 1px 1px 1px #999;
            font-style: oblique;
            text-align: center;
            float: left;
            background: green;
        }

        #outer .first {
            background: blue;
        }

        .prev, .next {
            font-weight: bold;
            font-size:30px;
            padding:10px;
            cursor:pointer;
        }

        #container {
            text-align: center;
            width: 50%;
            margin-left: 25%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="outer">
            <div>-6</div>
            <div>-5</div>
            <div>-4</div>
            <div>-3</div>
            <div>-2</div>
            <div>-1</div>
            <div class="first">0</div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
        </div>
        <div>
            <table>
                <tr>
                    <td class="prev" 
                    title="Previous"><<<</td>
                    <td class="next" 
                    title="Next">>>></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Conclusion

Did I miss anything that you may think is needed? Could you find this post useful? I hope you liked this article. Please share your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, ASP.NET Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Germany Germany
I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.

My Blog: Sibeesh Passion
My Website: Sibeesh Venu

Comments and Discussions

 
GeneralWhere to start? Pin
wvdhouten21-Oct-15 21:44
wvdhouten21-Oct-15 21:44 
GeneralRe: Where to start? Pin
Sibeesh Passion22-Oct-15 19:22
professionalSibeesh Passion22-Oct-15 19:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.