-

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagination</title>
    <link rel="stylesheet" href="index.css">

    <style>
   
*{
    padding: 0px;
    margin: 0px;
}
body{
    width: 100%;
    height: 100vh;
    background: #943ec0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box{
    background-color: #fff;
    padding: 10px;
    border-radius: 100px;
    box-shadow: 0px 10px 30px -15px #000;
    display: flex;
    align-items: center;
}
.box ul{
    display: flex;
    margin: 0px 10px;
}
.box ul li{
    list-style: none;
    margin: 0px 5px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 100px;
    text-align: center;

}
.box ul li a{
    font-size: 25px;
    text-decoration: none;
    color: #000;
    display: block;
    border-radius: 100px;
    transition: 0.2s;
}
.box ul li .active_page{
    background-color: #a05acb;
    color: #fff;
}
.box ul li a:hover,
.box button a:hover{
    background-color: #a05acb;
    color: #fff;
}

/* ---------- Buttons ---------- */
.box button{
    font-size: 20px;
    font-weight: bold;
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
    border-radius: 100px;
    overflow: hidden;
}
.box button a{
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    color: #000;
    transition: 0.2s;
}
</style>
</head>

<body>

    <div class="box">
        <button type="button" class="prev"><a href="#"><</a></button>

        <ul class="ul">
            <!-- <li><a href="#" class="page_number">1</a></li>
            <li><a href="#" class="page_number">2</a></li>
            <li><a href="#" class="page_number active_page">3</a></li>
            <li><a href="#" class="page_number">4</a></li>
            <li><a href="#" class="page_number">5</a></li> -->
        </ul>

        <button type="button" class="next"><a href="#">></a></button>
    </div>
<script>

    let ul = document.querySelector(".ul");
    let prev = document.querySelector(".prev");
    let next = document.querySelector(".next");
    let current_page = 6;
    let total_page = 100;
    let active_page = "";

    create_pages(current_page);

    function create_pages(current_page) {
        ul.innerHTML = "";

        let before_page = current_page - 2;
        let after_page = current_page + 6;

        if(current_page == 2){
            before_page = current_page - 1;
        }
        if(current_page == 1){
            before_page = current_page;
        }

        if(current_page == total_page - 1){
            after_page = current_page + 1;
        }
        if(current_page == total_page){
            after_page = current_page;
        }

        for (let i = before_page; i <= after_page; i++) {
            if (current_page == i) {
                active_page = "active_page";
            } else {
                active_page = "";

            }
            ul.innerHTML += `<li onclick="create_pages(` + i + `)"><a href="#" class="page_number ` + active_page + `">` + i + `</a></li>`;

        }

        // Next and Previous Button Functionality.

        prev.onclick = function () {
            current_page--;
            create_pages(current_page);
        }
        if(current_page <= 1){
            prev.style.display = "none";
        }else{
            prev.style.display = "block";
        }

        next.onclick = function () {
            current_page++;
            create_pages(current_page);
        }
        if(current_page >= total_page){
            next.style.display = "none";
        }else{
            next.style.display = "block";
        }

    }

</script>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

How to Delete record using PHP Ajax

-
index.php ?   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 <!DOCTYPE html> <html> <head>      <title></title> </head> <body>   <?php        $connection = mysqli_connect( "localhost" , "root" , "" , "db_2018" ) or die (mysqli_error());        $ReadSql = "SELECT * FROM `crud`" ;      $res = mysqli_query( $connection , $ReadSql );   ?>     <table>      <tr>          <th>name</th>          <th>Last Name</th>          <th>email id</th>          <th>gender</th>          <th>age</th>          <th>Action</th>      </tr>        <?php while ( $fetch = mysqli_fetch_array( $res )) {            extract( $fetch );         ?>
Read more

How to seperate character from string in php

-
?   1 2 3 4 5 6 7 8 9 $string = "abcdef" ; $result =[]; $strlen = strlen ( $string ); for ( $i =0; $i < $strlen ; $i ++) {      $result [ $i ]= $string [ $i ];   } print_r( $result );     $string = "abcdef"; $result=[]; $strlen = strlen($string); for($i=0;$i<$strlen;$i++) { $result[$i]=$string[$i]; } print_r($result);
Read more

Uploads Only 10 files in month step by step

-
?   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 <?php        $con = mysqli_connect( "localhost" , "root" , "" , "demo" );   date_default_timezone_set( 'Asia/Kolkata' );        $date = Date ( "Y-m-d" );                  if (isset( $_POST [ 'submit' ]))      {          extract( $_POST );            $name1 = $_FILES [ 'photo' ][ 'name' ];    $type = $_FILES [ 'photo' ][ 'type' ];    $size = $_FILES [ 'photo' ][ 'size' ];    $temp = $_FILES [ 'photo' ][ 'tmp_name' ];    if ( $name1 ){   $upload = "posts/" ;              $imgExt = strtolower ( pathinfo ( $name1 , PATHINFO_EXTENSION));              $valid_ext = array ( 'jpg' , 'png' , 'jpeg' );
Read more