Open In App

How to integrate jQuery Pagination Plugin ?

Last Updated : 12 Apr, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

 simplePagination.js is a jQuery plugin that provides simple yet fully customizable pagination in our websites.  It is a robust and highly customizable jQuery-based pagination system for your long content to improve webpage readability. Its major features are listed below.

  • You can paginate any group of HTML elements on the webpage.
  • It is easy to use and can be used to dynamically generates pagination links.
  • It is highly customizable.

Now lets us know how to integrate this Pagination Plugin in our website .

First include these CDN links in your html file.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/jquery.simplePagination.min.js”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/simplePagination.js/1.6/simplePagination.min.css”>

Example:

HTML




<!DOCTYPE html>
<>
   
<head>
    <style type="text/css">
        body {
            font-size: 14px;
            line-height: 18px;
            background: green;
        }
           
        .item {
            border: 1px solid #EEE;
            background: #FFF;
            margin-bottom: 10px;
            padding: 10px;
        }
           
        #pagination {
            margin-left: 500px;
        }
    </style>
</head>
   
<body>
    <div class="wrapper">
        <div class="item">
            <h4>Data Structure and Algorithm</h4>
            <p>
                Learn Data Structures & Algorithms 
                at your own pace to prepare for top 
                product-based companies like Amazon, 
                Uber, Adobe, etc. It contains 200+ 
                algorithmic coding problems, Lifetime 
                access to the Course, Premium Lecture 
                videos by Mr. Sandeep Jain
                (CEO & Founder, GeeksforGeeks)
            </p>
        </div>
  
        <div class="item">
            <h4>Fork Java</h4>
            <p>Specially designed free Java course 
                for beginners which strengthens 
                your base in the language from 
                scratch. This course is specially 
                designed for the Java apprentices 
                who want to hone their skills 
                in Java for Coding Interviews 
                and Competitive
                Programming. No matter if you 
                are a school student or college 
                student, if you have the zeal of 
                programming, this is the right 
                time to start. 
            </p>
        </div>
  
        <div class="item">
            <h4>
                11 Weeks Workshop on Data 
                Structures and Algorithms 
            </h4>
               
            <p>
                As these are live sessions, every 
                week you will be interacting with 
                the top industry expert where you
                will learn how they implement DSA 
                in real-life scenarios. Not just 
                this, but you will also be able to 
                understand all the concepts of DSA
                in-depth. In addition, weekly Q/A 
                sessions will be conducted to 
                resolve your queries and discuss 
                questions asked most frequently in 
                interview of product-based companies.
            </p>
        </div>
  
        <div class="item">
            <h4>Data Structure and Algorithm</h4>
            <p>
                Learn Data Structures & Algorithms 
                at your own pace to prepare for top 
                product-based companies like Amazon, 
                Uber, Adobe, etc. It contains 200+ 
                algorithmic coding problems, Lifetime 
                access to the Course, Premium Lecture 
                videos by Mr. Sandeep Jain (CEO & 
                Founder, GeeksforGeeks)
            </p>
        </div>
  
        <div class="item">
            <h4>Fork Java</h4>     
            <p>
                Specially designed free Java course for 
                beginners which strengthens your base in 
                the language from scratch. This course is 
                specially designed for the Java apprentices 
                who want to hone their skills in Java 
                for Coding Interviews and Competitive
                Programming. No matter if you are a 
                school student or college student, 
                if you have the zeal of programming, 
                this is the right time to start. 
            </p>
        </div>
  
        <div class="item">
            <h4>
                11 Weeks Workshop on Data 
                Structures and Algorithms 
            </h4
            <p>
                As these are live sessions, every 
                week you will be interacting with 
                the top industry expert where you 
                will learn how they implement DSA 
                in real-life scenarios. Not just 
                this, but you will also be able to 
                understand all the concepts of DSA
                in-depth. In addition, weekly Q/A 
                sessions will be conducted to resolve 
                your queries and discuss questions 
                asked most frequently in interview 
                of product-based companies.
            </p>
        </div>
  
        <div class="item">
            <h4>Data Structure and Algorithm</h4>     
            <p>
                Learn Data Structures & Algorithms 
                at your own pace to prepare for top 
                product-based companies like Amazon, 
                Uber, Adobe, etc. It contains 200+ 
                algorithmic coding problems, Lifetime 
                access to the Course, Premium Lecture 
                videos by Mr. Sandeep Jain
                (CEO & Founder, GeeksforGeeks)
            </p>
        </div>
  
        <div class="item">
            <h4>Fork Java</h4>     
            <p>
                Specially designed free Java course 
                for beginners which strengthens your 
                base in the language from scratch.
                This course is specially designed for
                the Java apprentices who want to hone 
                their skills in Java for Coding 
                Interviews and Competitive Programming. 
                No matter if you are a school student 
                or college student, if you have the 
                zeal of programming, this is the 
                right time to start. 
            </p>
        </div>
  
        <div class="item">
            <h4>
                11 Weeks Workshop on Data 
                Structures and Algorithms 
            </h4
            <p>
                As these are live sessions,
                every week you will be interacting 
                with the top industry expert where 
                you will learn how they implement DSA 
                in real-life scenarios. Not just this, 
                but you will also be able to understand 
                all the concepts of DSA
                in-depth. In addition, weekly Q/A 
                sessions will be conducted to resolve 
                your queries and discuss questions asked 
                most frequently in interview of 
                product-based companies.
            </p>
        </div>
    </div>
   
    <div id="pagination"></div>
  
    <script>
        $(".wrapper .item").slice(4).hide();
        $('#pagination').pagination({
  
            // Total number of items present
            // in wrapper class
            items: 9,
  
            // Items allowed on a single page
            itemsOnPage: 4, 
            onPageClick: function (noofele) {
                $(".wrapper .item").hide()
                    .slice(4*(noofele-1),
                    4+ 4* (noofele - 1)).show();
            }
        });
    </script>
</body>
   
</html>


Output:

PAGINATION AT BOTTOM



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads