Pagination এবং Filtering Functionality যোগ করা

ডেটা টেবিল (Data Table) এবং কন্টেন্ট প্রদর্শন - মেটেরিয়াল ডিজাইন লাইট (Material Design Lite) - Web Development

283

Material Design Lite (MDL) ব্যবহার করে আপনি সহজেই Pagination এবং Filtering ফিচার তৈরি করতে পারেন, যা বড় পরিমাণের কন্টেন্টের মধ্যে ইউজারদের সহজে নেভিগেট করতে সহায়তা করে। এই টিউটোরিয়ালে, আমরা MDL ব্যবহার করে Pagination এবং Filtering ফিচার যোগ করার পদ্ধতি দেখব।

Pagination (পেজিনেশন) কী?

Pagination হল এমন একটি পদ্ধতি, যা ব্যবহারকারীদের বৃহৎ পরিমাণের ডেটা বা কন্টেন্টের মধ্যে পেজ বাই পেজ নেভিগেট করার সুযোগ দেয়। এটি বিশেষভাবে ওয়েবসাইটে বড় লিস্ট বা টেবিলের কন্টেন্ট দেখানোর সময় ব্যবহৃত হয়, যাতে এক পেজে সব কন্টেন্ট না দেখিয়ে, একসাথে মাত্র একটি নির্দিষ্ট পরিমাণ কন্টেন্ট দেখানো হয়।

MDL-এ Pagination খুব সহজে তৈরি করা যায়, যেহেতু MDL-এ এর জন্য প্রস্তুত স্টাইলিং এবং ফাংশনালিটি আছে।

MDL Pagination উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Pagination Example</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Content List -->
  <ul class="mdl-list">
    <li class="mdl-list__item">Item 1</li>
    <li class="mdl-list__item">Item 2</li>
    <li class="mdl-list__item">Item 3</li>
    <li class="mdl-list__item">Item 4</li>
    <li class="mdl-list__item">Item 5</li>
    <li class="mdl-list__item">Item 6</li>
    <li class="mdl-list__item">Item 7</li>
    <li class="mdl-list__item">Item 8</li>
    <li class="mdl-list__item">Item 9</li>
    <li class="mdl-list__item">Item 10</li>
  </ul>

  <!-- Pagination -->
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
        Prev
      </button>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <span>Page 1 of 3</span>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
        Next
      </button>
    </div>
  </div>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
</body>
</html>

ব্যাখ্যা:

mdl-list: MDL এর লিস্ট তৈরি করার জন্য ব্যবহৃত ক্লাস।
mdl-list__item: লিস্টের প্রতিটি আইটেমের জন্য ব্যবহৃত ক্লাস।
mdl-button: পেজিনেশন বাটন তৈরির জন্য ব্যবহৃত ক্লাস।
mdl-grid এবং mdl-cell: পেজিনেশন বাটনগুলিকে সঠিকভাবে সজ্জিত করতে ব্যবহৃত গ্রিড সিস্টেম।

এটি একটি সিম্পল পেজিনেশন তৈরি করবে যেখানে Prev এবং Next বাটনসহ পেজ নম্বর দেখানো হবে।

Filtering (ফিল্টারিং) কী?

Filtering হলো একটি প্রক্রিয়া যা ব্যবহারকারীদের বড় ডেটাসেটের মধ্যে নির্দিষ্ট তথ্য বা কন্টেন্ট খুঁজে বের করতে সহায়তা করে। এটি সাধারণত ওয়েবসাইটে লিস্ট, টেবিল, বা ডেটার অন্যান্য আকারে ব্যবহার হয়।

MDL-এ Filtering ফিচার যোগ করার জন্য, আপনি input ফিল্ড এবং JavaScript ব্যবহার করতে পারেন, যা ডাইনামিকভাবে কন্টেন্ট ফিল্টার করে।

MDL Filtering উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MDL Filtering Example</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Filter Input -->
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="filter-input" oninput="filterList()">
    <label class="mdl-textfield__label" for="filter-input">Filter Items...</label>
  </div>

  <!-- Content List -->
  <ul class="mdl-list" id="item-list">
    <li class="mdl-list__item">Item 1</li>
    <li class="mdl-list__item">Item 2</li>
    <li class="mdl-list__item">Item 3</li>
    <li class="mdl-list__item">Item 4</li>
    <li class="mdl-list__item">Item 5</li>
    <li class="mdl-list__item">Item 6</li>
  </ul>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
  <script>
    function filterList() {
      var input = document.getElementById("filter-input");
      var filter = input.value.toUpperCase();
      var ul = document.getElementById("item-list");
      var li = ul.getElementsByTagName("li");

      for (var i = 0; i < li.length; i++) {
        var item = li[i];
        if (item.innerHTML.toUpperCase().indexOf(filter) > -1) {
          item.style.display = "";
        } else {
          item.style.display = "none";
        }
      }
    }
  </script>
</body>
</html>

