Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN 740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM Tel: (84.8) 862 7509 – (84.8) 2649179 Email: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn Lớp: Chuyên Viên Website Lành Nghề Trang 1 Biên soạn: Nguyễn Phát Tài LAB – TẠO PHÂN TRANG BẰNG AJAX Bước 1 : Mở trang newsdetail.php + Chuyển qua chế độ Code chèn đoạn Code sau đây vào VIỆT CHUYÊN Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN 740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM Tel: (84.8) 862 7509 – (84.8) 2649179 Email: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn Lớp: Chuyên Viên Website Lành Nghề Trang 2 Biên soạn: Nguyễn Phát Tài + Trước thẻ </head> chèn đoạn Script sau đây: <script type="text/javascript" src="js/ajax_24h_com_vn.js"></script> </head> Bước 2: Sửa lại đoạn Code phân trang có áp dụng AJAX trong phân trang + Mở trang tintuckhac.php lên chọn đoạn phân trang, chuyển qua chế độ Code + Bạn thấy chương trình đang đánh dấu đoạn Code phân trang như sau: VIỆT CHUYÊN Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN 740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM Tel: (84.8) 862 7509 – (84.8) 2649179 Email: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn Lớp: Chuyên Viên Website Lành Nghề Trang 3 Biên soạn: Nguyễn Phát Tài + Hãy thay thế đoạn Code này bằng đoạn Code sau: <?php // bat dau phan phan trang $TFM_Previous = $pageNum_rs_tintuckhac - 5; if ($TFM_Previous >= 0) { /*printf(' <a href="'."%s?pageNum_rs_tintuckhac=%d%s", $currentPage, $TFM_Previous, $queryString_rs_tintuckhac.'">'); echo "[Previous "."5"." pages] </a> ";*/ printf(' <a href="javascript:AjaxAction(\'tintuckhac\','."'%s?pageNum_rs_tintuckhac=%d%s", $currentPage, $TFM_Previous, $queryString_rs_tintuckhac.'\');">'); echo "[ Xem lùi "."5"." trang ] </a> "; //Basic-UltraDev Previous X pages SB } ?> <?php for ($i = $TFM_startLink; $i <= $TFM_endLink; $i++) { $TFM_LimitPageEndCount = $i -1; if($TFM_LimitPageEndCount != $pageNum_rs_tintuckhac) { /*printf('<a href="'."%s?pageNum_rs_tintuckhac=%d%s", $currentPage, $TFM_LimitPageEndCount, $queryString_rs_tintuckhac.'">');*/ printf('<a href="javascript:AjaxAction(\'tintuckhac\','."'%s?pageNum_rs_tintuckhac=%d%s", $currentPage, $TFM_LimitPageEndCount, $queryString_rs_tintuckhac.'\')">'); echo "$i</a>"; }else{ echo "<strong>$i</strong>"; } if($i != $TFM_endLink) echo(" | ");} ?> <?php $TFM_Next = $pageNum_rs_tintuckhac + 5; $TFM_Last = $totalPages_rs_tintuckhac+1; if ($TFM_Next - 1 < $totalPages_rs_tintuckhac) { /*printf(' <a href="'."%s?pageNum_rs_tintuckhac=%d%s", $currentPage, $TFM_Next, $queryString_rs_tintuckhac.'">'); echo "[Next "."5"." of ".$TFM_Last." pages] </a> ";*/ printf(' <a href="javascript:AjaxAction(\'tintuckhac\','."'%s?pageNum_rs_tintuckhac=%d%s", $currentPage, $TFM_Next, $queryString_rs_tintuckhac.'\');">'); echo "[ xem tiếp "." 5"." của ".$TFM_Last." trang ] </a> "; } ?> Bạn hãy chú ý đoạn Code màu xanh là đoạn Code phân trang cũ đã bị bỏ và được thay thế bằng đoạn Code màu đỏ có áp dụng hàm AjaxAction vào. Chú ý tên của đoạn Code có nền vàng phải giống với tên trong id của thẻ DIV ở bước 1. VIỆT CHUYÊN Trung Tâm Đào Tạo Công Nghệ Mạng VIỆT CHUYÊN 740/12 Sư Vạn Hạnh (nối dài), P12, Q10, TP.HCM Tel: (84.8) 862 7509 – (84.8) 2649179 Email: traning@vietchuyen.org Website: www.vietchuyen.org – www.ddcntt.vn Lớp: Chuyên Viên Website Lành Nghề Trang 4 Biên soạn: Nguyễn Phát Tài + File -> Save + Mở trang index.php lên Preview. Click thử vào xem một tin, sau đóng trong phần Tin tức khác thử click vào các số trong phần phân trang để kiểm tra thử. + Kết quả bây giờ là khi ta click vào để xem các tin tức khác tiếp theo, thì trang web phải không phải bị load lại lần nữa do đó sẽ tăng được tốc độ duyệt trang web. VIỆT CHUYÊN . Code phân trang có áp dụng AJAX trong phân trang + Mở trang tintuckhac.php lên chọn đoạn phân trang, chuyển qua chế độ Code + Bạn thấy chương trình đang đánh dấu đoạn Code phân trang. www.ddcntt.vn Lớp: Chuyên Viên Website Lành Nghề Trang 1 Biên soạn: Nguyễn Phát Tài LAB – TẠO PHÂN TRANG BẰNG AJAX Bước 1 : Mở trang newsdetail.php + Chuyển qua chế độ Code chèn. ".$TFM_Last." trang ] </a> "; } ?> Bạn hãy chú ý đoạn Code màu xanh là đoạn Code phân trang cũ đã bị bỏ và được thay thế bằng đoạn Code màu đỏ có áp dụng hàm AjaxAction vào.