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
ดูสถิติเว็บไซต์

การทำปุ่ม Loading More นำข้อมูลจาก Mysql โดยใช้ jQuery Ajax



jQuery > การทำปุ่ม Loading More นำข้อมูลจาก Mysql โดยใช้ jQuery Ajax


You might have seen the implementation of Ajax based data loading technique at Facebook, Twitter or some other sites. Instead of showing pagination links, why not let users load data dynamically on a button click. In this article we’ll try to adopt the technique to make similar loading page for our web projects using jQuery.


jQuery Load More Data

You may also want to checkout similar tutorial Auto Load More Data On Page Scroll. In my earlier post Simple Ajax Pagination, I have explained how to create Ajax Pagination using jQuery. Here we will be doing precisely the same thing, in-fact we’ll be borrowing all sample files from previous post. Everything stays the same, only index.php file will be modified here.

Configuration

As explained in previous post, this is the configuration file to store our MySql database username and password, and also to connect to MySQL using PHP mysqli_connect.

PHP

1
2
3
4
5
6
7
8
9

<?php
$db_username = 'root';
$db_password = '';
$db_name = 'demo';
$db_host = 'localhost';
$item_per_page = 5;

$connecDB = mysqli_connect($db_host, $db_username, $db_password,$db_name)or die('could not connect to database');
?>

Index Page

Here we wont be generating any pagination links like before, we only need to get total records and break them to page numbers, which we will be using with jQuery.

PHP

1
2
3
4
5
6
7
8
9

<?php
include("config.inc.php");

$results = mysqli_query($connecDB,"SELECT COUNT(*) FROM paginate");
$get_total_rows = mysqli_fetch_array($results); //total records

//break total records into pages
$total_pages = ceil($get_total_rows[0]/$item_per_page);
?>

jQuery

Now we have total page number, its time to write some jQuery codes. Like I said, we’ll only be modifying index.php page here.

Since we need to append results into the element, and jQuery .load() method won’t let us insert results as the last child, we will be using jQuery .post() instead of .load() method we previously used in Simple Ajax Pagination examples.

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
41
42
43
44
45
46
47

$(document).ready(function() {

var track_click = 0; //track user click on "load more" button, righ now it is 0 click

var total_pages = <?php echo $total_pages; ?>;

$('#results').load("fetch_pages.php", {'page':track_click}, function() {track_click++;}); //initial data to load


$(".load_more").click(function (e) { //user clicks on button

$(this).hide(); //hide load more button on click
$('.animation_image').show(); //show loading image

if(track_click <= total_pages) //user click number is still less than total pages
{
//post page number and load returned data into result element
$.post('fetch_pages.php',{'page': track_click}, function(data) {

$(".load_more").show(); //bring back load more button

$("#results").append(data); //append data received from server

//scroll page smoothly to button id
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);

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

track_click++; //user click increment on load button

}).fail(function(xhr, ajaxOptions, thrownError) { //any errors?
alert(thrownError); //alert with HTTP error
$(".load_more").show(); //bring back load more button
$('.animation_image').hide(); //hide loading image once data is received
});


if(track_click >= total_pages-1) //compare user click with page number
{
//reached end of the page yet? disable load button
$(".load_more").attr("disabled", "disabled");
}
}

});
});

HTML

Everything’s set, here’s our HTML that contains Load more button, a loading image and place to append the data from fetch_pages.php. Loading image is hidden at first, when user clicks on load more button, we need to show the loading image to indicate data is loading.

HTML

1
2
3
4
5

<div id="results"></div>
<div align="center">
<button class="load_more" id="load_more_button">load More</button>
<div class="animation_image" style="display:none;"><img src="ajax-loader.gif"> Loading...</div>
</div>

Fetching Pages

In previous post, I talked about posting page number to fetch_pages.php from index page, to track the starting point of record. Here, we apply the same method. We pass page number to get starting point of record in fetch_pages.php file.

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

<?php
include("config.inc.php"); //include config file
//sanitize post value
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);

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

//get current starting point of records
$position = ($page_number * $item_per_page);

//Limit our results within a specified range.
$results = mysqli_query($connecDB,"SELECT id,name,message FROM paginate ORDER BY id DESC LIMIT $position, $item_per_page");

//output results from database
echo '<ul class="page_result">';
while($row = mysqli_fetch_array($results))
{
echo '<li id="item_'.$row["id"].'"><span class="page_name">'.$row["id"].') '.$row["name"].'</span><span class="page_message">'.$row["message"].'</span></li>';
}
echo '</ul>';
?>

Conclusion

That’s it! we should have a nifty jQuery based data loading page by now. Don’t forget to checkout the demo and download the whole thing in your computer, downloadable file comes along with style file, image and latest jQuery file. Good luck! If you want to make Ajax Pagination with Next-Previous buttons, you can checkout this updated article — Ajax Pagination with jQuery & PHP.

Thanks: http://www.sanwebe.com/2013/03/loading-more-result...



Short URL click! Facebook Share
<< Back : เข้าชม 4,409 ครั้ง : ขึ้นไปด้านบน
รับโพสเว็บ รับจ้างโพสเว็บบอร์ด รับโพสเว็บไซด์ 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
ขึ้นไปด้านบน