Framework7 এর মধ্যে Virtual List এবং Data Table ব্যবহার

Virtual List কী

Virtual List একটি বিশেষ ধরনের লিস্ট (List) কম্পোনেন্ট যা অনেক বড় ডেটাসেট প্রদর্শন করার সময় পারফরম্যান্স বৃদ্ধি করে। এটি কেবলমাত্র দৃশ্যমান এলিমেন্টগুলো DOM-এ রেন্ডার করে, ফলে লোডিং সময় কমে যায় এবং অ্যাপ চলার সময় দ্রুত প্রতিক্রিয়া পাওয়া যায়।

Virtual List এর ব্যবহার

Virtual List ব্যবহার করে লক্ষ বা তারও বেশি আইটেম নিয়ে কাজ করা সম্ভব, যেখানে সাধারণ লিস্ট DOM-এ সমস্ত আইটেম একবারে রেন্ডার করে। Virtual List শুধু দৃশ্যমান অংশ রেন্ডার করে এবং স্ক্রোল করার সময় নতুন আইটেম লোড করে। এটি স্পর্শনীয় (Smooth) স্ক্রলিং ও দ্রুত লোড নিশ্চিত করে।

Virtual List সেটআপ

Virtual List তৈরি করতে Framework7 এর ডিফল্ট ক্লাস ও পদ্ধতি ব্যবহার করতে হয়। একটি কন্টেইনার (Container) নির্দিষ্ট করে, JavaScript এ Virtual List ইনিশিয়ালাইজ করতে হয় এবং ডেটাসোর্স (Data Source) সরবরাহ করতে হয়।

<div class="list virtual-list"></div>

var virtualList = app.virtualList.create({
  el: '.virtual-list',
  items: myItemsArray,
  itemTemplate:
    '<li>' +
      '<a href="#" class="item-link item-content">' +
        '<div class="item-inner">' +
          '<div class="item-title">{{title}}</div>' +
        '</div>' +
      '</a>' +
    '</li>',
  height: 44,
});

উদাহরণে myItemsArray একটি বিশাল অ্যারেও হতে পারে। Virtual List কেবল দৃশ্যমান আইটেমগুলো রেন্ডার করবে।

Data Table

Data Table কী

Data Table এমন একটি টেবিল আকারের উপস্থাপন (Table Representation) যা ব্যবহারকারীদের সংগঠিতভাবে ডেটা ব্রাউজ, খুঁজে বের, ও ফিল্টার করতে সাহায্য করে। এতে কলাম, সারি, এবং সোর্টিং, ফিল্টারিং, পেজিনেশন (Pagination) ইত্যাদি ফিচার অন্তর্ভুক্ত করা যায়।

Data Table এর ব্যবহার

Data Table ব্যবহার করে ব্যবহারকারীরা ডেটা সহজে পড়তে ও বিশ্লেষণ করতে পারে। এটি মোবাইল এবং ওয়েব উভয় পরিবেশে রেসপন্সিভভাবে কাজ করে। কলামভিত্তিক ফিল্টার বা সার্চ অপশন যুক্ত করে ইউজার এক্সপেরিয়েন্স উন্নত করা যায়।

Data Table সেটআপ

Framework7 এ Data Table তৈরির জন্য HTML টেবিল স্ট্রাকচার ব্যবহার করতে হয়। কলাম শিরোনাম, ডেটা সারি ইত্যাদি HTML ট্যাগ দিয়ে তৈরি করে JavaScript এর মাধ্যমে ফিল্টারিং, সোর্টিং ইত্যাদি ফিচার যোগ করা যায়।

<div class="data-table">
  <table>
    <thead>
      <tr>
        <th class="label-cell">Name</th>
        <th class="numeric-cell">Age</th>
        <th class="label-cell">Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="label-cell">John Doe</td>
        <td class="numeric-cell">30</td>
        <td class="label-cell">USA</td>
      </tr>
      <tr>
        <td class="label-cell">Jane Smith</td>
        <td class="numeric-cell">25</td>
        <td class="label-cell">Canada</td>
      </tr>
    </tbody>
  </table>
</div>

এই টেবিলকে JavaScript এর মাধ্যমে সোর্ট অথবা ফিল্টার করা যায়। Framework7 এর কিছু প্লাগইন বা কাস্টম কোড ব্যবহার করে ডেটা লোড, পেজিনেশন, ফিল্টারিং এবং সোর্টিং যুক্ত করা সম্ভব।

