Ajax Pagination in PHP

 <?php


$servername = "localhost";
$username = "root";
$password = "";
$database = "test";

//Create Connection
$conn = new mysqli($servername, $username, $password, $database);

//Check Connection
if ($conn->connect_error) {
    die("Connection Failed : " . $conn->connect_error);
}
Above is mysqli_conn.php File which is included in below Files.






Below is index.php File.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PHP Ajax Pagination</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div id="main">
        <div id="header">
            <h1>PHP & Ajax Pagination</h1>
        </div>

        <div id="table-data">
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            function loadTable(page) {
                $.ajax({
                    url: "ajax-pagination.php",
                    type: "POST",
                    data: {
                        page_no: page
                    },
                    success: function(data) {
                        $("#table-data").html(data);
                    }
                });
            }
            loadTable();

            //Pagination Code
            $(document).on("click", "#pagination a", function(e) {
                e.preventDefault();
                var page_id = $(this).attr("id");
                loadTable(page_id);
            });
        });
    </script>
</body>

</html>






Below is ajax-pagination.php File.
<?php

include("mysqli_conn.php");

$limit_per_page = 5;
$page = "";

if (isset($_POST["page_no"])) {
    $page = $_POST["page_no"];
} else {
    $page = 1;
}

$offset = ($page - 1) * $limit_per_page;

$sql = "SELECT * FROM students LIMIT {$offset},{$limit_per_page}";
$result = $conn->query($sql);
$output = "";

if ($result->num_rows > 0) {
    $output .= "<table border='1' width='50%' cellspacing='0' cellpadding='10px'>
                    <tr>
                        <th width='50px'>Id</th>
                        <th>Name</th>
                        <th>Age</th>
                        <th>City</th>
                    </tr>";
    while ($row = $result->fetch_assoc()) {
        $output .= "<tr><td align='center'>{$row['id']}</td><td>{$row['student_name']}</td><td>{$row['age']}</td><td>{$row['city']}</td></tr>";
    }

    $output .= "</table>";

    $sql_total = "SELECT * FROM students";
    $records = $conn->query($sql_total);
    $total_record = mysqli_num_rows($records);
    $total_pages = ceil($total_record / $limit_per_page);

    $output .= "<div id='pagination'>";

    for ($i = 1; $i <= $total_pages; $i++) {

        if ($i == $page) {
            $class_name = "active";
        } else {
            $class_name = "";
        }

        $output .= "<a class='{$class_name}' id='{$i}' href=''>{$i}</a>";
    }
    $output .= "</div>";

    $conn->close();
    echo $output;
} else {
    echo "<h2>No Record Found.</h2>";
}






Below is css/style.css File.
body {
  font-family: arial;
  background: #909090;
  padding: 0;
  margin: 0;
}

h1 {
  text-align: center;
  margin: 0;
}

h1::selection {
  background: #fff;
  color: #2980b9;
}

#main {
  width: 700px;
  margin: 0 auto;
  background: #ffffff;
  font-size: 15px;
}

#header {
  background: #003580;
  color: #ffffff;
  height: 50px;
  padding: 15px;
}

#table-data {
  padding: 15px;
  min-height: 500px;
}

#table-data th {
  background: #27ae60;
  color: #fff;
}

#table-data tr:nth-child(odd) {
  background: #ecf0f1;
}

#pagination {
  text-align: center;
  padding: 10px;
}

#pagination a {
  background: #2980b9;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 3px;
}

#pagination a.active {
  background: #27ae60;
}







Comments

Post a Comment

Popular posts from this blog

Logical_Operators

  <?php     $age = 20 ;     $age1 = 25 ;     if ( $age >= 18 && $age <= 21 )     {         echo "You are Eligible<br>" ;     }         if ( $age >= 18 || $age <= 21 )     {         echo "You are Eligible<br>" ;     }     //Below condition is True So that "Not Operator(!)" will return False condition     if (!( $age >= 18 ))     {         echo "You are Eligible<br>" ;     }     //Below condition is False So that "Not Operator(!)" will return True condition     if (!( $age <= 18 ))     {         echo "You are Eligible<br>" ;     }     //If both condition is "True" OR "False" at that time xor will return "False" and if one condition is     //"True" and s...
Read more

Get Functions

  <?php //There are many Get Functions in PHP as shown below: //get_class, get_parent_class, get_class_methods, get_class_vars, get_object_vars, get_called_class, //get_declared_classes, get_declared_interfaces, get_declared_traits, class_alias class ParentClass {     function name ()     {         echo "Class Name : " . get_class ( $this ) . "<br>" ;   //Print the particualr Class Name         //Print the particular Parent Class Name as shown below:         echo "Parent Class Name : " . get_parent_class ( $this ) . "<br>" ;     } } class ChildClass extends ParentClass {     function __construct ()     {}     function myfunction ()     {}     function myfunction2 ()     {} } $obj = new ChildClass (); $obj -> name (); echo "Class Name is : " . get_class ( $obj ) . "<br>" ; echo "Paren...
Read more

print_Statement

  <?php     echo "Hello, Welcome Everyone" ;     echo "<b>Hello" , "World</b>" ;     echo "<h1>Hello" . " brother</h1>" ;     echo "<h1><i>Let's" . " come</i></h1>" ;     echo 2364789 ;     echo 43.98 ; //  OUTPUT: // Hello, Welcome EveryoneHelloWorld // Hello brother // Let's come // 236478943.98 Hello World ? > < html >     < head >         < title > PHP </ title >     < head >     < body >         <?php             echo "Hello World" ;         ? >     </ body > </ html >
Read more