โค้ดต่อไปนี้เป็นแนวทางการประยุกต์การใช้งาน jquery ในการดึงข้อมูลมาแสดง บางส่วนในเว็บไซต์
แบบกำหนดให้ดึงข้อมูลมาเป็นส่วนๆ เช่น เรามีข่าว และต้องการ ให้วนลูปแสดงข่าวนั้น ครั้งละ 4-5 หัวข้อ
โดยดึงจากฐานข้อมูล วนไปเรื่อยๆ จนครบ แบบนี้เป็นต้น
ก่อนอื่น ให้กำหนดส่วนของตำแหน่งข้อมูลที่เราต้องการแสดง ด้วย id เช่นตัวอย่่าง
<div id="place-data"> </div>
เรากำหนด div มี id เท่ากับ place-data ส่วนนี้ ก็คือส่วนที่เราจะอ้างอิง และดึงข้อมูลมาแสดง
โค้ดไฟล์ ทดสอบ ajax_autoload.php คำอธิบายแสดงในโค้ด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<br><br>
<div style="width:80%;margin:auto;">
<div class="container-fluid">
<div id="place-data">
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var per_page=7; // จำนวนรายการที่ต้องการแสดงต่อหน้า
var start_page=0; // ค่าเริ่มต้นของหน้าแรก
var step_page=0; // ค่าสำหรับคำนวนการกำหนดหน้าแรก
var loadData; // กำหนดสำหรับเป็นชื่อตัวแปร ฟังก์ชั่น
var interValID=null; // เก็บค่าการวนทำงานของเวลา
function loadData(){
start_page=parseInt(step_page)*per_page;
step_page++;
$.get("load_data.php",{
per_page:per_page,
start_page:start_page
},function(data){
var numData = $(data).find(".data-return").length; // มีรายการหรือไม่ นับจำนวน
if(numData>0){ // ถ้ามีมากกว่า 0
$("#place-data").html(data); // นำข้อมูลมาแสดงใน div
if(numData<per_page){ // ถ้ารายการที่แสดงถึงหน้าสุดท้าย
// หากต้องการให้วนลูปไปเริ่มต้นนับใหม่ ให้ตั้งค่า step_page=0;
step_page=0; // วนมาเริ่มต้นใหม่ หรือใส่คำสั่งอื่นๆ ตามต้องการ
// หากต้องการหลุดการทำงานเมื่อถึงหน้าสุดท้าย เปิด ใช้งาน คำสั่งด้านล่าง
// clearInterval(interValID);
}
}else{
step_page=0; // วนมาเริ่มต้นใหม่ หรือใส่คำสั่งอื่นๆ ตามต้องการ
clearInterval(interValID);
loadData(); // ทำงานครั้งแรกทันทีอีกครั้ง
interValID = setInterval(loadData,5000); // ทำงานลูปอีกครั้ง และต่อไปทุก 5 วินาที
}
});
};
loadData(); // ทำงานครั้งแรกทันที 1 ครั้ง
interValID = setInterval(loadData,5000); // ทำงานอีกครั้ง และต่อไปทุก 5 วินาที
});
</script>
</body>
</html>
ต่อไป สร้างไฟล์ load_data.php สำหรับดึงข้อมูลจากฐานข้อมูล
ให้จัดรูปแบบโค้ดตามต้องการ
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// เชื่อมต่อกับฐานข้อมูล
$link=mysql_connect("localhost","root","test"); // เชื่อมต่อ Server
mysql_select_db("test"); // ติดต่อฐานข้อมูล
mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล
?>
<table class="table table-striped table-condensed">
<?php
$q="
SELECT * FROM province_th
LIMIT ".$_GET['start_page'].",".$_GET['per_page']."
";
$qr=mysql_query($q);
while($rs=mysql_fetch_assoc($qr)){
?>
<tr class="data-return">
<td><?=$rs['province_name']?></td>
</tr>
<?php } ?>
สังเกตในโค้ต ในลูปการวนแสดงข้อมูล เราต้องใส่ class ให้กับ tr ในที่นี้ใช้ชื่อว่า data-return
หากรูปแบบการแสดงของเราไม่ได้เป็นแบบตาราง เช่น ใช้ div ก็ให้ใส่ class เข้าไปใน div แทน tr
css class นี้เราจะเอาไว้ใช้ในการนับจำนวนข้อมูล เช่น ถ้าถึงหน้าสุดท้าย แสดงว่า
จำนวนก็จะน้อยกว่าหรือเท่ากับ เพื่อเป็นเงื่อนไขในการวนลูป หรือหยุดการทำงาน
จากโค้ดด้านบนของไฟล์ ajax_autoload.php จะเป็นคำสั่งในการทำงานแบบวนลูป
หากต้องการให้หยุดทำงาน เมื่อถึงหน้าสุดท้ายแล้ว สามารถปรับบางส่วนของโค้ดได้ดังนี้
var numData = $(data).find(".data-return").length; // มีรายการหรือไม่ นับจำนวน
if(numData>0){ // ถ้ามีมากกว่า 0
$("#place-data").html(data); // นำข้อมูลมาแสดงใน div
if(numData<per_page){ // ถ้ารายการที่แสดงถึงหน้าสุดท้าย
// หากต้องการให้วนลูปไปเริ่มต้นนับใหม่ ให้ตั้งค่า step_page=0;
// step_page=0; // วนมาเริ่มต้นใหม่ หรือใส่คำสั่งอื่นๆ ตามต้องการ
// หากต้องการหลุดการทำงานเมื่อถึงหน้าสุดท้าย เปิด ใช้งาน คำสั่งด้านล่าง
clearInterval(interValID);
}
}else{
step_page=0; // วนมาเริ่มต้นใหม่ หรือใส่คำสั่งอื่นๆ ตามต้องการ
clearInterval(interValID);
// loadData(); // ทำงานครั้งแรกทันทีอีกครั้ง
// interValID = setInterval(loadData,5000); // ทำงานลูปอีกครั้ง และต่อไปทุก 5 วินาที
}