সারাংশ:
Virtual List ব্যবহার করে বিশাল ডেটাসেট খুব কম মেমরি ও উচ্চ পারফরম্যান্সের সাথে প্রদর্শন করা যায়। Data Table ব্যবহার করে সুসংগঠিতভাবে ডেটা দেখানো, সোর্ট ও ফিল্টার করা যায়। এই দুটি টুল অ্যাপকে আরও গতিশীল, রেসপন্সিভ ও কার্যকর করে তোলে।

Virtual List (ভার্চুয়াল লিস্ট) হল Framework7-এর একটি দক্ষ UI কম্পোনেন্ট, যা অসংখ্য আইটেম বিশিষ্ট বড় লিস্ট অত্যন্ত দ্রুত এবং কার্যকরভাবে রেন্ডার করতে সহায়তা করে। সাধারণত লিস্টে হাজার হাজার আইটেম থাকলে DOM এ সমস্ত আইটেম একসাথে রেন্ডার করা পারফরম্যান্স এবং মেমোরির উপর বিরূপ প্রভাব ফেলে। Virtual List কৌশলগতভাবে কেবল দৃশ্যমান আইটেমগুলো রেন্ডার করে, অন্য আইটেমগুলো ভার্চুয়ালি হিসেব করে স্ক্রলিং এর সাথে সাথে ডায়নামিকভাবে DOM এ যুক্ত বা সরিয়ে ফেলে। এর ফলে বড় মাপের লিস্ট অত্যন্ত স্মুথ স্ক্রলিং এবং উন্নত পারফরম্যান্স নিয়ে উপস্থাপন করা যায়।

Virtual List কীভাবে কাজ করে

Virtual List মূলত একটি ইন্টেলিজেন্ট লিস্ট রেন্ডারিং মেকানিজম, যা স্ক্রল পজিশন অনুযায়ী বর্তমানে দৃশ্যমান আইটেমগুলো DOM এ দেখায় এবং অদৃশ্য আইটেমগুলো DOM থেকে সরিয়ে রাখে। যখন ব্যবহারকারী লিস্ট স্ক্রল করেন, Virtual List তখন নতুন আইটেমগুলো DOM এ যোগ করে এবং পুরনো অদৃশ্য আইটেমগুলো সরিয়ে দেয়। এতে করে DOM সবসময় সীমিত সংখ্যক এলিমেন্ট ধারণ করে, যা মেমোরি অপ্টিমাইজ করে এবং পারফরম্যান্স বৃদ্ধি করে।

Virtual List এর প্রধান বৈশিষ্ট্য

• পারফরম্যান্স উন্নতকরণ: হাজার হাজার আইটেম বিশিষ্ট লিস্ট স্ক্রল করলে অনেক সময় ল্যাগ করতে পারে। Virtual List কেবল দৃশ্যমান আইটেম রেন্ডার করে স্ক্রলিংকে স্মুথ রাখে।
• কম মেমোরি ব্যবহার: পুরনো অদৃশ্য আইটেমগুলো সরিয়ে রেখে DOM ছোট রাখা হয়, ফলে কম মেমোরি ব্যবহৃত হয়।
• সহজ ইমপ্লিমেন্টেশন: Framework7 এ Virtual List তৈরি করা সহজ, শুধু কনফিগারেশন এবং কিছু অপশন প্রদান করলেই চলে।

Virtual List উদাহরণ

নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে Virtual List ব্যবহার করে হাজার হাজার আইটেম বিশিষ্ট লিস্ট তৈরি করা হবে।

<div class="page">
  <div class="page-content">
    <div class="list virtual-list"></div>
  </div>
</div>

<script>
  var app = new Framework7();
  var items = [];
  for (var i = 1; i <= 10000; i++) {
    items.push({
      title: 'Item ' + i
    });
  }

  var virtualList = app.virtualList.create({
    // Virtual List কন্টেইনার
    el: '.virtual-list',
    // লিস্টের ডেটা
    items: items,
    // প্রতিটি আইটেম কিভাবে রেন্ডার হবে
    itemTemplate:
      '<li>' +
        '<a href="#" class="item-link item-content">' +
          '<div class="item-inner">' +
            '<div class="item-title">{{title}}</div>' +
          '</div>' +
        '</a>' +
      '</li>',
    // আইটেম উচ্চতা (ফিক্সড হলে ভাল)
    height: app.theme === 'ios' ? 44 : 48,
  });
</script>

