เว็บไซต์มักประกอบด้วยหลายหน้า สามารถมีได้ 3-5 หน้า เช่น บนหน้า Landing Page หรืออาจจะมากกว่านั้นก็ได้

เว็บไซต์ที่ดีทุกแห่งควรมีการนำทางที่จะช่วยให้ผู้ใช้สามารถนำทางและย้ายไปมาระหว่างหน้าต่างๆ ของเว็บไซต์ได้อย่างถูกต้อง คุณสามารถสร้างการแบ่งหน้าดังกล่าวได้โดยใช้ JavaScript ในบทความนี้เราจะพูดถึงวิธีสร้างการนำทางดังกล่าว

อีกประการหนึ่ง นอกเหนือจาก JavaScript ทั่วไป ตัวอย่างยังใช้ Bootstrap 4 ส่วนประกอบการแบ่งหน้า bootstrap ของมันรวมกับไลบรารี JQuery ซึ่งก็คือปลั๊กอิน Buzina Pagination พิเศษ ช่วยให้คุณสามารถแบ่งข้อมูลทั้งหมดออกเป็นหลาย ๆ หน้าโดยมีการนำทางระหว่างกัน

หากต้องการทำงานกับ Bootstrap และ JQuery คุณต้องเชื่อมต่อเข้าด้วยกัน ซึ่งสามารถทำได้ในของคุณ เอกสาร HTMLโดยใช้แท็ก สร้างแท็กที่จับคู่ 3 แท็ก ;. เราจะเชื่อมต่อ Ajax.js, bootstrap 4 และปลั๊กอิน JQuery เอง

หากต้องการเชื่อมต่อบูตสแตรปอย่างถูกต้อง คุณต้องใช้แท็กด้วย โดยในแอตทริบิวต์ href เราจะระบุลิงก์ไปยังเฟรมเวิร์กของเรา โดยจะมีลิงก์ไปยังสไตล์ที่ปลั๊กอินมีอยู่

ดังนั้นเราจึงเชื่อมต่อทุกสิ่งที่จำเป็นสำหรับการทำงาน สิ่งที่เหลืออยู่คือการเชื่อมต่อปลั๊กอินเพื่อสร้างการแบ่งหน้า - Buzina Pagination ในการสร้างมัน เรายังสร้างและแท็กด้วย ในแอตทริบิวต์ "href" และ "src" เราป้อนลิงก์เดียวกัน

ปลั๊กอิน Buzina Pagination และ Bootstrap นอกเหนือจากสคริปต์แล้ว ยังมีสไตล์ที่จำเป็นอีกด้วย เราเชื่อมต่อพวกเขาผ่านแท็ก ;. โปรดจำไว้ว่า แม้ว่าคุณจะมีความเข้าใจ CSS เป็นอย่างดี แต่เราไม่แนะนำให้คุณเข้าไปเปลี่ยนแปลงการตั้งค่าปลั๊กอิน เพื่อความสนุกสนาน คุณสามารถเปิดพวกมันในโปรแกรมแก้ไขโค้ดและดูพวกมันได้ แต่อย่าลืมบันทึกโค้ดเวอร์ชันดั้งเดิมก่อน

เอกสาร HTML ของคุณควรมีรหัสต่อไปนี้:

ในบทความทั้งหมดของเรา เราได้พิจารณาถึงการสร้าง 1 หน้า HTMLในตัวอย่างเดียวกัน เราจะสร้างหลายรายการพร้อมกันผ่านเอกสารเดียว ในเวลาเดียวกัน เราจะไม่วางไว้บนลิงก์อื่น แต่จะสามารถเข้าถึงได้โดยการคลิกที่ปุ่ม เราจะสร้างบล็อกแยกต่างหากสำหรับแต่ละหน้า

ในตัวอย่างของเรา เรากำลังสร้างหน้าทั้งหมด 5 หน้า สร้าง div แยกกันสำหรับแต่ละรายการ คุณสามารถเขียนข้อความภายในเพื่อแสดงภาพได้ หากต้องการคุณสามารถสร้าง 10, 20 และ 30 หน้าได้

