โค้ดต่อไปนี้เป็นแนวทางการประยุกต์การใช้งาน jquery ในการดึงข้อมูลมาแสดง บางส่วนในเว็บไซต์
แบบกำหนดให้ดึงข้อมูลมาเป็นส่วนๆ เช่น เรามีข่าว และต้องการ ให้วนลูปแสดงข่าวนั้น ครั้งละ 4-5 หัวข้อ
โดยดึงจากฐานข้อมูล วนไปเรื่อยๆ จนครบ แบบนี้เป็นต้น
ก่อนอื่น ให้กำหนดส่วนของตำแหน่งข้อมูลที่เราต้องการแสดง ด้วย id เช่นตัวอย่่าง
1 2 | <div id="place-data"></div> |
เรากำหนด div มี id เท่ากับ place-data ส่วนนี้ ก็คือส่วนที่เราจะอ้างอิง และดึงข้อมูลมาแสดง
โค้ดไฟล์ ทดสอบ ajax_autoload.php คำอธิบายแสดงในโค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!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 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 สำหรับดึงข้อมูลจากฐานข้อมูล
ให้จัดรูปแบบโค้ดตามต้องการ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <?phpheader("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 จะเป็นคำสั่งในการทำงานแบบวนลูป
หากต้องการให้หยุดทำงาน เมื่อถึงหน้าสุดท้ายแล้ว สามารถปรับบางส่วนของโค้ดได้ดังนี้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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 วินาที } |