উপরের উদাহরণে items অ্যারেতে ১০,০০০ আইটেম আছে। Virtual List কেবল দৃশ্যমান আইটেমগুলো DOM এ রেন্ডার করবে। স্ক্রল করার সময় নতুন আইটেম DOM এ আসবে এবং পুরনো আইটেম DOM থেকে সরিয়ে নেওয়া হবে। এতে স্ক্রলিং হবে দ্রুত ও স্মুথ।

Virtual List ব্যবহারের সুবিধা

• বড় ডেটাসেট সামলানো সহজ: সহজেই কয়েক হাজার আইটেমের লিস্ট তৈরি করা যায়।
• পারফরম্যান্স উন্নয়ন: DOM এ একসাথে সব আইটেম না রেখে কেবল দৃশ্যমান অংশ রেন্ডার করে অ্যাপের পারফরম্যান্স বৃদ্ধি করে।
• স্মুথ ইউজার এক্সপেরিয়েন্স: স্ক্রলিং ল্যাগ কমে আসে, ফলে ব্যবহারকারীদের smoother UX পাওয়া যায়।

Virtual List হল Framework7-এর একটি শক্তিশালী কম্পোনেন্ট, যা বড় আকারের লিস্ট পরিচালনা ও প্রদর্শন করার জন্য আদর্শ। এর মাধ্যমে আপনি খুব সহজে অসংখ্য আইটেম বিশিষ্ট লিস্টে উন্নত পারফরম্যান্স ও ব্যবহারকারী অভিজ্ঞতা নিশ্চিত করতে পারবেন।

Framework7 এ Virtual List একটি শক্তিশালী কম্পোনেন্ট যা বড় আকারের ডেটা লিস্ট দ্রুত এবং কার্যকরভাবে রেন্ডার করতে সাহায্য করে। যখন ডেটার সংখ্যা অনেক বেশি, পুরো ডোমে (DOM) একসাথে সকল আইটেম রেন্ডার করলে পারফরম্যান্সে নেতিবাচক প্রভাব পড়ে। Virtual List কৌশল হল, স্ক্রিনে দৃশ্যমান আইটেমগুলোকে কেবল রেন্ডার করা এবং স্ক্রল করার সাথে সাথে ডেটা আপডেট করা, যাতে ব্রাউজারকে অতিরিক্ত ডোম হ্যান্ডল করতে না হয়।

Virtual List এর ধারণা

Virtual List মূলত এমন একটি প্রযুক্তি যেখানে পুরো ডেটাসেট লোড করা হলেও, দৃশ্যমান ভিউতে থাকা আইটেমগুলো ছাড়া বাকি আইটেমগুলো ডোমে রেন্ডার হয় না। ফলে DOM হালকা থাকে এবং অ্যাপ্লিকেশন স্মুথ স্ক্রলিং ও দ্রুত রেন্ডারিং বজায় রাখতে পারে।

Virtual List তৈরি করার ধাপ

১. HTML কাঠামো তৈরি করা

প্রথমে HTML এ একটি list কন্টেইনার তৈরি করুন, যেখানে Virtual List রেন্ডার হবে:

<div class="page" data-name="home">
  <div class="page-content">
    <div class="list virtual-list media-list" id="my-virtual-list"></div>
  </div>
</div>

উপরে .virtual-list ক্লাস ব্যবহার করা হয়েছে। id="my-virtual-list" দিলে JavaScript এ DOM সিলেক্ট করে Virtual List ইনিশিয়ালাইজ করা সহজ হয়।

২. ডেটাসেট প্রস্তুত করা

ধরি, আমাদের কাছে বড় একটি ডেটাসেট আছে। উদাহরণস্বরূপ, আমরা ১০,০০০ আইটেম তৈরি করবো:

var items = [];
for (var i = 1; i <= 10000; i++) {
  items.push({
    title: 'Item ' + i,
    subtitle: 'Subtitle ' + i
  });
}

৩. Virtual List ইনিশিয়ালাইজ করা

Framework7 এর JavaScript API ব্যবহার করে Virtual List তৈরি করা হয়। Virtual List ইনিশিয়ালাইজ করার সময় আপনাকে আইটেম টেমপ্লেট এবং ডেটাসোর্স নির্ধারণ করতে হবে।

var app = new Framework7();

var virtualList = app.virtualList.create({
  el: '#my-virtual-list',
  items: items,
  itemTemplate: `
    <li>
      <a href="#" class="item-link item-content">
        <div class="item-inner">
          <div class="item-title">{{title}}</div>
          <div class="item-subtitle">{{subtitle}}</div>
        </div>
      </a>
    </li>
  `,
  height: app.theme === 'ios' ? 44 : 48, // প্রতিটি আইটেমের উচ্চতা (এটা নির্ধারণ করে স্ক্রলিং ক্যালকুলেশন)
});

