LẬP TRÌNH PHP

Phân trang bằng Ajax trong PHP và MySQL

Posted on by IT Phú Trần

Phân trang bằng Ajax trong PHP và MySQL – Trong các dự án web, pagination là một phần rất quan trọng, nơi số lượng lớn các tin hay dòng được liệt kê từ  cơ sở dữ liệu. Trong trường hợp đó, Ajax pagination là một cách thích hợp hơn bởi vì nó sẽ giúp cải thiện giao diện người dùng trang web của bạn. Hướng dẫn này sẽ cho thấy làm thế nào bạn có thể thực hiện các pagination Ajax trong PHP sử dụng jQuery và MySQL.Đây là một Ứng dụng này phát triển  để tạo phân trang với jQuery , Ajax , PHP , và MySQL.

 

Sử dụng PHP, tôi sẽ hiển thị các bài viết từ các cơ sở dữ liệu MySQL với các liên kết phân trang. Thông qua các liên kết phân trang, bạn có thể nhận được các tin từ cơ sở dữ liệu, ngoại trừ các tin không được hiển thị. jQuery và Ajax sẽ giúp đỡ để có được các bản ghi từ cơ sở dữ liệu tùy thuộc vào liên kết pagination mà không tải lại trang.

Trước khi bắt đầu Ajax Phân trang bằng Ajax trong PHP và MySQL, hãy nhìn vào cấu trúc file.

Pagination.php
dbConfig.php
getData.php
index.php
jquery.min.js
style.css

Cơ sở dữ liệu Creation

Tôi có một posts đây là một bảng cơ sở dữ liệu và tôi sẽ thực hiện phân trang với các tin có trong bảng này. Các tin trong bảng posts của MySQL  sẽ giống như dưới đây :

CREATE TABLE `posts` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `content` text COLLATE utf8_unicode_ci NOT NULL,
 `created` datetime NOT NULL,
 `modified` datetime NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoD

Pagination Class

Tôi đã tạo ra một lớp Pagination để tạo ra các liên kết phân trang. Bạn có thể vượt qua các tùy chọn cấu hình liên kết trong lớp  Pagination. Các tùy chọn cấu hình thường được sử dụng dưới đây.

  • baseurl – baseurl giữ URL để gửi yêu cầu Ajax và chúng tôi sẽ nhận được các bài viết  của liên kết pagination tương ứng bằng URL này.
  • totalRows – Tổng số lượng tin.
  • perPage – Có bao nhiêu tin mà bạn muốn hiển thị trên mỗi trang.
  • contentDiv – Cung cấp cho các ID của phần tử mà các dữ liệu phân trang sẽ được hiển thị.

Sử dụng lớp Pagination dưới đây :

<?php
// Pagination links configuration
$pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount, 'perPage'=>$limit, 'contentDiv'=>'posts_content');
// Initialize pagination class
$pagination =  new Pagination($pagConfig);
?>

<!-- Display pagination links -->
<?php echo $pagination->createLinks(); ?>

 

File dbConfig.php

File này giúp kết nối  cơ sở dữ liệu.

<?php
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName = "itphutran";

// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($db->connect_error) {
    die("Connection failed: " . $db->connect_error);
}
?>

File index.php

File này có chứa một số JavaScript, PHP, và mã HTML. Code đầy đủ của file index.php  được đề cập riêng biệt dưới đây.

JavaScript:
Bao gồm các thư viện jQuery để làm việc với jQuery và Ajax. Ngoài ra, một số jQuery sẽ yêu cầu cho chương trình để tải khi sử dụng ajax.

<script src="jquery.min.js"></script>
<script type="text/javascript">
// Show loading overlay when ajax request starts
$( document ).ajaxStart(function() {
    $('.loading-overlay').show();
});
// Hide loading overlay when ajax request completes
$( document ).ajaxStop(function() {
    $('.loading-overlay').hide();
});
</script>

PHP & HTML:
Lúc đầu, tôi sẽ hiển thị số lượng hạn chế của dữ liệu bài viết với các liên kết phân trang. Để hiển thị các liên kết phân trang, bạn nên cần phải tạo ra một đối tượng từ lớp Pagination. Ngoài ra, bạn có thể cấu hình các liên kết phân trang trong lớp Pagination. Gọi createLinks() chức năng của phân trang của Pagination để hiển thị các liên kết phân trang.

