การแบ่งหน้าแบบปรับได้ Bootstrap - การแบ่งหน้า (บล็อกการนำทางสำหรับการแบ่งหน้า) การปรับขนาดบล็อกการนำทาง

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

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

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

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

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

ขั้นแรกคุณต้องมีปลั๊กอินซึ่งก็คือแหล่งที่มาซึ่งมี jquery javascript และไฟล์สไตล์ 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"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ในบทความนี้ เราจะดูกระบวนการสร้างองค์ประกอบเว็บอินเตอร์เฟสเป็นบล็อกการนำทางสำหรับการแบ่งหน้า ใน 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 ยังให้คุณจัดแนวตามขอบที่แตกต่างกันได้ ทำได้โดยการเพิ่มคลาสก่อนหน้าปุ่มแรก และถัดจากปุ่มที่สอง คลาสก่อนหน้าจัดแนวลิงก์ไปทางซ้าย และถัดไป – ไปทางขวา

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

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

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

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

ภารกิจหนึ่งของการแบ่งหน้าคือการส่งออกพร้อมกันขององค์ประกอบทั้งหมด แต่มีจำนวนจำกัด กล่าวคือไม่เกินองค์ประกอบ $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); elseif ($result=mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$ pn-1-($pn-2)%$range; $last=$first+$range>