উপরে itemTemplate একটি টেমপ্লেট স্ট্রিং যা প্রতিটি আইটেম কীভাবে রেন্ডার হবে তা নির্ধারণ করে। items প্রপার্টিতে আমাদের ডেটাসোর্স items অ্যারে পাস করা হয়েছে। height প্রপার্টি প্রতিটি আইটেমের উচ্চতা জানায়, যাতে Virtual List সঠিকভাবে স্ক্রল পজিশন হিসাব করতে পারে।

Large Data Handling

Virtual List ব্যবহার করলে হাজার হাজার আইটেমসহ বড় ডেটাসেট পরিচালনা করা সহজ হয়। কারণ মাত্র দৃশ্যমান এলিমেন্টগুলোই DOM এ উপস্থিত থাকবে। স্ক্রল করার সময় পুরোনো এলিমেন্টগুলো DOM থেকে মুছে যাবে এবং নতুন এলিমেন্ট DOM এ যুক্ত হবে।

পারফরম্যান্স টিপস:

• Fixed Height Items: প্রতিটি আইটেমের উচ্চতা নির্দিষ্ট (fixed) রাখুন। Variable height আইটেম Virtual List ব্যবহারের ক্ষেত্রে কম কার্যকর।
• Lazy Loading: প্রয়োজনে ইমেজ বা ভারী কনটেন্ট লোডের ক্ষেত্রে Lazy Loading ব্যবহার করুন।
• Filtering / Searching: Virtual List ব্যবহার করে ফিল্টার বা সার্চ ফাংশনালিটি দ্রুত করা যায়, কারণ শুধু দৃশ্যমান আইটেমগুলোই রেন্ডার হয়।

ডেটা আপডেট করা

Virtual List এ ডেটা আপডেট করার জন্য .replaceAllItems(), .appendItems(), .prependItems() এর মতো মেথড রয়েছে। আপনি API কল করে নতুন ডেটা পাওয়ার পর এই মেথডগুলো ব্যবহার করে UI কে আপডেট করতে পারেন।

// নতুন ডেটা নিয়ে আসা
fetch('https://api.example.com/new-items')
  .then(res => res.json())
  .then(newItems => {
    virtualList.replaceAllItems(newItems);
  });

Virtual List ব্যবহার করে Framework7 এ বড় ডেটাসেট নিয়ে কাজ করা সহজ হয়। DOM এ অপ্রয়োজনীয় এলিমেন্ট এড়িয়ে স্মুথ স্ক্রলিং, দ্রুত রেন্ডারিং, এবং উন্নত পারফরম্যান্স পাওয়া যায়।

Data Table কী

Data Table (ডাটা টেবিল) হল একটি টেবিল ভিত্তিক কন্টেন্ট প্রদর্শন পদ্ধতি যেখানে বিভিন্ন ধরনের ডেটা সারি (row) এবং কলাম (column) আকারে গুছিয়ে দেখানো হয়। HTML ট্যাগ যেমন <table>, <tr>, <th>, <td> ব্যবহার করে সহজেই একটি স্থির Data Table তৈরি করা যায়। এই টেবিলগুলো সাধারণত বিভিন্ন তথ্য যেমন পণ্যের তালিকা, ইউজারের তথ্য, পরিসংখ্যান, রিপোর্ট ইত্যাদি প্রদর্শনে উপযোগী।

স্থির HTML Data Table তৈরি

HTML দিয়ে একটি সাধারণ Data Table তৈরি করতে নিচের উদাহরণটি দেখা যেতে পারে:

<table>
  <thead>
    <tr>
      <th>পণ্যের নাম (Product Name)</th>
      <th>দাম (Price)</th>
      <th>পরিমাণ (Quantity)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$2</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>$3</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

উপরের উদাহরণে <thead> ট্যাগ শিরোনাম (Header) অংশ এবং <tbody> ট্যাগ মূল ডেটা (Data Rows) ধরে রাখে।

Dynamic Table কী

Dynamic Table (ডায়নামিক টেবিল) হল এমন একটি টেবিল যা JavaScript বা অন্য কোনো ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক (যেমন Vue, React, বা Framework7) ব্যবহার করে স্বয়ংক্রিয়ভাবে ডেটা যুক্ত, মুছে ফেলা বা আপডেট করতে পারে। ডেভেলপাররা Ajax/Fetch API এর মাধ্যমে সার্ভার থেকে ডেটা নিয়ে টেবিলে দেখাতে পারে, বা ইউজার ইনপুটের ভিত্তিতে ডেটা পরিবর্তন করতে পারে।

