สร้าง 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ได้รับเรื่องง่ายมากที่จะได้รับที่เร็วขึ้นด้วยและดูเหมือนว่าจะมีประสิทธิภาพมากเกินไป
