ডাইনামিক ডেটা টেবিল এবং ফিল্টারিং সিস্টেম
ওয়েব ডেভেলপমেন্টে ডাইনামিক ডেটা টেবিল এবং ফিল্টারিং সিস্টেম তৈরি করা একটি সাধারণ চ্যালেঞ্জ হতে পারে। এই সিস্টেমগুলো ব্যবহারকারীদের তাদের প্রয়োজনীয় তথ্য সহজে খুঁজে পেতে সাহায্য করে এবং ডেটার উপর ভিত্তি করে রিয়েল-টাইম অ্যাকশন নেওয়ার সুযোগ দেয়।
Underscore.js এর সাহায্যে আপনি এই ধরনের সিস্টেম তৈরি করতে পারেন, কারণ এটি কোল্লেকশন ম্যানিপুলেশন এবং ফিল্টারিংয়ের জন্য বেশ শক্তিশালী ফাংশন সরবরাহ করে। আপনি ফিল্টার, ম্যাপ, এবং রিডুস ফাংশনগুলির মাধ্যমে ডেটা সহজে প্রক্রিয়া করতে পারেন।
ডাইনামিক ডেটা টেবিল কী?
ডাইনামিক ডেটা টেবিল এমন একটি টেবিল যেখানে ডেটা ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী পরিবর্তিত হয়। ব্যবহারকারী বিভিন্ন ধরনের ফিল্টার, সার্চ বা পেজিনেশন অপশন ব্যবহার করে ডেটা দেখেন। এটি সাধারণত একটি HTML টেবিল আকারে তৈরি হয় এবং ডেটা রিয়েল-টাইমে আপডেট হয়।
Underscore.js দিয়ে ডাইনামিক টেবিল এবং ফিল্টারিং সিস্টেম তৈরি
এখানে আমরা একটি ডাইনামিক ডেটা টেবিল এবং ফিল্টারিং সিস্টেম তৈরি করব যা Underscore.js এর সাহায্যে ডেটা ফিল্টারিং এবং প্রদর্শন করবে। উদাহরণস্বরূপ, একটি ডেটাবেসের মতো ব্যবহারকারীদের তালিকা তৈরি করা যেখানে আমরা তাদের নাম, বয়স এবং শহর দেখব।
১. HTML স্ট্রাকচার তৈরি
প্রথমে একটি সিম্পল HTML টেবিল তৈরি করতে হবে যেখানে ডেটা প্রদর্শিত হবে এবং একটি ফিল্টার ফিচার থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Data Table</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-min.js"></script>
</head>
<body>
<h2>Users List</h2>
<input type="text" id="filter" placeholder="Search by name" />
<table id="userTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<!-- Dynamic data will go here -->
</tbody>
</table>
<script src="app.js"></script>
</body>
</html>
এখানে একটি সাধারণ টেবিল এবং একটি ইনপুট ফিল্টার তৈরি করা হয়েছে। ফিল্টার ইনপুট ফিল্ডটি ব্যবহারকারীকে নামের ওপর ভিত্তি করে ডেটা ফিল্টার করতে সহায়তা করবে।
২. Underscore.js দিয়ে ডেটা এবং ফিল্টারিং সিস্টেম তৈরি
এখন আমরা Underscore.js ব্যবহার করে ডেটা তৈরি করব এবং ফিল্টারিং সিস্টেম তৈরি করব।
// app.js
// ডেটার উদাহরণ
let users = [
{ name: 'John Doe', age: 28, city: 'New York' },
{ name: 'Jane Smith', age: 34, city: 'Los Angeles' },
{ name: 'Sam Brown', age: 22, city: 'Chicago' },
{ name: 'Anna Johnson', age: 25, city: 'Miami' }
];
// টেবিলের মধ্যে ডেটা প্রদর্শন করা
function renderTable(filteredUsers) {
const tbody = document.querySelector('#userTable tbody');
tbody.innerHTML = ''; // টেবিল পরিষ্কার করুন
filteredUsers.forEach(function(user) {
const row = document.createElement('tr');
row.innerHTML = `
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.city}</td>
`;
tbody.appendChild(row);
});
}
// ফিল্টারিং এবং টেবিল আপডেট করা
function filterData() {
const searchTerm = document.getElementById('filter').value.toLowerCase();
// Underscore.js ব্যবহার করে নামের উপর ফিল্টার করা
const filteredUsers = _.filter(users, function(user) {
return user.name.toLowerCase().includes(searchTerm);
});
renderTable(filteredUsers); // টেবিল আপডেট করা
}
// পেজ লোড হওয়ার সময় ডেটা প্রদর্শন
document.addEventListener('DOMContentLoaded', function() {
renderTable(users); // প্রথমে সব ডেটা লোড হবে
});
// ফিল্টার ইনপুটের উপর পরিবর্তন হলে ফিল্টার এবং টেবিল আপডেট করুন
document.getElementById('filter').addEventListener('input', function() {
filterData();
});
এখানে, আমরা প্রথমে users নামে একটি ডেটা অ্যারে তৈরি করেছি, যেখানে কিছু নাম, বয়স এবং শহরের তথ্য রয়েছে। তারপর Underscore.js এর _.filter() ফাংশন ব্যবহার করে ব্যবহারকারীর ইনপুট অনুযায়ী নামের উপর ভিত্তি করে ডেটা ফিল্টার করেছি।
renderTable() ফাংশনটি টেবিলের মধ্যে ডেটা রেন্ডার করার জন্য ব্যবহৃত হচ্ছে, এবং filterData() ফাংশনটি ফিল্টার করার জন্য ব্যবহার করা হচ্ছে। ইনপুটের মধ্যে লেখা পরিবর্তন হলে ডেটা ফিল্টার হবে এবং টেবিল আপডেট হবে।
৩. ব্যবহারকারী ইন্টারফেসের (UI) উন্নতি
এখন ব্যবহারকারীর জন্য ইন্টারফেস উন্নত করতে কিছু CSS কোড যুক্ত করতে হবে যাতে টেবিল এবং ইনপুট ফিল্টার সুন্দরভাবে প্রদর্শিত হয়।
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#filter {
margin-bottom: 20px;
padding: 8px;
font-size: 16px;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #ccc;
}
th, td {
padding: 12px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
এখানে আমরা টেবিলের জন্য কিছু বেসিক স্টাইল যোগ করেছি, যাতে এটি পরিষ্কারভাবে দেখা যায় এবং ইনপুট ফিল্টারটি ব্যবহারকারী বন্ধুত্বপূর্ণ হয়।
সারাংশ
এটি একটি ডাইনামিক ডেটা টেবিল এবং ফিল্টারিং সিস্টেম তৈরির সহজ উদাহরণ ছিল, যেখানে Underscore.js এর _.filter() ফাংশন ব্যবহার করে ডেটা ফিল্টার করা হয়েছে। ব্যবহারকারীরা ইনপুট ফিল্ডের মাধ্যমে ডেটা খুঁজে পেতে পারেন এবং টেবিলটি রিয়েল-টাইমে আপডেট হয়। এটি এমন একটি সাধারণ ওয়েব অ্যাপ্লিকেশন যা Underscore.js এর কোল্লেকশন ফাংশন ব্যবহার করে ডেটা ম্যানিপুলেশন এবং প্রদর্শন করে।
আপনি এই পদ্ধতি ব্যবহার করে আরও জটিল ফিল্টারিং সিস্টেম তৈরি করতে পারেন, যেখানে বিভিন্ন ধরনের ফিল্টার (যেমন বয়স, শহর, ইত্যাদি) প্রযোজ্য হবে।
Read more