คุณไม่จำเป็นต้องมีคลาสหรือตัวระบุเพื่อใช้งาน สิ่งสำคัญคือหน้าทั้งหมดเหล่านี้อยู่ภายในบล็อกหลักพร้อมกับคลาสตัวอย่าง

คุณต้องเชื่อมต่อหลายฟังก์ชัน:

เราสร้างเพจเสร็จแล้ว สุดท้ายเราได้อะไร? เรามีระบบนำทางที่มีสไตล์ที่เหมาะกับเว็บไซต์ของคุณอย่างสมบูรณ์แบบ เพิ่มองค์ประกอบบางอย่างและคุณสามารถปรับให้เข้ากับหน้าเว็บที่คุณมีได้

คุณสามารถเปลี่ยนสคริปต์ได้ตามที่คุณต้องการ แต่เฉพาะในกรณีที่คุณเชี่ยวชาญ JavaScript เป็นอย่างดีเท่านั้น สิ่งสำคัญคือไม่ต้องเปลี่ยนค่าของสคริปต์และสไตล์ปลั๊กอิน

การแบ่งหน้านี้มีข้อได้เปรียบอย่างมาก - ใช้งานง่าย ผู้ใช้ไม่จำเป็นต้องโหลดลิงก์เพิ่มเติมเพื่อนำทางระหว่างหน้าต่างๆ

นอกจากนี้ เนื่องจากมีการใช้สคริปต์จำนวนน้อย การเพิ่มประสิทธิภาพจึงไม่ลดลงมากนัก

คอลเลกชันตัวอย่างโค้ดการแบ่งหน้า HTML และ CSS ฟรี: ตอบสนอง เรียบง่าย การออกแบบวัสดุ จุดนำทางฯลฯ อัปเดตคอลเลกชันเดือนมิถุนายน 2018 5 รายการใหม่

การแบ่งหน้า / เพจเจอร์ที่ตอบสนองใน HTML และ CSS ปรับขนาดเบราว์เซอร์ของคุณเพื่อแสดงเอฟเฟกต์ที่น่าสนใจ

ตอบสนอง: ใช่

การขึ้นต่อกัน: bootstrap.css

บรรทัด CSS ตามการแบ่งหน้า

ตอบสนอง: ใช่

การพึ่งพา: -

ปุ่มแบ่งหน้า CSS ล้วนๆ

เบราว์เซอร์ที่รองรับ: Chrome, Firefox, Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: -

การแบ่งหน้าบรรทัด CSS ล้วนๆ พร้อมเอฟเฟกต์โฮเวอร์

เบราว์เซอร์ที่รองรับ: Chrome, Edge, Firefox, Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: -

แอนิเมชั่นการแบ่งหน้าด้วย HTML, CSS และ JS

เบราว์เซอร์ที่รองรับ: Chrome, Edge, Firefox, Opera, Safari

ตอบสนอง: ใช่

การพึ่งพา: -

CSS แบบธรรมดา

การแบ่งหน้า CSS Pac-Man ล้วนๆ พร้อมภาพเคลื่อนไหวเมื่อโฮเวอร์

การแบ่งหน้าตอบสนองอย่างง่าย

การแบ่งหน้า HTML และ CSS

ตัวอย่างการแบ่งหน้าที่ช่วยให้คุณสามารถนำทางระหว่างหน้าต่างๆ ตัวอย่างนี้จะต้องมีแอตทริบิวต์ href เพื่อที่จะทำงานกับแอปพลิเคชันจริงที่ต้องมีการแบ่งหน้า

การแบ่งหน้าด้วยคุณสมบัติที่กำหนดเองของ CSS

ตัวเลือกการแบ่งหน้าและการออกแบบ
สร้างโดย MojoM
25 พฤษภาคม 2017

GIF สาธิต: SVG Page Hopper

ฮอปเปอร์หน้า HTML, CSS และ SVG
สร้างโดยคริสแกนนอน
14 พฤษภาคม 2017

GIF สาธิต: การแบ่งหน้าที่ไม่มีที่สิ้นสุด

การแบ่งหน้าไม่สิ้นสุดใน HTML และ CSS
สร้างโดย Mariusz Dabrowski
27 เมษายน 2017

ส่วนประกอบ CSS: .

