Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,037

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

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

เริ่มหัวข้อใหม่

Unidentifier

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

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

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

Date : 2012-05-25 14:23:12

By : sakuraei

View : 13464

Reply : 7

No. 1

หมาของเซสชั่น

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

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

Date : 2012-05-25 15:06:13

By : Dragons_first

No. 2

TC Admin

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

แจ่มครับ Bookmark ไว้ก่อน

Date : 2012-05-25 16:21:01

By : mr.win

No. 3

ranarong

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

โหลดข้อมูลทั้งหมดมาก่อนแบบนี้ไม่น่าจะเหมาะสำหรับ case ที่มีข้อมูลจำนวนมากนะครับ

Date : 2012-05-25 17:48:39

By : nautilus

No. 4

LittleLovely

โพสกระทู้ ( 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

TC Admin

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

จัดไปครับ

Date : 2016-03-23 09:45:15

By : mr.win

No. 7

Стремись не к тому, чтобы добиться успеха, а к тому, чтобы твоя жизнь имела смысл. https://helloworl

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

ขอบคุณสำหรับตัวอย่าง 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 ใช้งานง่ายและสั้นมาก พัฒนาด้วยฝีมือคนไทยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก