ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering

ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering

ใช้งาน isotope javascript สำหรับการกรองข้อมูล filtering

isotope เป็น javascript library ใช้สำหรับคัดกรองข้อมูลให้แสดงผลเฉพาะข้อมูลที่เราต้องการ ยกตัวอย่างเช่น หากเราทำเว็บไซต์เกี่ยวกับอาหาร ภายในเว็บไซต์อาจจะมีอาหารอยู่หลากหลายประเภท อาหารคาว อาหารหวาน ของทานเล่น อารทะเล เป็นต้น

เราสามารถใช้ความสามารถของ isotope ในการกรองข้อมูลอาหารในขั้นตอนของการค้นหาได้ ตัวอย่างเช่น ถ้าเราต้องการให้แสดงเฉพาะอาหารประเภทของทานเล่น ระบบของ isotope จะสามารถ filter ข้อมูล รายละเอียด รูปภาพ ราคา และแสดงผลเฉพาะข้อมูลที่ตรงกับที่เราเลือกได้แบบไม่ต้องเปลี่ยนหน้า

ตัวอย่างการกรองข้อมูลด้วย isotope filtering

วิธีใช้งาน isotope

• 1. ดาวน์โหลดและเรียกใช้งานไฟล์ isotope library ที่เว็บไซต์ https://isotope.metafizzy.co

  <script type="text/javascript" src="js/isotope/isotope.pkgd.min.js"></script>

• 2. สร้างไฟล์ html select option ทำตัวเลือกสำหรับกรองข้อมูล

  <select id="isotope_category">
    <option data-filter="*">ทั้งหมด</option> 
    <option data-filter=".dessert">ขนมหวาน</option>
    <option data-filter=".snack">ของทานเล่น</option>
    <option data-filter=".dinner">อาหารเย็น</option>
  </select>

  จากโค๊ดตัวอย่างด้านบนจะเห็นว่า เรามีหมวดหมู่ของอาหารอยู่ 3 ประเภท ข้อมูลที่จะนำไปใช้สำหรับกรองข้อมูลจะอยู่ในส่วนของ attribute data-filter ข้อมูลจะเป็นชื่อคลาส เช่น .dessert คือขนมหวาน แต่ถ้าเลือกทั้งหมดข้อมูลที่ส่งไปจะเป็นเครื่องหมาย * ( ดอกจัน )

• 3. สร้างไฟล์ html สำหรับแสดงไอเทมอาหาร วิธีการคือให้นำข้อมูล data-filter ที่เราได้เขียนไว้ในข้อ 2 มาใส่กำกับไปในคลาสที่ครอบไอเทมนั้น ๆ ที่มีข้อมูลตรงกัน ตัวอย่างเช่น

  <ul class="isotope_container"> // isotope_container คือคลาสหลักที่จะนำไปเขียนเขียนใน js
      <li class="element-item dessert">กล้วยเชื่อม</li> // element-item คือคลาสที่กำหนดไว้ให้สามารถ filter ได้
      <li class="element-item dessert">ฝอยทอง</li>
      <li class="element-item dessert">ทองหยิบ</li>
      <li class="element-item dinner">ต้มยำ</li>
      <li class="element-item dinner">แดงส้มชะอมไข่</li>
      <li class="element-item snack">มันฝรั่งทอด</li>
  </ul>

• 4. เขียน javascript เพื่อใช้งาน isotope filtering

  var $isotope_container = $('.isotope_container').isotope({ // กำหนด container ที่ครอบไอเทมทั้งหมดอยู่
    itemSelector: '.element-item' // กำหนด element class ที่จะให้สามารถ filter ได้
  });
  
  $('#isotope_category').on('change', function() { // จับ event change ของ select option
    var selected = $(this).find('option:selected'); // ตรวจสอบว่าเลือกไปที่หมวดหมู่อาหารอะไร
    var filterValue = selected.attr('data-filter'); // เก็บข้อมูล attribute data-filter
    $isotope_container.isotope({ filter: filterValue }); // ใช้คำสั่ง filter ของ isotope
  });

นอกจากการ filtering ข้อมูลแล้ว isotope ยังสามารถจัดเรียงข้อมูล sorting การจัดรูปแบบของ html element ( layout ) โดยใช้ javascript ในการจัดการ