12 ไอเดียการแบ่งหน้าเว็บไซต์ด้วย HTML และ CSS
สร้างโดยโรซ่า
3 พฤศจิกายน 2559

GIF สาธิต: การแบ่งหน้า

การแบ่งหน้าด้วย HTML/CSS/JavaScript
สร้างโดย JP Nothard
9 ตุลาคม 2559

GIF สาธิต: ภาพเคลื่อนไหวโฮเวอร์การแบ่งหน้า

ภาพเคลื่อนไหวโฮเวอร์ของการแบ่งหน้า HTML และ CSS
สร้างโดยเอเลนา นาซาโรวา
12 กันยายน 2559

การแบ่งหน้าด้วยเอฟเฟกต์โฮเวอร์
สร้างโดยอังเดร วิเชิร์ต
27 สิงหาคม 2559

ตัวบ่งชี้การแบ่งหน้าด้วย HTML, CSS และ JavaScript
สร้างโดยโมเสส โฮล์มสตรอม
19 สิงหาคม 2559

สร้างโดยเบรนแดนมัลลินส์
16 สิงหาคม 2559

สร้างเส้นเวทย์มนตร์สำหรับการแบ่งหน้าของคุณ มันดูดีมาก
สร้างโดยไรอันหยู
18 กุมภาพันธ์ 2558

การทดสอบการแบ่งหน้าแบบตอบสนอง เข้าถึงได้ และสลับกัน
สร้างโดยไซมอน โกลล์เนอร์
11 พฤศจิกายน 2014

GIF สาธิต: ลูกศรแบ่งหน้า

การงอลูกศรการแบ่งหน้า
สร้างโดยฮาคิม เอล ฮัตตาบ
18 ตุลาคม 2556

ในบทความนี้ เราจะดูกระบวนการสร้างองค์ประกอบเว็บอินเตอร์เฟสเป็นบล็อกการนำทางสำหรับการแบ่งหน้า ใน Bootstrap 3 และ 4 องค์ประกอบ UI นี้ถูกนำมาใช้โดยใช้องค์ประกอบการแบ่งหน้า

Pagenation คือ การแสดงข้อมูลทีละหน้า เหล่านั้น. นี่คือประเภทของเอาต์พุตเมื่อข้อมูลไม่ได้เอาต์พุตทั้งหมดในคราวเดียว แต่เป็นส่วนเล็กๆ (หน้า)

บล็อกการนำทางใช้เพื่อนำทางผ่านส่วนต่างๆ (หน้า) เหล่านี้

องค์ประกอบการแบ่งหน้าของกรอบงาน Bootstrap ได้รับการออกแบบอย่างแม่นยำเพื่อสร้างองค์ประกอบอินเทอร์เฟซนี้ เช่น บล็อกการนำทาง.

ใน Bootstrap 3 แถบนำทางมีโครงสร้างดังต่อไปนี้:

• ก่อนหน้า
• 1
• 2
• 3
• ต่อไป

องค์ประกอบ nav ในส่วนนี้ทำหน้าที่เป็นคอนเทนเนอร์แบบห่อหุ้ม มีความจำเป็นในโครงสร้างนี้เท่านั้นเพื่อให้เทคโนโลยีช่วยเหลือรับรู้ส่วนของโค้ด HTML นี้เป็นการนำทาง

นอกจากนี้ ขอแนะนำสำหรับเทคโนโลยีช่วยเหลือเพื่ออธิบายว่านี่คือบล็อกการนำทางประเภทใด การดำเนินการนี้ดำเนินการโดยใช้แอตทริบิวต์ aria-label

มาร์กอัปบล็อกการนำทางสำหรับการแบ่งหน้าใน Bootstrap ทำได้โดยใช้รายการสัญลักษณ์แสดงหัวข้อย่อย แต่ละลิงก์การนำทางในบล็อกนี้เป็นองค์ประกอบที่ห่อหุ้มด้วย li และวางไว้ใน ul

การออกแบบบล็อกการนำทางใน Bootstrap ทำได้โดยใช้คลาสการแบ่งหน้า ซึ่งจะต้องเพิ่มใน ul

โครงสร้างบล็อกการนำทางใน Bootstrap 4:

• ก่อนหน้า
• 1
• 2
• 3
• ต่อไป

