Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > โค้ดแบ่งหน้าด้วย JQuery ใช้งานง่ายและสั้นมาก พัฒนาด้วยฝีมือคนไทยครับ



 

โค้ดแบ่งหน้าด้วย JQuery ใช้งานง่ายและสั้นมาก พัฒนาด้วยฝีมือคนไทยครับ

 



Topic : 078942



โพสกระทู้ ( 3,155 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์




Quote:
ต้องท้าวความไปที่กระทู้ https://www.thaicreate.com/php/forum/078884.html
ผมเห็นแล้วรู้สึกคันไม้คันมือ อยากเขียนให้สั้นๆ และปรับแก้ได้ง่าย เลยทดลองเขียนขึ้น
แต่ผมยังไม่พอใจ เอาไว้จะมีตัวที่ปรับแก้ไขเรื่องความเร็วในการแสดงผล(css บางตัวด้วย)และให้มี
ตัวอย่างสำหรับการดึงข้อมูลจากเดต้าเบสครับ
ขอขอบคุณครับสำหรับโจทก์ดีๆ และขออนุญาตมา ณ.ที่นี้ด้วย


thaicreate-078884

Code (PHP)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>https://www.thaicreate.com/php/forum/078884.html - ใครมีตัวอย่าง Source code PHP แบ่งหน้า แล้ววางลิ้งไว้ได้ทั้งด้านบน-ล่าง บ้างคะ  </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="Unidentifier">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
  <script src="http://code.jquery.com/jquery-latest.js"></script>
 <style>
 #nav{
	color:white;
	text-align:center;
	background-color:#6666ff;
	width:30px;
	display:inline-block;
	padding:5px;
	border:5px solid #dadada;
	-moz-border-radius: 15px;
	border-radius: 15px;
	cursor:default;
 }
 .pagination{
	background-color:#dadada;
	padding:10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
 }
 </style>
  </head>

 <body>
 <script type="text/javascript"> 
$(document).ready(function(){

			var perpage=3;	// จำนวนรายการต่อหนึ่งหน้า			
			var allNum = $("div#content div.element").length;  // นับจำนวน ข้อมูลทั้งหมดว่ามีกี่ชุด			
			var paginator="";	// สร้าง navigator 
			for(i=1; i<=Math.round(parseInt(allNum)/parseInt(perpage)); i++){
				paginator += "<span id='nav'>"+i+"</span>";
			}
			
			$("div.pagination").each(function(){  // สร้าง navigator ที่ด้านบนและด้านล่างของหน้าจอ
				$(this).html(paginator);
			}); 

			// ทำการแทรก div เพื่อกำกับเลขหน้า  นับตามจำนวนรายการต่อหนึ่งหน้า
			var count=0,
			pagecount=1,
			regenerator="<div class='page"+pagecount+"' for='all'>";
			$("div#content div.element").each(function(){
				count++;
				regenerator += "<div>"+$(this).html()+"</div>";
				if(!(count%perpage)){
					pagecount++;
					regenerator +="</div><div class='page"+pagecount+"' for='all'>";
				}			
			});
			regenerator +="</div>";			
			$("div#content").empty().html(regenerator);
			$("div[for=all]").hide();	//ซ่อนข้อมูลทั้งหมดก่อน
			$("div.page1").show(400);	//แสดงเฉพาะหน้าที่ 1	
			//ดักการกดคีย์บอร์ดที่ navigator-page number ที่้ด้านบนและล่างของจอภาพ
			$("div.pagination span#nav").click(function(){	
					var index = $(this).text();					
					$("div[for=all]").hide(400);
					$("div.page"+index).show(400);	
			});
			
});


</script>
<div id="test"></div>
<div id="exX">Examples</div>

<h3 id="ex2">Using Paging with multiple paginators</h3>


<h4>Average temperature of some cities in June</h4>

<div class="pagination"></div>

<div id="content">

