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

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



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

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



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


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


isotope_javascript_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 ในการจัดการ