โปรดทราบว่าใน Bootstrap 4 คุณต้องเพิ่มคลาสให้กับ li และองค์ประกอบ K li คือคลาส page-item และ k a คือ page-link คลาสเหล่านี้กำหนดสไตล์ CSS สำหรับองค์ประกอบและจำเป็นสำหรับการแสดงบล็อกการนำทางที่ถูกต้อง

ตัวอย่างของแถบนำทางสำหรับการแบ่งหน้าที่ใช้ไอคอนเป็นเนื้อหาของบางลิงค์:

• อันดับแรก
• " ก่อนหน้า
• 1
• 2
• 3
• " ต่อไป
• ล่าสุด

การเปลี่ยนสถานะของลิงก์ในแถบนำทางทำได้โดยใช้คลาสที่ปิดใช้งานและแอ็คทีฟ คลาสแรก (ปิดใช้งาน) ใช้เพื่อสร้างลิงก์ที่ไม่ใช้งาน (ไม่สามารถคลิกได้) ต้องใช้คลาสที่สอง (active) เพื่อเน้น (ระบุ) หน้าปัจจุบัน คุณต้องเพิ่มคลาสที่ใช้งานอยู่และปิดใช้งานไม่ให้ไปที่ลิงก์ แต่ไปที่องค์ประกอบ li

• ก่อนหน้า
• 1
• 2
• 3
• ต่อไป

• ก่อนหน้า
• 1
• 2
• 3
• ต่อไป

คลาสที่ถูกปิดใช้งานจะตั้งค่าลิงก์ไปยังเหตุการณ์ตัวชี้การประกาศ CSS: none โฆษณานี้มีวัตถุประสงค์เพื่อปิดใช้งานฟังก์ชันการทำงานของลิงก์ แต่จะไม่ปิดการเปลี่ยนผ่านโดยใช้แป้นพิมพ์ ดังนั้น หากคุณต้องการปิดใช้งานฟังก์ชันการทำงานของลิงก์ดังกล่าวในโปรเจ็กต์ของคุณโดยสมบูรณ์ คุณจะต้องติดตามลิงก์เหล่านั้นเพิ่มเติมโดยใช้ JavaScript และเพิ่มแอตทริบิวต์ tabindex="-1" ให้กับลิงก์เหล่านั้น

อีกวิธีในการปิดใช้งานฟังก์ชันลิงก์คือการไม่ใช้องค์ประกอบ

• ก่อนหน้า
• 1
• 2
• 3
• ต่อไป

ใน Bootstrap 3 และ 4 คุณสามารถปรับขนาดบล็อกการนำทางได้โดยใช้คลาส pagination-lg และ pagination-sm ซึ่งทำได้โดยการเพิ่มหนึ่งในคลาสเหล่านี้ในคลาสการแบ่งหน้า

คลาสแรก (pagination-lg) จะใช้เมื่อจำเป็นต้องเพิ่มขนาดของการนำทางและคลาสที่สอง (pagination-sm) เมื่อจำเป็นต้องลดขนาด

• ก่อนหน้า
• 1
• 2
• 3
• ต่อไป

• ก่อนหน้า
• 1
• 2
• 3
• ต่อไป

ใน Bootstrap 3 การจัดตำแหน่งแถบนำทางสำหรับการแบ่งหน้าทำได้โดยใช้คลาสการจัดตำแหน่งข้อความ

ใน Bootstrap 4 การจัดตำแหน่ง navbar สำหรับการแบ่งหน้าทำได้โดยใช้คลาส Flex

Pager เป็นส่วนประกอบ Bootstrap 3 ที่ออกแบบมาเพื่อสร้างการนำทางที่ง่ายดายในหน้าต่างๆ หรือเนื้อหาอื่นๆ ของไซต์ ส่วนประกอบนี้ประกอบด้วย 2 ปุ่ม (ลิงก์)

การใช้การนำทางที่พบบ่อยที่สุดประการหนึ่งคือการให้ปุ่มแรกพาคุณไปยังอีกจุดหนึ่ง รายการใหม่บนเว็บไซต์และอันที่สอง - ไปยังอันที่เก่ากว่า

ไวยากรณ์คอมโพเนนต์เพจเจอร์:

