สร้าง Vue Js กับ DataTables มันดีจริงๆนะ

ฉันพึ่งเริ่มใช้ Vue Js ไม่นานมานี้ ดี งั้นเราจะหามาโดยเฉพาะ เมื่อเราได้เริ่มต้นการเรียน Vue Js เพื่อนำไปใช้ในโปรเจค

โปคเจคก่อนๆจะใช้พวก NodeJs/AngularJS มีความยุ่งยากค่อนข้างมาก ซึ่งจะถูกสร้างขึ้นมาใหม่ด้วย Lavavel แต่ในส่วนของ frontend ยังมีความต้องการให้ real-timey มากกว่าเดิม

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

เมื่อตอนที่ผมสร้างขึ้นในเชิงมุมฉันก็สามารถที่จะทำให้การใช้คำสั่งที่กำหนดเองเชิงมุมที่ผมพบว่ามันก็ไม่เหมาะ

แต่ทำงานส่วนใหญ่ ก็ไม่สามารถที่จะติดตามอะไรที่คล้ายกันสำหรับ Vue ดังนั้นจะสร้างสิ่งที่ตัวเอง

ครั้งแรกที่ฉันได้ทำสิ่งที่ใช้ไม่ได้ที่สุดและพยายามที่จะทำให้ตารางที่มี Vue โดยตรงและจากนั้นพยายามที่จะกำหนดเป้าหมายที่มี DataTables ผมสามารถที่จะทำให้การทำงานเป็นระยะ ๆ แต่ไม่สามารถรับมันทำงานได้ถ้าพยายามที่จะเปลี่ยนแปลงข้อมูลแบบไดนามิก

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

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

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

ตกลงช่วยให้ได้รับมัน ดังนั้นผมจึงมีคุณลักษณะที่คำนวณได้ในองค์ประกอบ Vue ของฉันระดับบนสุดที่จะนำสิ่งที่ชุดของฉันมันและใช้พวงของฟิลเตอร์ให้มัน (ตามที่กำหนดไว้ในส่วนของเด็กอื่น ๆ ) หนึ่งในองค์ประกอบสำหรับการแสดงผลของข้อมูลนี้จะแสดงในมุมมองบล็อกที่มีเพจเจอร์เล็ก ๆ น้อย ๆ ที่ดีและอื่น ๆ มันเป็นข้อมูลทั้งหมดภายใน บริษัท การเงินดังนั้นโชคร้ายที่ฉันไม่สามารถจริงๆแชร์ภาพหน้าจอ การแสดงผลอื่น ๆ ที่เป็นมุมมองตารางและเนื่องจากจำนวนของเขตข้อมูลจำเป็นที่จะต้องรวมอยู่ในตารางที่มีขนาดใหญ่ค่อนข้างฉันต้องการที่จะสามารถแก้ไขส่วนหัวและคอลัมน์ด้านซ้ายดังนั้นตารางสามารถเลื่อนและคุณยังรู้ว่าสิ่งที่รายการ และคอลัมน์ที่คุณกำลังมองหาที่ ใส่ DataTables

filteredData เป็นค่าที่คำนวณในส่วนของส่วนของ parent เพื่อที่ว่าเวลาใด ๆ ที่ฉันเปลี่ยนแปลงใด ๆ ของฟิลเตอร์ที่จะเปลี่ยนแปลงชุดข้อมูลที่ได้รับการกรองผ่านเข้าไปในองค์ประกอบตาราง

ดังนั้น วิธีการและเหตุผลการทำงานหรือไม่

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

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

ทำไมVueทำไมไม่ยึดติดอยู่กับAngular?

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

ผมค่อนข้างมีความสุขกับVueป่านนี้ มันไม่ได้พยายามที่จะทำมากที่สุดเท่าที่จะAngularซึ่งเป็นเพียงดีกับฉันตั้งแต่ส่วนหนึ่งของการเขียนนี้มีการเคลื่อนไหวของการจัดการข้อมูลที่หนักไปทางด้านเซิร์ฟเวอร์เพื่อให้ส่วนหน้าส่วนใหญ่เป็นเพียงความต้องการที่จะนำเสนอข้อมูลที่ไม่ ทำพวงของการจัดการของมันเกินไปและVueได้รับเรื่องง่ายมากที่จะได้รับที่เร็วขึ้นด้วยและดูเหมือนว่าจะมีประสิทธิภาพมากเกินไป

Like what you read? Give Aphisit Subbradit a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.