Pagination using JQuery

-

Pagination using JQuery

If you have a large number of pages, then use pagination to each page. This tutorial helps you when you want to produce paging on page.

Use this code for pagination using JQuery :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pagination using JQuery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
.active {
    color: green;
}
#pages {
    clear: both;
    padding: 10px;
    width: 122px;
    margin: auto;
    list-style: none;
}
#pages li {
    float:left;
    margin-right:10px;
}
#pages li a {
    display:block;
    color:#717171;
    text-shadow:0px 1px white;
    padding:8px 16px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:50%;
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    background:#f9f9f9;
    background:-webkit-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-moz-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-o-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-ms-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
}
#pages li a.active {
    color: white;
    text-shadow: 0px 1px #777;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.8);
    background: #333;
    background: -webkit-linear-gradient(top,#ccc 0%,#999 100%);
}
#pages li a:hover {
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    background:#fff;
    background:-webkit-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-moz-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-o-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-ms-linear-gradient(top,#fff 0%,#e8e8e8 100%);
}
#pages li a:active,#pages li a.active:active {
    -webkit-box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
    -moz-box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
    box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
}
#pages li a.active:hover {
   -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
    -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.9);
    background: #333;
    background: -webkit-linear-gradient(top,#ccc 0%,#777 100%);
}
.block{
    height: 200px;
    background: lightgray;
    padding: 20px;
}
</style>
<body>
    <section>
        <!-- Main Container -->
          <div class="container">
             <!-- Content Box -->
             <!-- Row -->
             <div class="row">
                <!-- Heading Area -->
                <div class="col-md-12 col-xs-12 col-sm-12" >
                   <div class="row">
                        <div class="col-xs-12 col-md-12 col-sm-12">
                           <h3 class="text-center">
                               Pagination using JQuery
                           </h3>
                        </div>
                            <div class="col-md-3 col-sm-6 col-xs-12 content">
                                <div class="block">
                                    <h1 class="text-center">1 Div</h1>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12 content">
                                <div class="block">
                                    <h1 class="text-center">2 Div</h1>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12 content">
                                <div class="block">
                                    <h1 class="text-center">3 Div</h1>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12 content">
                                <div class="block">
                                    <h1 class="text-center">4 Div</h1>
                                </div>
                            </div>
                             <div class="col-md-3 col-sm-6 col-xs-12 content">
                                <div class="block">
                                    <h1 class="text-center">5 Div</h1>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12 content">
                                <div class="block">
                                    <h1 class="text-center">6 Div</h1>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12 content">
                                <div class="block">
                                    <h1 class="text-center">7 Div</h1>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6 col-xs-12 content">
                                <div class="block">
                                    <h1 class="text-center">8 Div</h1>
                                </div>
                            </div>
   <div class="col-xs-12 col-md-12 col-sm-12">
                            <ul id="pages">
         
                            </ul>
                        </div>
                      <div class="clearfix"></div>
                   </div>
                </div>
             </div>
             <!-- Row End -->
          </div>
          <!-- Main Container End -->
    </section>
<script>
 pageSize = 4;
 var pageCount =  $(".content").length / pageSize;
     for(var i = 0 ; i<pageCount;i++){
    
       $("#pages").append('<li><a href="#">'+(i+1)+'</a></li> ');
     }
        $("#pages li").first().find("a").addClass("active")
    showPage = function(page) {
    $(".content").hide();
    $(".content").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();
    });        
}
    
showPage(1);

$("#pages li a").click(function() {
    $("#pages li a").removeClass("active");
    $(this).addClass("active");
    showPage(parseInt($(this).text()))
});
</script>  
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Profile Form in Codeigniter with Image upload and Validation

-
Image
In this tutorial , we learn how to create user Profile Form in Codeigniter with Image upload , Validation  and insert user data in MySQL database. We will then retrieve the information from the database and display it on the user profile details  page. Follow following steps: 1.  Database Database: `forms` -- -------------------------------------------------------- CREATE TABLE `profile` (   `id` int(11) NOT NULL,   `name` varchar(255) NOT NULL,   `email` varchar(255) NOT NULL,   `mobnum` varchar(255) NOT NULL,   `gender` varchar(255) NOT NULL,   `educ` varchar(255) NOT NULL,   `hobbies` varchar(500) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- - INSERT INTO `profile` (`id`, `name`, `email`, `mobnum`, `gender`, `educ`, `hobbies`) VALUES (1, 'John', 'john@gmail.com', '1111111111', 'Male', 'MBA/MCA', 'Photography, Mountain climbing'), (2, 'Mary', 'mary@gmail...
Read more

Multi Item Slider in Codeigniter using JQuery

-
Image
Multi Item Slider in Codeigniter using JQuery  Database Queries : CREATE DATABASE IF NOT EXISTS `slider` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci; USE `slider`; CREATE TABLE `slider` (   `s_id` int(11) NOT NULL,   `s_title` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; INSERT INTO `slider` (`s_id`, `s_title`) VALUES (1, 'Rose'), (2, 'Tulips'), (3, 'Lotus'); ALTER TABLE `slider`   ADD PRIMARY KEY (`s_id`); ALTER TABLE `slider`   MODIFY `s_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; COMMIT; Database.php <?php defined('BASEPATH') OR exit('No direct script access allowed'); $active_group = 'default'; $query_builder = TRUE; $db['default'] = array( 'dsn'   => '', 'hostname' => 'localhost', 'username' => 'root', 'password' => '', 'database' => 'slider...
Read more

Category Filter in Codeigniter

-
Image
Filter Products as per Category using Codeigniter 1.   Database  -- -- Table structure for table `category` -- CREATE TABLE `category` (   `c_id` int(11) NOT NULL,   `c_name` varchar(100) NOT NULL,   `c_status` int(1) NOT NULL DEFAULT '1' ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `category` -- INSERT INTO `category` (`c_id`, `c_name`, `c_status`) VALUES (1, 'JACKET', 1), (2, 'SHIRT', 1), (3, 'DRESS MATERIAL', 1); -- -------------------------------------------------------- -- -- Table structure for table `product` -- CREATE TABLE `product` (   `pid` int(11) NOT NULL,   `c_id` int(11) NOT NULL,   `ptitle` varchar(255) NOT NULL,   `status` int(11) NOT NULL DEFAULT '1' ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `product` -- INSERT INTO `product` (`pid`, `c_id`, `pti...
Read more