• ก่อนหน้า
• ต่อไป

ตามค่าเริ่มต้น ปุ่มคอมโพเนนต์ Pager จะอยู่ตรงกลาง แต่นอกเหนือจากตัวเลือกนี้แล้ว Bootstrap 3 ยังให้คุณจัดแนวตามขอบที่แตกต่างกันได้ ทำได้โดยการเพิ่มคลาสก่อนหน้าปุ่มแรก และถัดจากปุ่มที่สอง คลาสก่อนหน้าจัดแนวลิงก์ไปทางซ้าย และถัดไป – ไปทางขวา

• ก่อนหน้า
• ต่อไป

การตั้งค่าปุ่มให้เป็นสถานะปิดใช้งานทำได้โดยการเพิ่มคลาสที่ปิดใช้งานลงไป

• ← ก่อนหน้า
• ถัดไป →

การแบ่งหน้าหรือ popprost - การนำทางหน้าเป็นองค์ประกอบสำคัญของเว็บไซต์ที่สมบูรณ์ไม่มากก็น้อย ระบบต่างๆระบบการจัดการไซต์ส่วนใหญ่มีเครื่องมือในตัวสำหรับการนำการแบ่งหน้าไปใช้ นอกจากนี้ยังมีปลั๊กอินแยกต่างหากจำนวนมากที่เขียนขึ้นสำหรับงานที่มีประโยชน์นี้ โดยส่วนใหญ่แล้วจะสร้างขึ้นโดยใช้นามสกุล . ปลั๊กอินทั้งหมดนี้แตกต่างกันทั้งในรูปแบบการดำเนินการและใน ฟังก์ชั่นแต่สิ่งสำคัญคือพวกมันเป็นทางเลือกที่ยอดเยี่ยมสำหรับการใช้งานฝั่งเซิร์ฟเวอร์ในการแบ่งเนื้อหาจำนวนมากของไซต์ออกเป็นหน้าต่างๆ

ฉันเสนอให้พิจารณาหนึ่งในความคิดของฉันมากที่สุด jQuery ที่มีน้ำหนักเบาปลั๊กอินเพื่อสร้างการนำทางการแบ่งหน้าที่จะช่วยให้คุณจัดระเบียบการแบ่งหน้าที่น่าสนใจและรวดเร็ว

น้ำหนักเบามากทุกประการทั้งเรื่องน้ำหนักและทุกอย่างที่เกี่ยวข้องกับการเชื่อมต่อ การตั้งค่า สร้างเพจได้รวดเร็ว มาพร้อมดีไซน์ 3 สไตล์ และชาร์จพร้อมรองรับ

อย่างไรก็ตาม หากคุณไม่พอใจกับสไตล์มาตรฐาน คุณสามารถใช้ได้ ซึ่งจะแนบกับ .css ของปลั๊กอินได้ไม่ยาก

ตอนนี้เรามาดูวิธีการเชื่อมต่อปลั๊กอินและไฟล์สไตล์กับเอกสารอย่างถูกต้องมากขึ้นนั่นคือนำไปใช้โดยตรงบนหน้าไซต์และไปที่การตั้งค่าปลั๊กอินที่มีอยู่

ในการเริ่มต้นแน่นอนว่าคุณต้องมีปลั๊กอินนั่นคือพร้อมแหล่งที่มาซึ่งคุณได้รับการบรรจุอย่างระมัดระวัง เจคิวรี่ จาวาสคริปต์และไฟล์สไตล์ css

มาดูวิธีใช้ปลั๊กอินทีละขั้นตอน:

ในเนื้อหาของหน้า ในส่วน ... คุณต้องเชื่อมต่อเฟรมเวิร์ก jQuery โดยควรเป็นเวอร์ชัน 1.7.2 หรือใหม่กว่า ซึ่งสามารถทำได้โดยใช้พื้นที่เก็บข้อมูลพิเศษของ Google:

หากคุณเปิดใช้งาน jQuery บนไซต์ของคุณแล้วและทำงานด้วยความเร็วสูงสุด คุณสามารถข้ามการเคลื่อนไหวทั้งหมดที่อธิบายไว้ข้างต้นได้อย่างปลอดภัย สิ่งสำคัญคือต้องแน่ใจว่าเวอร์ชัน jQuery ไม่หนาแน่นเกินไป ใน WordPress ไม่เป็นไร
ต่อไปเราจะเชื่อมต่อของเรา ม้านั่งทำงาน- ปลั๊กอิน jquery.simplePagination.js:

