Để phân trang với Ajax Jquery và PHP trong CSDL MySQM bạn cần tạo ra 1 CSDL có dữ liệu ban đầu, để xây dưng chương trình cần các bước sau:
Bước 1: Tạo CSDL “dbtest” và bảng “program”
Các bạn tạo một CSDL “dbtest” trong phpMyAdmin và bảng “program” như sau:
Bước 2: Insert nội dung vào bảng
Insert nội dung vào bảng để tý nữa test. Chúng ta insert nội dung các ngôn ngữ như sau:
Bước 3: Tạo file “config.php“
Tạo file config.php để kết nối đến CSDL của bạn.
<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'dbtest';
$item_per_page = 5; //mỗi item trên 1 trang
//kết nối CSDL
$mysqli = new mysqli($db_host, $db_user, $db_pass, $db_name);
?>
Bước 4: Tạo file “index.php” để đổ dữ liệu load Ajax vào đây
Javascript
Mình sẽ sử dụng phương pháp của jQuery load() để thực hiện việc gọi Ajax vào file PHP.
js1
HTML
Ở đây mình sẽ tạo ra để load dữ liệu ajax từ php vào thẻ div của HTML
<div class="loading-div"><img src="ajax-loader.gif" ></div>
<div id="results"><! - Nội dung sẽ được trả ở đây -></div>
CSS
CSS cho phân trang và dữ liệu của mình
<style>
body,td,th {
font-family: Georgia, "Times New Roman", Times, serif;
color: #333;
}
.contents{
margin: 20px;
padding: 20px;
list-style: none;
background: #F9F9F9;
border: 1px solid #ddd;
border-radius: 5px;
}
.contents li{
margin-bottom: 10px;
}
.loading-div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.56);
z-index: 999;
display:none;
}
.loading-div img {
margin-top: 20%;
margin-left: 50%;
}
/* Pagination style */
.pagination{margin:0;padding:0;}
.pagination li{
display: inline;
padding: 6px 10px 6px 10px;
border: 1px solid #ddd;
margin-right: -1px;
font: 15px/20px Arial, Helvetica, sans-serif;
background: #FFFFFF;
box-shadow: inset 1px 1px 5px #F4F4F4;
}
.pagination li a{
text-decoration:none;
color: rgb(89, 141, 235);
}
.pagination li.first {
border-radius: 5px 0px 0px 5px;
}
.pagination li.last {
border-radius: 0px 5px 5px 0px;
}
.pagination li:hover{
background: #CFF;
}
.pagination li.active{
background: #F0F0F0;
color: #333;
}
</style>
Bước 5: Tạo file “fetch_pages.php”
Trong file này mình chia làm 2 phần là 1 phần xử lý và 1 hàm phân trang với PHP
Hàm phân trang
Bước 6: Kết quả khi chạy chương trình:
Trên đây là hướng dẫn xây dựng ứng dụng php phân trang với Ajax jquery và PHP của mình. Code mình sẽ upload sau gửi các bạn.
như conc
Trả lờiXóa