Share

     
IT Phú nai lưng 07 Tháng nhị 2017hướng dẫn phân trang bởi ajaxphân trang bởi ajaxphân trang bằng ajax jqueryứng dụng ajax vào php

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

Bạn đang xem: Share


Xem Demo :

*


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

Trước khi ban đầu Ajax Phân trang bằng Ajax vào PHP cùng MySQL, hãy quan sát vào kết cấu file.

Pagination.phpdbConfig.phpgetData.phpindex.phpjquery.min.jsstyle.css

Cơ sở tài liệu Creation

Tôi bao gồm một posts đó là một bảng cơ sở dữ liệu và tôi sẽ tiến hành phân trang với những tin bao gồm trong bảng này. Những tin trong bảng posts của MySQL đang giống như tiếp sau đâ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 mặc định "1" bình luận "1=Active, 0=Inactive", PRIMARY KEY (`id`)) ENGINE=InnoD

Pagination Class

Tôi đã tạo nên một lớp Pagination để tạo ra các liên kết phân trang. Chúng ta cũng có thể vượt qua những tùy chọn cấu hình liên kết vào lớp Pagination. Các tùy chọn cấu hình thường được thực hiện dưới đây.

baseurl – baseurl giữ URL để gửi yêu mong Ajax và shop chúng tôi sẽ cảm nhận 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 – bao gồm bao nhiêu tin mà bạn có nhu cầu hiển thị trên mỗi trang.

Xem thêm: Top 20 Bài Thu Hoạch Bồi Dưỡng Thường Xuyên Thpt Module 14 Hay Nhất 2022

contentDiv – hỗ trợ cho những 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 :

"getData.php", "totalRows"=>$rowCount, "perPage"=>$limit, "contentDiv"=>"posts_content");// Initialize pagination class$pagination = new Pagination($pagConfig);?>createLinks(); ?>

File dbConfig.php

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

connect_error)  die("Connection failed: " . $db->connect_error);?>

File index.php

File này có chứa một số JavaScript, PHP, cùng mã HTML. Code không hề thiếu của file index.php  được đề cập hiếm hoi dưới đây.

JavaScript:Bao gồm các thư viện jQuery để triển khai việc cùng với jQuery cùng Ajax. Ngoài ra, một số jQuery sẽ yêu cầu cho công tác để thiết lập khi thực hiện ajax.

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


File getData.php

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

Xem thêm: Mã Vùng Tỉnh Bình Phước - Chuyển Đổi Mã Vùng Điện Thoại Cố Định

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){ ?>
createLinks(); ?>

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-wrapperposition: relative;.loading-overlaydisplay: 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

Để khiến cho cái quan sát pagination giỏi hơn, chúng tôi đã viết một trong những CSS và chúng ta cũng có thể tìm thấy toàn bộ các CSS trong file style.css.