Data Table পরিচিতি
Data Table হল একটি টেবিল ফরম্যাটে ডেটা প্রদর্শনের কার্যকর উপায়। এটি সাধারণত কলাম ও সারিভিত্তিক কাঠামোতে থাকে, যেখানে ব্যবহারকারীরা ডেটা দেখা, যাচাই করা ও বিশ্লেষণ করতে পারেন। Data Table-এ Sorting, Filtering, এবং Pagination যোগ করে ব্যবহারকারীকে বড় ডেটাসেট থেকে দ্রুত প্রয়োজনীয় তথ্য বের করতে সহায়তা করা যায়।
Data Table এ Sorting
Sorting কি?
Sorting (সর্টিং) হল ডেটাকে কলামের মান অনুযায়ী ঊর্ধ্বমুখী (Ascending) বা নিম্নমুখী (Descending) ক্রমানুসারে সাজানো। যেমন নামের তালিকাকে অক্ষর ক্রমানুসারে বা তারিখ অনুযায়ী সাজানো।
Sorting যুক্ত করা
Framework7 বা Dom7 দিয়ে একটি Data Table-এর কলাম হেডারে ক্লিক ইভেন্টের মাধ্যমে Sorting ইভেন্ট ট্রিগার করা যায়। এক্ষেত্রে ব্যবহারকারীর ক্লিক অনুযায়ী তুলনামূলক ফাংশন চালিয়ে ডেটাকে Re-render করা হয়।
(this).data('column');
var 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">
(this).val().toLowerCase();
filterData(query); // কাস্টম ফাংশন যা ডেটা ফিল্টার করবে
});
filterData() ফাংশনে আপনি ডেটাসেট থেকে query এর সাথে মিলে এমন রো সিলেক্ট করবেন এবং অন্যগুলো হাইড বা ফিল্টার আউট করবেন।
Data Table এ Pagination
Pagination কি?
Pagination (পেজিনেশন) বড় ডেটাসেটকে ছোট ছোট পৃষ্ঠায় বিভক্ত করে প্রদর্শন করার পদ্ধতি। এতে ব্যবহারকারী একবারে সম্পূর্ণ ডেটাসেট না দেখে পর্যায়ক্রমে বিভিন্ন পেজে বিভক্ত ডেটা দেখতে পারে।
Pagination যুক্ত করা
Pagination তৈরি করতে আপনি প্রতি পৃষ্ঠায় কতগুলো রো দেখাবেন সেটি নির্ধারণ করবেন। ধরুন প্রতি পৃষ্ঠায় ১০টি রো দেখাবেন।
var currentPage = 1;
var rowsPerPage = 10;
Pagination UI (নেভিগেশনের জন্য আগের, পরের বাটন বা পেজ নাম্বার) তৈরি করে বাটনে ক্লিক ইভেন্ট যোগ করুন:
('#prevPageBtn').on('click', function() {
if (currentPage > 1) {
currentPage--;
renderTableData();
}
});
renderTableData() ফাংশনে currentPage ও rowsPerPage অনুযায়ী ডেটার নির্দিষ্ট অংশ সিলেক্ট করে টেবিলে প্রদর্শন করবেন।
Sorting, Filtering এবং Pagination একসাথে ব্যবহারের কৌশল
একই Data Table-এ একাধিক ফিচার একসঙ্গে ব্যবহার করা হলে, ডেটা প্রসেস করার সময় একটি যৌক্তিক ধাপ অনুসরণ করুন:
- Original Data Store: মূল ডেটাসেট একটি ভেরিয়েবল বা অবজেক্টে সংরক্ষণ করুন।
- Filtering: ফিল্টার এপ্লাই করে একটি subset ডেটা তৈরি করুন।
- Sorting: ফিল্টার করা ডেটাতে Sorting এপ্লাই করুন।
- Pagination: Sort করা ডেটা থেকে বর্তমান পেজের জন্য প্রয়োজনীয় রো সিলেক্ট করে রেন্ডার করুন।
প্রতিবার ব্যবহারকারী ফিল্টার বা সর্টিং পরিবর্তন করলে Pagination রিসেট করুন বা সামঞ্জস্য করুন।
Data Table-এ Sorting, Filtering ও Pagination ব্যবহারে ব্যবহারকারীরা বড় ডেটাসেট থেকে দ্রুত প্রয়োজনীয় তথ্য খুঁজে পায়। এভাবে ডেটা ম্যানেজমেন্ট আরও কার্যকর, স্পষ্ট ও ব্যবহারে সহজ হয়ে ওঠে।
Read more
