SiamWebCity.com รับสร้างเว็บไซต์ครบวงจร
เลือกภาษา ภาษาอังกฤษ   
หน้าแรก
web
โปรโมทเว็บ
web
รับทำเว็บไซต์
web
สอนทำเว็บ
web
Domain 299บ.
web
ติดต่อเรา
web
 
รับทำเว็บไซต์ครบวงจร รับพัฒนาแอพพลิเคชั่น สำหรับ Facebook iPad iPhone Android รับอบรมการสร้างเว็บไซต์ โปรโมทเว็บไซต์ ดูแลเว็บไซต์ แก้ไขเว็บไซต์ : เริ่มต้นติดต่อที่เรา ที่เหลือเราเป็นผู้จัดการเพื่อท่าน : เราเป็นมากกว่าเครื่องมือที่ช่วยฝ่าวิกฤตเศรษฐกิจ
รายการ
เกี่ยวกับเรา
ทำไมต้องเลือกเรา
ผลงานที่ผ่านมา
เตรียมตัวก่อนทำเว็บ
รับดูแลเว็บไซต์
แอพ Facebook iPhone
โปรแกรมmlm สำเร็จรูป
เช่าโฮสติง
บริการหลังการขาย
เงื่อนไขการรับบริการ
ร่วมงานกับเรา
คำถามที่พบบ่อย
ติดต่อเรา

ฟรีบทความ
คู่มือการใช้งาน  คู่มือการใช้งาน
VDO สอน Dreamweaver  VDO สอน Dreamweaver
Bitcoin บิทคอยน์  Bitcoin บิทคอยน์
PHP MySQL  VDO  เบื้องต้น  PHP MySQL VDO เบื้องต้น
PHP MySQL  เกร็ดความรู้  PHP MySQL เกร็ดความรู้
jQuery  jQuery
HTML5  HTML5
ASP net   MS SQL  ASP net MS SQL
facebook app  facebook app
JSP  JSP
Oracle  Oracle
CSS  CSS
Google  Google
iphone ipad iphone itune ios  iphone ipad iphone itune ios
SEO  SEO
SQL Server  SQL Server
AJAX  AJAX
รดน้ำอัตโนมัติ  สปริงเกอร์  รดน้ำอัตโนมัติ สปริงเกอร์
คอมพิวเตอร์   อินเตอร์เน็ต  คอมพิวเตอร์ อินเตอร์เน็ต
JavaScripts  JavaScripts
cloud computing  cloud computing
xhtml  xhtml
Photoshop  Photoshop
RSS Feed  RSS Feed
wordpress  wordpress
Computer  Computer
MLM ขายตรง ขยายสายงาน  MLM ขายตรง ขยายสายงาน
NUTT's blog  NUTT's blog
ทีวีดิจิตอล DVB T2  ทีวีดิจิตอล DVB T2
Bootstrap CSS  Bootstrap CSS

รับสอน PHP, MySQL, HTML, CSS, Javascripts, FTP, Dreamweaver,PHPMyAdmin, Appserv, WMSEVER, php-Nuke , Joomla, SMF, Oscommerce, Phpbb, Paypal, Adwordsมาเรียนการสร้างเว็บกัน
บริการสอน แนะนำ Adwords , PHP, MySQL, HTML, FTP, SMF, PHPMyAdmin, Dreamweaver, Oscommerce, Photoshop, Flash...

test speed
Display Pagerank
ดูสถิติเว็บไซต์

เลื่อน scroll แล้วแสดงข้อมูลโดยอัตโนมัติ จาก MySQL ด้วย jQuery PHP



jQuery > เลื่อน scroll แล้วแสดงข้อมูลโดยอัตโนมัติ จาก MySQL ด้วย jQuery PHP


In previous article – Loading More Results (jQuery/PHP), the records are loaded when the users clicked on “Load more Data” button, which is great but how about loading database records automatically when user scrolls down to the bottom of the page? The technique can be seen in Twitter, Facebook and several other websites. Let’s use examples from previous article, with some modification we can create Ajax based auto loading script, which loads records when user scrolls to bottom of the page.


auto-load-records-on-scroll

