Hướng dẫn Sử dụng Jquery AJAX + PHP & MYSQL để phân trang
Discussion in 'JavaScript/jQuery' started by PVS, Apr 10, 2017.
Khi mình sử dụng Jquery AJAX để load dữ liệu thì mình phải kiểm tra xem nếu có trang nào thì mới thực hiện load dữ liệu và ngược lại sẽ không load gì cả.
Nếu có thì mình sẽ lưu giá trị nó vào một biến $page và biến $page của mình khi được load lần đầu tiên thì nó luôn luôn là trang 1 và nó cũng chính là trang hiện tại.
Các bạn thấy biến $page -= 1 nó có nghĩa là khi truy cập lần đầu tiên thì biến $page của mình là trang 1 thì -=1 là chính nó trừ đi 1 thì lúc này $page của mình sẽ là 0. Sau đó mình có biến $display =10 thì lúc này $page của mình = 0 và $display = 10 thì mình sẽ có $start = 0 vì 0 x 10 thì = 0 chứ nhỉ ^^ .
Trong cuộc gọi AJAX thì dữ liệu của mình trả về là một chuỗi hay một mảng giá trị lưu giữ toàn bộ giá trị đó thì lúc này mình sẽ khởi tạo một biến $data = ” “, có nghĩa là chuỗi này ban đầu sẽ chưa có gì cả. Sau đó mình mới truy vấn CSDL và lấy dữ liệu của nó ra và lưu vào biến này.
Trong đó biến $data .= này có nghĩa là khi vòng lặp while của mình nó lấy dữ liệu từ dòng thứ 1 cho đến dòng cuối cùng thì nó sẽ nối tiếp lại với nhau. Trong PHP muốn nối một chuỗi thì mình dùng dấu “ . “ nhưng ở đây mình muốn nối tiếp nhiều chuỗi vào cùng trong một biến thì mình dùng thêm “ = “ vậy là mình đã nối chúng lại với nhau thành một chuỗi lớn.
Và cuối cùng mình cũng thực hiện các bước phân trang như ở phần 1 và mình sẽ không xuất nó ra mà lưu nó tiếp vào biến $data vì để khi mình echo $data ra thì dữ liệu của mình sẽ trả về toàn bộ.
Nhưng một đặc điểm đáng lưu lý ở đây là các bạn sẽ thấy mình sẽ không còn dùng thẻ a với link là index.php?start=??&page=?? nữa vì bây giờ mình chỉ cần lấy số trang và dùng AJAX để load trang đó nên mình chỉ cần thẻ li là đủ, trong này mình sẽ truyền tham số cho thẻ li qua một chổ tạm là page và khi mình load trang thì chỉ cần sử dụng hàm attr trong Jquery để lấy tham số này và truyền vào để AJAX xử lý thôi.
Bước cuối cùng cũng là bước quan trọng nhất khi dữ liệu mình đã có thì mình dùng AJAX để gọi nó ra.
Code:
function pagination(page){ $('#loading').html("").fadeIn('fast'); $.ajax ({ type: "POST", url: "pagination.php", data: "page="+page, success: function(data_page) { $('#loading').fadeOut('fast'); $("#data").html(data_page); } }); }
Code:
Code:
pagination(1); $("nav[role='page'] > ul li").live('click',function(){ var page = $(this).attr('page'); pagination(page); });
Một điểm nữa là khi mình sử dụng sự kiện live() thì sự kiện này sẽ được sử dụng trong suốt quá trình chạy website và khi mình dùng AJAX kết quả trả về là success thì dữ liệu sẽ được append vào document. Những element (thẻ li) sau sẽ không nhận được các sự kiện click hay submit nữa, khi đó mình phải sử dụng sự kiện live() để di chuyển sang trang khác.
Chúc các bạn thành công.
Nguồn: izwebz.com
Bài viết mới
Hỏi về cách đóng hẳn chương trình khi click button mới
bởi vobatung, Sep 6, 2019 at 10:51 PM
Rss link bài viết lên website giống vbb
bởi Kha, Jun 27, 2019 at 6:57 PM