JavaScript দিয়ে ফিল্টার টেবিল তৈরির পদ্ধতি

ভূমিকা

বড় ডেটা সেট वाले টেবিলগুলোতে সার্চ বা ফিল্টার ফাংশনালিটি যোগ করা ব্যবহারকারীর অভিজ্ঞতা বাড়াতে সাহায্য করে। এই টিউটোরিয়ালে আমরা JavaScript ব্যবহার করে একটি সার্চযোগ্য টেবিল তৈরি করব।

সম্পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  * {
    box-sizing: border-box;
  }
  .searchField {
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
  }
  .birthDayTable {
    border-collapse: collapse;
    width: 100%;
    font-size: 18px;
  }
  .birthDayTable th, .birthDayTable td {
    text-align: left;
    padding: 12px;
  }
  .birthDayTable tr {
    border-bottom: 4px solid #ddd;
  }
  .birthDayTable tr.header, .birthDayTable tr:hover {
    background-color: #f1f1f1;
  }
</style>
</head>
<body>
<h1>ফিল্টার টেবিল উদাহরণ</h1>
<input type="text" class="searchField" placeholder="বন্ধুর নাম:" />
<table class="birthDayTable">
  <tr class="header">
    <th style="width:60%;">বন্ধুরা</th>
    <th style="width:40%;">জন্মের মাস</th>
  </tr>
  <tr>
    <td>শন</td>
    <td>জানুয়ারি</td>
  </tr>
  <tr>
    <td>রন</td>
    <td>মার্চ</td>
  </tr>
  <tr>
    <td>জ্যাক</td>
    <td>ডিসেম্বর</td>
  </tr>
  <tr>
    <td>সাইমন</td>
    <td>ফেব্রুয়ারি</td>
  </tr>
  <tr>
    <td>রিকি</td>
    <td>নভেম্বর</td>
  </tr>
</table>
<script>
  document.querySelector(".searchField").addEventListener("keyup", searchFunction);
  function searchFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.querySelector(".searchField");
    filter = input.value.toUpperCase();
    table = document.querySelector(".birthDayTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[0];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
</script>
</body>
</html>

কোড ব্যাখ্যা

HTML কাঠামো

• একটি সার্চ ইনপুট ফিল্ড (.searchField)
• হেডার রো সহ একটি টেবিল (.birthDayTable)
• প্রতিটি রোতে বন্ধুর নাম এবং জন্মের মাস

CSS স্টাইলিং

• বক্স-সাইজিং: বর্ডার-বক্স সব এলিমেন্টে প্রয়োগ
• সার্চ ফিল্ড ফুল প্রস্থে, বড় ফন্ট এবং প্যাডিং
• টেবিলে কলাপ্সড বর্ডার, হোভার ইফেক্ট

JavaScript লজিক

1. ইভেন্ট লিসেনার - keyup ইভেন্টে searchFunction কল করে
2. searchFunction():
   • ইনপুট মান বড় হাতের অক্ষরে রূপান্তর
   • টেবিলের সব রো.iterate করে
   • প্রথম সেলের টেক্সট চেক করে ফিল্টার মিল খুঁজে
   • মেললে রো দেখায়, না মেললে লুকায়

ব্যবহার পদ্ধতি

সার্চ বক্সে টাইপ করার সাথে সাথে টেবিলের ডেটা রিয়েল-টাইমে ফিল্টার হবে। উদাহরণস্বরূপ "Ja" টাইপ করলে "January" এবং "Jack" वाली রোগুলো দেখাবে।

উন্নত করার সুযোগ

• দেয়েরী বাউন্স (debounce) যোগ করে পারফরম্যান্স বাড়ানো
• কেস-ইনসেনসিটিভ সার্চ ইতিমধ্যে আছে
• মাল্টিপল কলামে সার্চ যোগ করা সম্ভব