MySQL Table

Run MySql query below to create a table in MySql for this demo. You can also find a sql file in download, which you can import in PhpMyAdmin.

MYSQL

1
2
3
4
5
6

CREATE TABLE IF NOT EXISTS `paginate` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(60) NOT NULL,
`message` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=51 ;

Configuration

Let’s start with a configuration file to store our MySql database username and password.

PHP

1
2
3
4
5
6
7
8

<?php
$db_username = 'xxxxx';
$db_password = '';
$db_name = 'xxxxxx';
$db_host = 'localhost';
$items_per_group = 5;
$mysqli = new mysqli($db_host, $db_username, $db_password,$db_name);
?>

Index Page

Before we write our jQuery code, we need to know the total records in the table, and break them into page numbers.

PHP

1
2
3
4
5
6
7

<?php
include("config.php");
$results = $mysqli->query("SELECT COUNT(*) as t_records FROM paginate");
$total_records = $results->fetch_object();
$total_groups = ceil($total_records->t_records/$items_per_group);
$results->close();
?>

jQuery

I have made few changes in jQuery code below. The .click() method is replaced with.scroll(), our code can now detect the page scroll, and auto loads additional data when user scrolls to bottom of the page.

JQUERY

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

$(document).ready(function() {
var track_load = 0; //total loaded record group(s)
var loading = false; //to prevents multipal ajax loads
var total_groups = <?php echo $total_groups; ?>; //total record group(s)

$('#results').load("autoload_process.php", {'page':track_load}, function() {track_load++;}); //load first group

$(window).scroll(function() { //detect page scroll

if($(window).scrollTop() + $(window).height() == $(document).height()) //user scrolled to bottom of the page?
{

if(track_load <= total_groups && loading==false) //there's more data to load
{
loading = true; //prevent further ajax loading
$('.animation_image').show(); //show loading image

//load data from the server using a HTTP POST request
$.post('autoload_process.php',{'group_no': track_load}, function(data){

$("#results").append(data); //append received data into the element

//hide loading image
$('.animation_image').hide(); //hide loading image once data is received

track_load++; //loaded group increment
loading = false;

}).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

alert(thrownError); //alert with HTTP error
$('.animation_image').hide(); //hide loading image
loading = false;

});

}
}
});
});

HTML

HTML code below should be placed within the body tag of the page, the results will appear inside the results element, and loading animation should appear only when user scrolls down to the bottom.

HTML

1
2
3
4
5

<ol id="results">
</ol>
<div class="animation_image" style="display:none" align="center">
<img src="ajax-loader.gif">
</div>

loading Process

Create a PHP file with code below, when the group number is passed to “autoload_process.php” using jQuery .post() method, we need starting point of record, and number of records to display per group. The MySQL LIMIT clause can be used to limit the results, we’ll just pass these two values as arguments, and have our records fetched.

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

<?php
include("config.php"); //include config file

//sanitize post value
$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

//throw HTTP error if group number is not valid
if(!is_numeric($group_number)){
header('HTTP/1.1 500 Invalid number!');
exit();
}

//get current starting point of records
$position = ($group_number * $items_per_group);

//Limit our results within a specified range.
$results = $mysqli->query("SELECT id,name,message FROM paginate ORDER BY id ASC LIMIT $position, $items_per_group");

if ($results) {
//output results from database

while($obj = $results->fetch_object())
{
echo '<li id="item_'.$obj->id.'">'.$obj->id.' - <strong>'.$obj->name.'</strong></span> &mdash; <span class="page_message">'.$obj->message.'</span></li>';
}

}
unset($obj);
$mysqli->close();
?>

Download Demo


ขอบคุณ http://www.sanwebe.com/2013/05/auto-load-records-o...



Short URL click! Facebook Share
<< Back : เข้าชม 3,596 ครั้ง : ขึ้นไปด้านบน
รับโพสเว็บ รับจ้างโพสเว็บบอร์ด รับโพสเว็บไซด์ webboard Seeding รับจ้างโพสต์ โปรโมทเว็บไซต์ webUB.com



