ฉันค่อนข้างกังวลว่าจะสร้างตารางในบล็อกส่วนตัวของฉันได้อย่างไร และเพิ่มฟังก์ชันการทำงานของตารางที่จะช่วยให้ฉันเข้าถึงข้อมูลใด ๆ ได้อย่างรวดเร็ว ในกรณีที่ข้อมูลในตารางมีขนาดใหญ่เกินไป การเพิ่มเลขหน้ามีความจำเป็นอย่างยิ่ง นอกจากนี้ การโหลดข้อมูลในตารางอย่างมีประสิทธิภาพที่สุดเท่าที่จะเป็นไปได้จะช่วยปรับปรุงประสบการณ์ในการทำงานกับแอปพลิเคชันบล็อกของฉัน
การสร้างตารางในขวดเป็นเรื่องง่ายมาก สิ่งที่คุณต้องทำคือกำหนดโครงสร้างตารางและแสดงผู้ใช้ทั้งหมดในตาราง
ตารางพื้นฐานคือตารางที่แสดงข้อมูลทั้งหมดในฐานข้อมูล เช่นเดียวกับตารางบูทสแตรป ฉันเรียกมันว่าพื้นฐานในแง่ที่ว่ามันค่อนข้างดีสำหรับจุดประสงค์ในการแสดงข้อมูลสั้นๆ อย่างไรก็ตาม การแสดงข้อมูลขนาดใหญ่ไม่ได้มีประสิทธิภาพมากนัก
ข้อบกพร่องที่ใหญ่ที่สุดของตารางพื้นฐาน ซึ่งแสดงข้อมูลผู้ใช้ทั้งหมดในฐานข้อมูลของเราก็คือ ตารางนี้จะแสดงทั้งตารางก่อนที่จะเริ่มการแบ่งหน้าเป็นเวลาไม่กี่วินาทีในการโหลดหน้าเว็บ ในกรณีที่ข้อมูลมีมากเกินไป ขนาดใหญ่ ผู้ใช้จะต้องอดทนรอในขณะที่เส้นทาง 'ทำสิ่งนั้น' ก่อนที่จะแสดงตารางสุดท้ายจริง
การใช้ Ajax ช่วยแก้ปัญหาที่ตารางพื้นฐานต้องเผชิญ ที่นี่ตารางจะถูกโหลดว่างเปล่าเป็นครั้งแรกเมื่อมีการร้องขอการเข้าถึงตาราง ajax จุดสิ้นสุดที่สองใช้เพื่อแสดงข้อมูลในตาราง อย่างไรก็ตาม ยังคงมีปัญหาเล็กน้อยกับตารางนี้ หากข้อมูลมีขนาดใหญ่เกินไป ตารางจะว่างเปล่าสักครู่ก่อนที่จะแสดงข้อมูลจริง เนื่องจากต้องโหลดทั้งตารางก่อน และอาจใช้เวลานานขึ้นอยู่กับขนาดของข้อมูล
ด้วยตารางฝั่งเซิร์ฟเวอร์ คุณลักษณะทั้งหมด เช่น การเพจ การค้นหา และการเรียงลำดับจะถูกนำไปใช้บนฝั่งเซิร์ฟเวอร์ นี่เป็นวิธีที่มีประสิทธิภาพมากในการแสดงข้อมูลขนาดใหญ่ เมื่อมีการร้องขอตารางฝั่งเซิร์ฟเวอร์ที่มีการแบ่งหน้า เฉพาะข้อมูลที่พบในเพจนั้นเท่านั้นที่จะแสดง หากผู้ใช้นำทางไปยังหน้าอื่น ระบบจะทำการร้องขอข้อมูลใหม่ในหน้าถัดไป ด้วยเหตุนี้จึงโหลดและแสดงเฉพาะข้อมูลที่จำเป็นเท่านั้น เป็นวิธีแก้ปัญหาที่ดีกว่า แต่ต้องเกี่ยวข้องกับการนำไปปฏิบัติมากกว่าเล็กน้อย คุณสมบัติต่างๆ เช่น การค้นหาและการเรียงลำดับ จะต้องย้ายจากฝั่งไคลเอ็นต์ไปยังฝั่งเซิร์ฟเวอร์
หมายเหตุ: หากคุณทดสอบแอปพลิเคชันบนเซิร์ฟเวอร์ Heroku คุณอาจพบ "ข้อผิดพลาดที่ไม่คาดคิด" เนื่องจาก Heroku มีพื้นที่จัดเก็บฐานข้อมูลในปริมาณที่จำกัด ปัจจุบันแอปพลิเคชันสร้างผู้ใช้หลายร้อยรายโดยอัตโนมัติ ซึ่งเมื่อคุณเข้าถึงแอปพลิเคชัน Heroku อาจปิดใช้งานฐานข้อมูลเนื่องจากเกินขีดจำกัดพื้นที่เก็บข้อมูลในเวอร์ชันระดับฟรี
หากคุณสนใจที่จะทดสอบแอปพลิเคชัน คุณสามารถใช้คำสั่งต่อไปนี้เพื่อเรียกใช้แอปพลิเคชัน:
โคลนที่เก็บนี้:
$ git clone [email protected]:GitauHarrison/beautiful-flask-tables.git
เปลี่ยนไดเรกทอรีเพื่อเข้าถึงแอปพลิเคชัน:
$ cd beautiful-flask-tables
สร้างและเปิดใช้งานสภาพแวดล้อมเสมือน:
$ mkvirtualenv flask-tables
ติดตั้งการพึ่งพา:
$ pip3 install -r requirements.txt
เรียกใช้แอปพลิเคชัน:
$ flask run
เปิดแอปพลิเคชันในเบราว์เซอร์ของคุณที่ทำงานบนพอร์ตภายในเครื่อง 5000:
การใช้ JQuery ล้าสมัยแล้ว สิ่งนี้ทำให้ DataTables.js ล้าสมัยเพราะต้องอาศัย JQuery ลองดูเวอร์ชันอัปเดตของโปรเจ็กต์นี้ที่นี่ ซึ่งฉันจะแสดงวิธีทำงานกับ Grid.js