<div class="post-wrapper">
    <div class="loading-overlay"><div class="overlay-content">Loading.....</div></div>
    <div id="posts_content">
    <?php
    //Include Pagination class file
    include('Pagination.php');
    
    //Include database configuration file
    include('dbConfig.php');
    
    $limit = 10;
    
    //Get the total number of rows
    $queryNum = $db->query("SELECT COUNT(*) as postNum FROM posts");
    $resultNum = $queryNum->fetch_assoc();
    $rowCount = $resultNum['postNum'];
    
    //Initialize Pagination class and create object
    $pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount, 'perPage'=>$limit, 'contentDiv'=>'posts_content');
    $pagination =  new Pagination($pagConfig);
    
    //Get rows

    $query = $db->query("SELECT * FROM posts RDER BY id DESC LIMIT $limit");
    
    if($rowCount > 0){ ?>
        <div class="posts_list">
        <?php
            while($row = $query->fetch_assoc()){ 
                $postID = $row['id'];
        ?>
            <div class="list_item"><a href="javascript:void(0);"><h2><?php echo $row["title"]; ?></h2></a></div>
        <?php } ?>

        </div>
        <?php echo $pagination->createLinks(); ?>
    <?php } ?>
    </div>
</div>

File getData.php

Trang này được yêu cầu của Ajax. Tôi sẽ nhận được số trang của các liên kết phân trang và đưa ra các bài (tin) gửi dữ liệu tương ứng.

<?php
if(isset($_POST['page'])){
    //Include Pagination class file
    include('Pagination.php');
    
    //Include database configuration file
    include('dbConfig.php');
    
    $start = !empty($_POST['page'])?$_POST['page']:0;
    $limit = 10;
    
    //get number of rows
    $queryNum = $db->query("SELECT COUNT(*) as postNum FROM posts");
    $resultNum = $queryNum->fetch_assoc();
    $rowCount = $resultNum['postNum'];
    
    //initialize Pagination class
    $pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount, 'currentPage'=>$start, 'perPage'=>$limit, 'contentDiv'=>'posts_content');
    $pagination =  new Pagination($pagConfig);
    
    //get rows
    $query = $db->query("SELECT * FROM posts ORDER BY id DESC LIMIT $start,$limit");
    
    if($rowCount > 0){ ?>
        <div class="posts_list">
        <?php
            while($row = $query->fetch_assoc()){ 
                $postID = $row['id'];
        ?>
            <div class="list_item"><a href="javascript:void(0);"><h2><?php echo $row["title"]; ?></h2></a></div>
        <?php } ?>

        </div>
        <?php echo $pagination->createLinks(); ?>
<?php }
}
?>

File style.css

.posts_list{ 
margin-bottom:20px;
}
div.list_item {
border-left: 4px solid #7ad03a;
padding: 1px 12px;
background-color:#F1F1F1;
-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
}
div.list_item {
margin: 5px 15px 2px;
}
div.list_item p {
margin: .5em 0;
padding: 2px;
font-size: 13px;
line-height: 1.5;
}
.list_item a {
text-decoration: none;
padding-bottom: 2px;
color: #0074a2;
-webkit-transition-property: border,background,color;
transition-property: border,background,color;-webkit-transition-duration: .05s;
transition-duration: .05s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.list_item a:hover{ 
text-decoration:underline;
}

.post-wrapper{position: relative;}
.loading-overlay{display: none;position: absolute;left: 0; top: 0; right: 0; bottom: 0;z-index: 2;background: rgba(255,255,255,0.7);}
.overlay-content {
    position: absolute;
    transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    color: #555;
}

div.pagination {
	font-family: "Lucida Sans Unicode", "Lucida Grande", LucidaGrande, "Lucida Sans", Geneva, Verdana, sans-serif;
	padding:20px;
	margin:7px;
}

div.pagination a {
	margin: 2px;
	padding: 0.5em 0.64em 0.43em 0.64em;
	background-color: #ee4e4e;
	text-decoration: none; /* no underline */
	color: #fff;
}
div.pagination a:hover, div.pagination a:active {
	padding: 0.5em 0.64em 0.43em 0.64em;
	margin: 2px;
	background-color: #de1818;
	color: #fff;
}
div.pagination span.current {
    padding: 0.5em 0.64em 0.43em 0.64em;
    margin: 2px;
    background-color: #f6efcc;
    color: #6d643c;
}
div.pagination span.disabled {
    display:none;
}

Kết luận

Để làm cho cái nhìn pagination tốt hơn, chúng tôi đã viết một số CSS và bạn có thể tìm thấy tất cả các CSS trong file style.css.

Chúc các bạn thực hiện thành công!

IT Phú Trần

Xin chào! Tôi là Phú Trần.Kiến thức nền tảng và tư duy tốt về hướng đối tượng. Không ràng buộc ở ngôn ngữ mà căn bản ở giải thuật và tư duy con người. Lập trình JAVA/PHP.

x