<div class="element">
<h5>Las Vegas</h5>
<p>37°C / 98.6°F</p>
</div>
<div class="element">
<h5>Cairo</h5>
<p>35°C / 95°F</p>
</div>
<div class="element">
<h5>Houston</h5>
<p>33°C / 91.4°F</p>
</div>
<div class="element">
<h5>Madrid</h5>
<p>31°C / 87.8°F</p>
</div>
<div class="element">
<h5>Athens</h5>
<p>30°C / 86°F</p>
</div>
<div class="element">
<h5>Lisbon</h5>
<p>27°C / 80.6°F</p>
</div>
<div class="element">
<h5>Rome</h5>
<p>27°C / 80.6°F</p>
</div>
<div class="element">
<h5>Moscow</h5>
<p>23°C / 73.4°F</p>
</div>
<div class="element">
<h5>Los Angeles</h5>
<p>22°C / 71.6°F</p>
</div>
<div class="element">
<h5>San Francisco</h5>
<p>22°C / 71.6°F</p>
</div>
<div class="element">
<h5>Lima</h5>
<p>19°C / 66.2°F</p>
</div>
<div class="element">
<h5>Sydney</h5>
<p>18°C / 64.4°F</p>
</div>
<div class="element">
<h5>Johannesburg</h5>
<p>17°C / 62.6°F</p>
</div>
<div class="element">
<h5>Buenos Aires</h5>
<p>16° / 60.8°F</p>
</div>
</div>

<div class="pagination"></div>
 </body>
</html>




Tag : PHP, MySQL, HTML/CSS, JavaScript, Ajax, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-05-25 14:23:12 By : sakuraei View : 13172 Reply : 7
 

 

No. 1



โพสกระทู้ ( 3,748 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

เก็บครับ ขอบคุณครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-05-25 15:06:13 By : Dragons_first
 


 

No. 2



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

แจ่มครับ Bookmark ไว้ก่อน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-05-25 16:21:01 By : mr.win
 

 

No. 3



โพสกระทู้ ( 1,242 )
บทความ ( 13 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

โหลดข้อมูลทั้งหมดมาก่อนแบบนี้ไม่น่าจะเหมาะสำหรับ case ที่มีข้อมูลจำนวนมากนะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-05-25 17:48:39 By : nautilus
 


 

No. 4



โพสกระทู้ ( 310 )
บทความ ( 0 )



สถานะออฟไลน์


Quote:
ขอติดตามผลงานเวอร์ชั่นถัดไปด้วยคนครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-05-25 21:40:32 By : survivor
 


 

No. 5

Guest


สุดยอดครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-03-22 11:19:33 By : pirom
 


 

No. 6



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

จัดไปครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-03-23 09:45:15 By : mr.win
 


 
สอบถามเพิ่มเติม

ขอบคุณสำหรับตัวอย่าง Coding ครับ
รบกวนสอบถามเพิ่มเติมครับ ตรงที่เป็น Loop for ที่ใช้แบ่งหน้าครับการใช้ Math.round มันจะทำให้หน้าออกมาไม่ครบรึเปล่าครับ เพราะ Round เป็นการปัดเศษที่หารแล้วได้ .5 ขึ้นไป เช่น ถ้าผมมี div อยู่ 14 อัน แล้วผมจะแบ่งหน้า ละ 10 หารแล้วมันจะตกอยู่ที่ 14/10 = 1.4 Round(1.4) = 1 ทำให้แสดงแค่ 1 หน้า ไม่แสดงหน้าที่ 2 น่าจะต้องเปลี่ยนจาก Math.round เป็น Math.ceil แทนไหมครับ ไม่แน่ใจว่าผมเข้าใจเรื่องการปัดเศษผิดรึเปล่า
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2022-04-20 11:22:22 By : NongNat
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : โค้ดแบ่งหน้าด้วย JQuery ใช้งานง่ายและสั้นมาก พัฒนาด้วยฝีมือคนไทยครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่