การใช้งาน list.js สำหรับการ filter, search หรือ sort DOM Element

List.js เป็น Library สำหรับการ filter, search หรือ sort DOM Element เป็นการทำงานในฝั่งของ Client ไม่ต้องทำการส่งข้อมูลไป Query บน Server จะลดภาระของการทำงานในฝั่ง Server ลง โดยการใช้งาน List.js นั้นก็ไม่ยาก เพียงแค่เรากำหนด Class ใน Element ต่างๆให้ถูกต้อง เราก็มี textbox สำหรับการ Search และ ปุ่มสำหรับการ sort

ขั้นตอนการใช้งานมีดังนี้

1. เริ่มต้น Download List.js

2. ทำการสร้าง list ของรายการที่ต้องการ Search หรือ Sort ตามโครงสร้างนี้

ตามตัวอย่างนี้จะมี list อยู่ 2 รายการ

หลังจากนั้น new List ในส่วนของ JavaScript ต้องระวังว่าในส่วนของ JavaScript นั้นต้องถูก run หลังจากี่ Load DOM element ทั้งหมดแล้ว อาจใช้ $(document).ready() ใน jQuery หรือ เอา JavaScript วางไว้ด้านล่างหลังจาก </body>

ถ้าใน li มีแค่ name ใน valueNames ก็กำหนดแค่ name ก็ได้

ถือว่าเป็น library ที่น่าจะนำไปใช้งานได้ดีทีเดียว

รับเขียนโปรแกรมและสอนเขียนโปรแกรมด้วย PHP
ติดต่อสอบถามรายละเอียดเพิ่มเติมได้ที่ 062-419-9498
หรือ E-mail: training@irobust.co.th

Leave a Reply

Your email address will not be published. Required fields are marked *