ব্যাখ্যা:

mdl-textfield: MDL এর টেক্সট ইনপুট ফিল্ড তৈরি করার জন্য ব্যবহৃত ক্লাস।
oninput="filterList()": ইনপুট ফিল্ডে টাইপ করার সাথে সাথে filterList() ফাংশন কল করা হবে, যা কন্টেন্ট ফিল্টার করবে।
filterList(): JavaScript ফাংশন, যা লিস্টের আইটেমগুলিকে ইনপুট অনুসারে ফিল্টার করে।

এই কোডটি একটি filtering ফিচার তৈরি করবে, যেখানে ব্যবহারকারী ইনপুট ফিল্ডে লিখলে, কেবলমাত্র সেগুলিই প্রদর্শিত হবে যেগুলি ফিল্টারের সাথে মিলে।

Pagination এবং Filtering একসাথে ব্যবহার করা

Pagination এবং Filtering একসাথে ব্যবহার করে আপনি আরও উন্নত এবং ইন্টারঅ্যাকটিভ কন্টেন্ট প্রদর্শন ব্যবস্থা তৈরি করতে পারেন। উদাহরণস্বরূপ, একটি পেজের কন্টেন্টের মধ্যে Pagination দিয়ে বিভক্ত করা এবং Filtering ফিচারের মাধ্যমে ব্যবহারকারীদের দ্রুত নির্দিষ্ট কন্টেন্ট খুঁজে বের করার সুবিধা দেওয়া।

উদাহরণ: Pagination এবং Filtering একসাথে

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pagination & Filtering</title>

  <!-- MDL CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.css">
</head>
<body>

  <!-- Filter Input -->
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="filter-input" oninput="filterList()">
    <label class="mdl-textfield__label" for="filter-input">Search Items...</label>
  </div>

  <!-- Content List -->
  <ul class="mdl-list" id="item-list">
    <li class="mdl-list__item">Item 1</li>
    <li class="mdl-list__item">Item 2</li>
    <li class="mdl-list__item">Item 3</li>
    <li class="mdl-list__item">Item 4</li>
    <li class="mdl-list__item">Item 5</li>
    <li class="mdl-list__item">Item 6</li>
    <li class="mdl-list__item">Item 7</li>
    <li class="mdl-list__item">Item 8</li>
    <li class="mdl-list__item">Item 9</li>
    <li class="mdl-list__item">Item 10</li>
  </ul>

  <!-- Pagination -->
  <div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
        Prev
      </button>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <span>Page 1 of 3</span>
    </div>
    <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet">
      <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
        Next
      </button>
    </div>
  </div>

  <!-- MDL JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.3.0/material.min.js"></script>
  <script>
    function filterList() {
      var input = document.getElementById("filter-input");
      var filter = input.value.toUpperCase();
      var ul = document.getElementById("item-list");
      var li = ul.getElementsByTagName("li");

      for (var i = 0; i < li.length; i++) {
        var item = li[i];
        if (item.innerHTML.toUpperCase().indexOf(filter) > -1) {
          item.style.display = "";
        } else {
          item.style.display = "none";
        }
      }
    }
  </script>

</body>
</html>

সারাংশ

Pagination এবং Filtering ফিচার MDL ব্যবহার করে খুবই সহজে তৈরি করা যায়। Pagination ব্যবহারকারীদের কন্টেন্টের মধ্যে পেজ বাই পেজ নেভিগেট করার সুযোগ দেয়, এবং Filtering ব্যবহারকারীদের নির্দিষ্ট কন্টেন্ট খুঁজে বের করার সহায়তা করে। MDL-এ pagination এবং filtering সহজে কাস্টমাইজ করা যায় এবং এগুলো আপনার ওয়েবসাইট বা অ্যাপ্লিকেশনের ইউজার অভিজ্ঞতা উন্নত করতে সাহায্য করে।

Content added By

Rezwan Siddiki Tamim

MDL এর Data Table Component ব্যবহার Sortable এবং Searchable Data Table তৈরি Custom Data Table Layouts এবং Styles

Pagination এবং Filtering Functionality যোগ করা

Pagination (পেজিনেশন) কী?

MDL Pagination উদাহরণ

ব্যাখ্যা:

Filtering (ফিল্টারিং) কী?

MDL Filtering উদাহরণ

ব্যাখ্যা:

Pagination এবং Filtering একসাথে ব্যবহার করা

উদাহরণ: Pagination এবং Filtering একসাথে

সারাংশ

Promotion

Satt AI

Hi, আমি SATT AI!

Pagination এবং Filtering Functionality যোগ করা

Pagination (পেজিনেশন) কী?

MDL Pagination উদাহরণ

ব্যাখ্যা:

Filtering (ফিল্টারিং) কী?

MDL Filtering উদাহরণ

ব্যাখ্যা:

Pagination এবং Filtering একসাথে ব্যবহার করা

উদাহরণ: Pagination এবং Filtering একসাথে

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!