คุณไม่ต้องกังวลเกี่ยวกับมัน แต่เพียงเลือกสไตล์ที่คุณต้องการ สว่าง เข้ม หรือกะทัดรัด แล้ววางชุดกฎเกณฑ์ลงในไฟล์ styles.css ของเทมเพลตของคุณ การลงทะเบียนสไตล์ของคุณเองหรือใช้ Bootstrap ก็เป็นทางเลือกที่ดียิ่งขึ้น ในแง่ของความคิดริเริ่มและการพัฒนาทักษะการสร้างไซต์

หากต้องการแสดงแผงการนำทางหน้าบนหน้าไซต์ที่คุณวางแผนจะวางไว้ในเชิงตรรกะและบ่อยที่สุดซึ่งอยู่ที่ด้านล่างของเนื้อหาหลักคุณควรเขียนสิ่งต่อไปนี้:
สำหรับพื้นหลังสีอ่อน:

ธีมขนาดกะทัดรัด:

$(function() ( $(#light-pagination).pagination(( items: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));

ในตัวอย่าง ฉันใช้การกำหนดค่าเริ่มต้นสำหรับการแบ่งหน้าของธีมสีอ่อน #light-pagination คุณสามารถเปลี่ยนตัวเลือกเป็นแบบอื่นได้ สำหรับแบบกะทัดรัดคือ #compact-pagination หรือสำหรับรูปแบบสีเข้ม #dark-pagination ในกรณีนี้ อย่าลืมเปลี่ยนคลาสในฟังก์ชัน cssStyle
ตามที่ฉันได้เขียนไว้ข้างต้น ปลั๊กอินมีความยืดหยุ่นมากในการตั้งค่า โดยมีตัวเลือกต่อไปนี้สำหรับการเปลี่ยนแปลง:

• รายการ — จำนวนรายการทั้งหมดที่จะใช้ในการคำนวณหน้า ค่าเริ่มต้น: 1.
• itemsOnPage — จำนวนรายการที่จะแสดงในแต่ละหน้า ค่าเริ่มต้น: 1.
• หน้า — ไม่บังคับ หากมีการระบุค่า รายการและตัวเลือก itemOnPage จะถูกละเว้น ตั้งค่าจำนวนหน้าในรายการ
• displaysPages — จำนวนหน้าที่ควรมองเห็นได้ระหว่างการนำทาง ค่าต่ำสุดที่อนุญาต: 3 ค่าเริ่มต้น: 5
• ขอบ — จำนวนหน้าที่มองเห็นได้ที่จุดเริ่มต้นและจุดสิ้นสุดของการกำหนดหมายเลข ค่าเริ่มต้น: 2
• currentPage — เพจใดจะถูกเลือกทันทีหลังจากเปิดตัว ตรรกะ ค่าเริ่มต้น: 1
• hrefTextPrefix - สตริงที่ใช้ในแอตทริบิวต์ HREF จะถูกเพิ่มก่อนหมายเลขหน้า ค่าเริ่มต้น: "#page- "
• hrefTextSuffix — สตริงที่ใช้ในแอตทริบิวต์ HREF จะถูกแทรกหลังหมายเลขหน้า ค่าเริ่มต้นคือสตริงว่าง
• prevText - เปิดข้อความของปุ่ม หน้าก่อนหน้า- ค่าเริ่มต้น: "ก่อนหน้า"
• nextText - เปิดข้อความของปุ่ม หน้าถัดไป- ค่าเริ่มต้น: "ถัดไป"
• cssStyle - กำหนดสไตล์ CSS ค่าเริ่มต้น: "ธีมแสง"
• selectOnClick - การเลือกเพจหลังจากคลิกโดยค่าเริ่มต้น - เปิดใช้งาน (จริง) ฉันยังไม่เข้าใจว่าทำไมต้องปิดการใช้งาน แต่มีตัวเลือกค่า: "false"

เราดูการตั้งค่าพื้นฐานที่สุด เกี่ยวกับ ฟังก์ชั่นเพิ่มเติมและ วิธีการที่มีอยู่คุณสามารถดูวิธีใช้ปลั๊กอินนี้ได้โดยศึกษาเอกสารโดยตรงจากหน้าของนักพัฒนา

สิ่งที่ฉันทำได้คือขอให้คุณโชคดีและประสบความสำเร็จในการทำงานในโครงการใหม่ของคุณ

การแบ่งหน้ารวมทั้งการนำทางหน้าก็เพียงพอแล้ว สิ่งง่ายๆแต่ผู้เริ่มต้นมักจะมีปัญหาในการสร้างมันขึ้นมา และที่สำคัญที่สุดคือการทำความเข้าใจงานของมัน...

ภารกิจหนึ่งของการแบ่งหน้าคือการส่งออกพร้อมกันขององค์ประกอบทั้งหมด แต่มีจำนวนจำกัด กล่าวคือไม่เกินองค์ประกอบ $pp และกลุ่มขององค์ประกอบใดที่จะส่งออกขึ้นอยู่กับพารามิเตอร์อินพุต $pn - จำนวนของ กลุ่มนี้ ที่จริงแล้วหมายเลขนี้คือหมายเลขหน้า ที่นี่คุณต้องมีแบบสอบถามเช่นนี้:

เลือก * จาก `ตาราง` จำกัด (($pn-1)*$pp),($pp)

ค่าของ $pn ลดลง 1 ดังนั้น ตัวอย่างเช่น สำหรับหน้าแรกของรายการที่มีค่า $pp เท่ากับ 10 จะมีการเลือกองค์ประกอบตั้งแต่ 0 ถึง 9 และไม่ใช่จาก 10 ถึง 19 โดยธรรมชาติแล้ว ถ้า หน้ามีหมายเลขจากศูนย์ ไม่จำเป็นต้องมีค่า $ ลดลง 1 pn ในคำขอ

ในการแก้ปัญหาถัดไป นั่นคือการสร้างการนำทางเพจ คุณต้องทราบจำนวนเพจทั้งหมดในรายการก่อน เมื่อต้องการทำเช่นนี้ คุณสามารถสอบถามจำนวนองค์ประกอบทั้งหมดก่อนได้ หรือคำนวณจำนวนหน้าทั้งหมดโดยตรงในแบบสอบถามตามจำนวนองค์ประกอบทั้งหมด:

เลือกชั้น((นับ(*)+($pp-1))/($pp)) จาก `ตาราง`

ในการรับจำนวนหน้าทั้งหมด $pc จึงมีการใช้สูตรที่รู้จักกันดีพอสมควร $pc=(count+per_page-1) div per_page ที่นี่ แต่ปรับให้ใช้ฟังก์ชัน FLOOR แทนการหารจำนวนเต็ม (div) คุณยังสามารถใช้ตัวดำเนินการ DIV ซึ่งได้รับการสนับสนุนใน MySQL มาระยะหนึ่งแล้ว

หากคุณต้องการแสดงเพียงองค์ประกอบเดียวต่อหน้า การสืบค้นข้างต้นสามารถทำให้ง่ายขึ้นได้

เมื่อได้จำนวนหน้า $pc ทั้งหมดแล้ว คุณสามารถแสดงลิงก์ไปยังหน้าทั้งหมดของรายการได้ทันทีโดยใช้การวนซ้ำพร้อมตัวนับในช่วงตั้งแต่ 1 ถึง $pc แต่โดยปกติแล้วจะใช้การนำทางที่ซับซ้อนกว่า ซึ่งลิงก์ไปยังไม่ ทุกหน้าจะแสดงพร้อมกัน แต่จะแสดงเฉพาะหน้าที่มีตัวเลขในช่วงที่จำกัด ทั้งนี้ขึ้นอยู่กับหมายเลขหน้าปัจจุบัน ตัวอย่างเช่นต่อไปนี้เป็นสูตรในการรับค่าที่จำกัดช่วงของ $first และ $last สำหรับการนำทางที่เรียกว่าธนาคาร:

$first=$pn-1-($pn-2)%$ช่วง; $last=$first+$range$pc) ข้อผิดพลาด (404);