MaxInterview - use ajax pagination

showing results for - "use ajax pagination"
19 Jan 2020
1<?php
2include('database.php'); 
3$limit = 4;
4$sql = "SELECT COUNT(id) FROM user_data";  
5$rs_result = mysqli_query($conn, $sql);  
6$row = mysqli_fetch_row($rs_result);  
7$total_records = $row[0];  
8$total_pages = ceil($total_records / $limit); 
9?>
10<!DOCTYPE html>
11<html lang="en">
12<head>
13<meta charset="utf-8">
14<meta http-equiv="X-UA-Compatible" content="IE=edge">
15<meta name="viewport" content="width=device-width, initial-scale=1">
16<title>PHP Pagination AJAX</title>
17<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
18<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
19<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
20<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
21<link rel="stylesheet" href="css/style.css">
22<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
23<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
24<head>
25<body>
26    <div class="container">
27        <div class="table-wrapper">
28            <div class="table-title">
29                <div class="row">
30                    <div class="col-sm-6">
31						<h2>Manage <b>Employees</b>Add New Employee</span></a>
32						<a href="#deleteEmployeeModal" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>Delete</span></a>						
33					</div>
34                </div>
35            </div>
36			<div id="target-content">loading...</div>
37            
38			<div class="clearfix">
39               
40					<ul class="pagination">
41                    <?php 
42					if(!empty($total_pages)){
43						for($i=1; $i<=$total_pages; $i++){
44								if($i == 1){
45									?>
46								<li class="pageitem active" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" data-id="<?php echo $i;?>" class="page-link" ><?php echo $i;?></a></li>
47															
48								<?php 
49								}
50								else{
51									?>
52								<li class="pageitem" id="<?php echo $i;?>"><a href="JavaScript:Void(0);" class="page-link" data-id="<?php echo $i;?>"><?php echo $i;?></a></li>
53								<?php
54								}
55						}
56					}
57								?>
58					</ul>
59               </ul>
60            </div>
61        </div>
62    </div>
63	<script>
64	$(document).ready(function() {
65		$("#target-content").load("pagination.php?page=1");
66		$(".page-link").click(function(){
67			var id = $(this).attr("data-id");
68			var select_id = $(this).parent().attr("id");
69			$.ajax({
70				url: "pagination.php",
71				type: "GET",
72				data: {
73					page : id
74				},
75				cache: false,
76				success: function(dataResult){
77					$("#target-content").html(dataResult);
78					$(".pageitem").removeClass("active");
79					$("#"+select_id).addClass("active");
80					
81				}
82			});
83		});
84    });
85</script>
86</body>
87</html>
88
source