JavaScript ব্যবহার করে Dynamic Table তৈরি

নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি খালি <tbody> এ JavaScript ব্যবহার করে ডেটা যুক্ত করা হচ্ছে:

<table id="productTable">
  <thead>
    <tr>
      <th>পণ্যের নাম (Product Name)</th>
      <th>দাম (Price)</th>
      <th>পরিমাণ (Quantity)</th>
    </tr>
  </thead>
  <tbody>
    <!-- ডায়নামিকভাবে ডেটা যুক্ত হবে -->
  </tbody>
</table>

<script>
  const products = [
    { name: 'Apple', price: '$2', quantity: 50 },
    { name: 'Orange', price: '$3', quantity: 30 }
  ];

  const tableBody = document.querySelector('#productTable tbody');

  products.forEach(product => {
    const row = document.createElement('tr');

    const nameCell = document.createElement('td');
    nameCell.textContent = product.name;
    row.appendChild(nameCell);

    const priceCell = document.createElement('td');
    priceCell.textContent = product.price;
    row.appendChild(priceCell);

    const qtyCell = document.createElement('td');
    qtyCell.textContent = product.quantity;
    row.appendChild(qtyCell);

    tableBody.appendChild(row);
  });
</script>

উপরের উদাহরণে products নামে একটি Array থেকে ডেটা নিয়ে <tbody>-তে সারি তৈরি করা হয়েছে। এই পদ্ধতি ব্যবহার করে Ajax/Fetch এর মাধ্যমে সার্ভার থেকে ডেটা নিয়ে আসা যায় ও টেবিল আপডেট করা যায়।

Data Table আরও উন্নত করা

Dynamic Table তৈরি করার পর আপনি নিচের কাজগুলো করতে পারেন:

সার্চ (Search) ফিল্টার যোগ

ইউজার ইনপুটের ভিত্তিতে JavaScript ব্যবহার করে টেবিলের সারি ফিল্টার করা যায়, যাতে ব্যবহারকারী সহজেই ডেটা খুঁজে পায়।

পেজিনেশন (Pagination)

বড় পরিমাণ ডেটা ছোট ছোট ভাগে দেখাতে Pagination ব্যবহার করা যায়, যাতে প্রতিবার কিছু সংখ্যক রেকর্ড দেখানো হয়।

সোর্টিং (Sorting)

কলামের শিরোনামে ক্লিক করে উর্ধ্বক্রমে বা নিন্মক্রমে সজ্জিত করা যায়, যাতে ডেটা দেখা সহজ হয়।

Dynamic Table আপনার ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ, ব্যবহারবান্ধব এবং ডেটা-চালিত করে তুলতে সাহায্য করে। JavaScript এবং ফ্রন্ট-এন্ড লাইব্রেরি বা ফ্রেমওয়ার্ক ব্যবহার করে ডেটা লোড, আপডেট, এবং পরিচালনা করা সহজ হয়।

Data Table পরিচিতি

Data Table হল একটি টেবিল ফরম্যাটে ডেটা প্রদর্শনের কার্যকর উপায়। এটি সাধারণত কলাম ও সারিভিত্তিক কাঠামোতে থাকে, যেখানে ব্যবহারকারীরা ডেটা দেখা, যাচাই করা ও বিশ্লেষণ করতে পারেন। Data Table-এ Sorting, Filtering, এবং Pagination যোগ করে ব্যবহারকারীকে বড় ডেটাসেট থেকে দ্রুত প্রয়োজনীয় তথ্য বের করতে সহায়তা করা যায়।

Data Table এ Sorting

Sorting কি?

Sorting (সর্টিং) হল ডেটাকে কলামের মান অনুযায়ী ঊর্ধ্বমুখী (Ascending) বা নিম্নমুখী (Descending) ক্রমানুসারে সাজানো। যেমন নামের তালিকাকে অক্ষর ক্রমানুসারে বা তারিখ অনুযায়ী সাজানো।

Sorting যুক্ত করা

Framework7 বা Dom7 দিয়ে একটি Data Table-এর কলাম হেডারে ক্লিক ইভেন্টের মাধ্যমে Sorting ইভেন্ট ট্রিগার করা যায়। এক্ষেত্রে ব্যবহারকারীর ক্লিক অনুযায়ী তুলনামূলক ফাংশন চালিয়ে ডেটাকে Re-render করা হয়।