รับทำเว็บไซต์, ทำเว็บ, สร้างเว็บไซต์, รับทำเว็บ, รับออกแบบเว็บ, รับเขียนเว็บ, ออกแบบเว็บ, เว็บดีไซน์, รับสร้างเว็บ, เขียนเว็บไซต์, เว็บ, บริษัท ทำเว็บ, บริษัท สร้างเว็บ, บริษัท ออกแบบเว็บ, บริษัท เขียนเว็บ, ผลงานเว็บ, โฮสติ้ง,Design,Web,เว็บ,เว็บ โฮสติ้ง,เว็ป,โฮสติ้ง ราคาถูก,เว็บไซต์,จดโดเมน,เว็บโฮสติ้ง,Web Download,Web PHP,Flash MX,Graphic Design,Search Engine, Web, Design, Web Host,Web Hosting,Web Page,เขียนเว็บ,เขียนเว็บไซต์,จัดทำเว็บ,จัดทำเว็บไซต์,ทำเว็บ,ทำเว็บไซต์, โปรโมทเว็บ,ฟรี เว็บ,รับเขียนเว็บ,รับทำเว็บ,รับทำเว็บไซต์,รับออกแบบเว็บ,รับออกแบบเว็บไซ ต์,เว็บ สำเร็จรูป,เว็บดีไซน์,เว็ปไซต์, สร้างเว็บ,สร้างเว็บไซต์,ออกแบบ เว็บไซต์,ออกแบบเว็บ,ออกแบบเว็บไซต์,เขียนโปรแกรม,บริการเว็บโฮสติ้ง,ประชา สัมพันธ์เว็บ,รับจัดทำเว็บไซต์,รับสร้างเว็บ,เว็บโปรแกรม,เว็บสวย, บริการจัดทำเว็บไซต์,บริษัทรับจัดทำเว็บไซต์,ให้บริการจัดทำเว็บไซต์, มีประสบการณ์การจัดทำเว็บไซต์, งานบริการเว็บไซต์,ผลงานการเว็บไซต์,ผลงานเว็บไซต์,เว็บไซต์,เว็บไซต์ ปรัชญา "พอเพียง",เว็บไซต์ราคาที่ยุติธรรม,เว็บไซต์ระบบมาตรฐาน,เว็บไซต์ทุกงาน, เว็บไซต์ธุรกิจ, โปรโมทเว็บ,ประชาสัมพันธ์เว็บ,เว็บ,ออกแบบเว็บ,เขียนโปรแกรม,สร้างเว็บ,ออก แบบเว็บไซต์,ทำเว็บ,เว็บสวย,เขียนเว็บไซต์,ทำเว็บไซต์,รับทำเว็บ,รับออกแบบ เว็บ,เขียนเว็บ,รับเขียนเว็บ,รับทำเว็บไซต์,รับจัดทำเว็บไซต์,เว็บโฮสติ้ง, จัดทำเว็บ,เว็บโปรแกรม,เว็บไซต์,เว็บดีไซน์,รับออกแบบเว็บไซต์,สร้างเว็บไซ ต์,เว็บ,จดโดเมน,บริการเว็บโฮสติ้ง,จัดทำเว็บไซต์,โปรแกรมคอมพิวเตอร์

รับทำเว็บไซต์ : โปรโมทเว็บไซต์ : รับเขียนโปรแกรม : สอนสร้างเว็บ : จด Domain name 299บ. : เช่า Hosting : บริการดูแลเว็บไซต์ : รับซื้อ ขาย Rolex : Sitemap.xml
สปริงเกอร์

ข้อสอบ คลังข้อสอบ ระบบข้อสอบ โปรแกรมข้อสอบ ฟรี Exam.in.th
เว็บไซต์ในเครือข่าย: SiamWebCity.com webUB.com EXAM.in.th ข้อสอบ.ไทย ไอเดียแต่งบ้าน homeEST.com
Copyright © 2009-2019 SiamWebCity.COM. ® All rights reserved. หมายเลขทะเบียนประกอบพานิชย์อิเลคทรอนิกส์ : 0447314800321
E-mail, Google Talk : admin [at] siamwebcity.com, Skype: SiamWebCity.com
ขึ้นไปด้านบน