$('.column-header').on('click', function() {
  var column =$(this).data('column');
  var order = $(this).data('order') === 'asc' ? 'desc' : 'asc';
  sortData(column, order);$(this).data('order', order);
});

উপরে sortData() একটি কাস্টম ফাংশন যা আপনার ডেটাকে Ascending বা Descending ক্রমানুসারে পুনরায় সাজাবে।

Data Table এ Filtering

Filtering কি?

Filtering (ফিল্টারিং) ডেটাকে নির্দিষ্ট শর্ত অনুযায়ী সীমিত করে। যেমন কোনো নির্দিষ্ট নাম, ক্যাটাগরি বা মূল্যের রেঞ্জ অনুযায়ী মাত্র কিছু রো প্রদর্শন করা।

Filtering যুক্ত করা

একটি সার্চ ইনপুট ব্যবহার করে Filtering করা যায়। ইনপুটে কিছু টাইপ করার সাথে সাথে টেবিলের ডেটা থেকে Filter করে মিল থাকা রোগুলো প্রদর্শন করা হয়।

<input type="text" id="filterInput" placeholder="Type to filter">

$('#filterInput').on('input', function () {
  var query =$(this).val().toLowerCase();
  filterData(query); // কাস্টম ফাংশন যা ডেটা ফিল্টার করবে
});

filterData() ফাংশনে আপনি ডেটাসেট থেকে query এর সাথে মিলে এমন রো সিলেক্ট করবেন এবং অন্যগুলো হাইড বা ফিল্টার আউট করবেন।

Data Table এ Pagination

Pagination কি?

Pagination (পেজিনেশন) বড় ডেটাসেটকে ছোট ছোট পৃষ্ঠায় বিভক্ত করে প্রদর্শন করার পদ্ধতি। এতে ব্যবহারকারী একবারে সম্পূর্ণ ডেটাসেট না দেখে পর্যায়ক্রমে বিভিন্ন পেজে বিভক্ত ডেটা দেখতে পারে।

Pagination যুক্ত করা

Pagination তৈরি করতে আপনি প্রতি পৃষ্ঠায় কতগুলো রো দেখাবেন সেটি নির্ধারণ করবেন। ধরুন প্রতি পৃষ্ঠায় ১০টি রো দেখাবেন।

var currentPage = 1;
var rowsPerPage = 10;

Pagination UI (নেভিগেশনের জন্য আগের, পরের বাটন বা পেজ নাম্বার) তৈরি করে বাটনে ক্লিক ইভেন্ট যোগ করুন:

$('#nextPageBtn').on('click', function() {
  currentPage++;
  renderTableData();
});$('#prevPageBtn').on('click', function() {
  if (currentPage > 1) {
    currentPage--;
    renderTableData();
  }
});

renderTableData() ফাংশনে currentPage ও rowsPerPage অনুযায়ী ডেটার নির্দিষ্ট অংশ সিলেক্ট করে টেবিলে প্রদর্শন করবেন।

Sorting, Filtering এবং Pagination একসাথে ব্যবহারের কৌশল

একই Data Table-এ একাধিক ফিচার একসঙ্গে ব্যবহার করা হলে, ডেটা প্রসেস করার সময় একটি যৌক্তিক ধাপ অনুসরণ করুন:

1. Original Data Store: মূল ডেটাসেট একটি ভেরিয়েবল বা অবজেক্টে সংরক্ষণ করুন।
2. Filtering: ফিল্টার এপ্লাই করে একটি subset ডেটা তৈরি করুন।
3. Sorting: ফিল্টার করা ডেটাতে Sorting এপ্লাই করুন।
4. Pagination: Sort করা ডেটা থেকে বর্তমান পেজের জন্য প্রয়োজনীয় রো সিলেক্ট করে রেন্ডার করুন।

প্রতিবার ব্যবহারকারী ফিল্টার বা সর্টিং পরিবর্তন করলে Pagination রিসেট করুন বা সামঞ্জস্য করুন।

Data Table-এ Sorting, Filtering ও Pagination ব্যবহারে ব্যবহারকারীরা বড় ডেটাসেট থেকে দ্রুত প্রয়োজনীয় তথ্য খুঁজে পায়। এভাবে ডেটা ম্যানেজমেন্ট আরও কার্যকর, স্পষ্ট ও ব্যবহারে সহজ হয়ে ওঠে।