বুটস্ট্রাপ ৫ টেবিল (Tables) উপাদানটি ওয়েবসাইটের মধ্যে ডেটা প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি একটি সুসংগঠিত এবং রেসপন্সিভ পদ্ধতিতে তথ্য উপস্থাপন করতে সাহায্য করে। টেবিলগুলোর ডিজাইনকে সুন্দর এবং ফাংশনাল করে তোলার জন্য বুটস্ট্রাপ অনেক ধরনের বিল্ট-ইন ক্লাস প্রদান করেছে।
এছাড়া, ডেটা টেবিলস (Data Tables) ব্যবহার করে আপনি টেবিলের তথ্যের উপর ফিল্টার, সার্চ, সোর্টিং এবং পেজিনেশন করতে পারেন, যা ডাইনামিক ডেটা পরিচালনার জন্য অত্যন্ত উপকারী।
বুটস্ট্রাপের টেবিল খুবই সহজ এবং দ্রুত কনফিগার করা যায়। টেবিলের জন্য কিছু মূল ক্লাস রয়েছে যা টেবিলের স্টাইল এবং লেআউট কাস্টমাইজ করে।
table: একটি সাধারণ টেবিল তৈরি করার জন্য ব্যবহার হয়।table-striped: টেবিলের সারি গুলোতে হালকা-ডার্ক স্ট্রাইপ ইফেক্ট যোগ করে।table-bordered: টেবিলের সেলগুলোর চারপাশে সীমানা তৈরি করে।table-hover: টেবিল সেলগুলোর উপর হোভার করলে হালকা শেড দেখায়।table-sm: টেবিলের সেল গুলোকে ছোট আকারে দেখায়।table-dark: টেবিলের ব্যাকগ্রাউন্ড কালো (ডার্ক) করে।table-responsive: রেসপন্সিভ টেবিল তৈরি করার জন্য এটি ব্যবহার করা হয় যাতে স্ক্রীনের আকার পরিবর্তন করলে টেবিল হরিজেন্টালি স্ক্রল করতে পারে।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Table Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Simple Table -->
<div class="container mt-5">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>টেলিফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>+880123456789</td>
</tr>
<tr>
<td>2</td>
<td>জেন স্মিথ</td>
<td>jane@example.com</td>
<td>+880987654321</td>
</tr>
<tr>
<td>3</td>
<td>রামু মিয়া</td>
<td>ramu@example.com</td>
<td>+880556677889</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
ডেটা টেবিলস (Data Tables) হল ডাইনামিক টেবিল যেখানে আপনি বিভিন্ন ফিচার ব্যবহার করে ডেটার উপর কাজ করতে পারেন, যেমন ফিল্টারিং, সার্চ, সোর্টিং এবং পেজিনেশন। বুটস্ট্রাপ শুধুমাত্র টেবিলের জন্য স্টাইলিং প্রদান করে, কিন্তু DataTables.js লাইব্রেরি ব্যবহার করে এগুলোকে আরও উন্নত করা যায়।
DataTables.js হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনার টেবিলকে ডাইনামিক, সার্চেবল, এবং ইন্টারেক্টিভ করে তোলে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataTable Example</title>
<!-- DataTables CSS -->
<link href="https://cdn.jsdelivr.net/npm/datatables.net-bs5/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>টেলিফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>+880123456789</td>
</tr>
<tr>
<td>2</td>
<td>জেন স্মিথ</td>
<td>jane@example.com</td>
<td>+880987654321</td>
</tr>
<tr>
<td>3</td>
<td>রামু মিয়া</td>
<td>ramu@example.com</td>
<td>+880556677889</td>
</tr>
</tbody>
</table>
</div>
<!-- DataTables JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable(); // Initialize DataTable
});
</script>
</body>
</html>
DataTables.js এবং বুটস্ট্রাপ একসাথে ব্যবহার করলে আপনার ওয়েব পৃষ্ঠায় খুবই শক্তিশালী এবং রেসপন্সিভ টেবিল তৈরি করা সম্ভব।
বুটস্ট্রাপ ৫ এর টেবিলস এবং ডেটা টেবিলস দুটি গুরুত্বপূর্ণ ফিচার যা ডেটা উপস্থাপন এবং ইন্টারেক্টিভ ফিচার প্রদান করতে ব্যবহৃত হয়। আপনি সহজে টেবিল ডিজাইন কাস্টমাইজ করতে পারেন, এবং DataTables.js এর মাধ্যমে ডেটা টেবিলগুলিকে আরও ফাংশনাল এবং ইন্টারেক্টিভ বানাতে পারেন।
বুটস্ট্রাপ ৫-এ রেসপন্সিভ টেবিল তৈরি করা খুবই সহজ। যখন আপনার টেবিলটি মোবাইল ডিভাইসে সঠিকভাবে প্রদর্শিত না হয়, তখন এটি রেসপন্সিভ টেবিলের মাধ্যমে স্ক্রিনের আকার অনুযায়ী অটো স্ক্রল হতে পারে বা টেবিলটি স্ক্রলযোগ্য হয়ে ওঠে। বুটস্ট্রাপ ৫ টেবিলের জন্য table-responsive ক্লাস প্রদান করে, যা টেবিলকে ছোট স্ক্রীনে সঠিকভাবে প্রদর্শিত হতে সহায়তা করে।
div কনটেইনার ব্যবহার করতে হয় যা table-responsive ক্লাস ধারণ করবে।table ক্লাস দিয়ে সাধারণ টেবিল তৈরি করতে হবে, যেমন: thead, tbody, tr, th, এবং td।table-responsive ক্লাসটি কনটেইনারের সাথে যোগ করতে হয়।<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>রেসপন্সিভ টেবিল উদাহরণ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- রেসপন্সিভ টেবিল -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">নাম</th>
<th scope="col">বয়স</th>
<th scope="col">শহর</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>রাহুল</td>
<td>২৫</td>
<td>ঢাকা</td>
</tr>
<tr>
<th scope="row">2</th>
<td>সুমি</td>
<td>৩০</td>
<td>চট্টগ্রাম</td>
</tr>
<tr>
<th scope="row">3</th>
<td>মাহমুদ</td>
<td>৩৫</td>
<td>রাজশাহী</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
table-responsive ক্লাস:table-responsive ক্লাসটি div কনটেইনারে ব্যবহার করা হয়েছে, যা ছোট স্ক্রীনে টেবিলটি স্ক্রলযোগ্য করে তোলে। এটি সাধারণত মোবাইল ডিভাইসে টেবিলের কলামগুলোকে সঠিকভাবে প্রদর্শনের জন্য উপযুক্ত। যখন স্ক্রীন সাইজ ছোট হবে (যেমন মোবাইল ডিভাইস), তখন টেবিলটি সাইড-টু-সাইড স্ক্রল হবে।table ক্লাস:table ক্লাসটি সাধারণ টেবিল স্টাইলিং প্রদান করে যেমন সীমানা, ব্যাকগ্রাউন্ড এবং টেক্সট এলাইনমেন্ট।রেসপন্সিভ টেবিল ব্যবহারের ক্ষেত্রে কিছু অতিরিক্ত বিষয়গুলো খেয়াল রাখতে হয়:
table-striped, table-bordered, table-hover ইত্যাদি ক্লাস যোগ করে টেবিলের স্টাইল কাস্টমাইজ করতে পারেন।table-striped: রিজার্ভড রো শেডিং (ছোট/বিশাল লাইন বিভাজন)।table-bordered: টেবিলের চারপাশে সীমানা যোগ করে।table-hover: টেবিলের রোতে হোভার ইফেক্ট যোগ করে।<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<!-- টেবিল কন্টেন্ট -->
</table>
</div>
.table-responsive {
max-height: 400px;
overflow-y: auto;
}
এই কোডের মাধ্যমে আপনি টেবিলের শরীর স্ক্রলযোগ্য করতে পারেন, কিন্তু হেডারটি স্থির থাকবে।
বুটস্ট্রাপ ৫ এ রেসপন্সিভ টেবিল তৈরি করা খুবই সহজ এবং স্বয়ংক্রিয়ভাবে স্ক্রীন আকারের সাথে খাপ খাইয়ে যায়। table-responsive ক্লাসটি ছোট স্ক্রীনে টেবিলকে স্ক্রলযোগ্য করে তোলে, যা একটি সেরা ব্যবহারকারী অভিজ্ঞতা প্রদান করে। আপনি অতিরিক্ত কাস্টমাইজেশন যেমন টেবিলের স্টাইল, ফিক্সড হেডার, এবং আরও অনেক কিছু যোগ করতে পারেন।
বুটস্ট্রাপ ৫ এ Striped Tables এবং Bordered Tables দুটি সাধারণ টেবিল স্টাইল যা ব্যবহারকারীকে টেবিলের কন্টেন্টকে আরও পরিষ্কার এবং সুসংগঠিতভাবে প্রদর্শন করতে সাহায্য করে। এই স্টাইলগুলো টেবিলের বিভিন্ন রো বা কলামকে আলাদা করে এবং টেবিলের সীমান্তকে দৃশ্যমান করে।
Striped Tables টেবিলের রো গুলিকে সাদা এবং রঙিন পরিবর্তন করে, যাতে টেবিলের তথ্য সহজে পড়া যায়। এটি বিশেষভাবে বড় টেবিল বা ডেটা ব্যবহারের ক্ষেত্রে উপকারী যেখানে ব্যবহারকারীকে তথ্য দ্রুত শনাক্ত করতে সাহায্য করে।
বুটস্ট্র্যাপ ৫ এ স্ট্রাইপড টেবিল তৈরি করতে table-striped ক্লাস ব্যবহার করতে হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Striped Table Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>2</td>
<td>মারিয়া স্মিথ</td>
<td>maria@example.com</td>
<td>987-654-3210</td>
</tr>
<tr>
<td>3</td>
<td>লুকাস ব্রাউন</td>
<td>lucas@example.com</td>
<td>456-789-0123</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
table-striped: এই ক্লাসটি টেবিলের প্রতিটি রো-এর ব্যাকগ্রাউন্ড রঙকে স্ট্রাইপ হিসেবে পরিবর্তন করে।Bordered Tables টেবিলের চারপাশে এবং সেলের মধ্যে সীমানা (বর্ডার) প্রদর্শন করে, যা টেবিলের ভিজ্যুয়াল উপস্থাপনকে আরো স্পষ্ট ও সুসংগঠিত করে তোলে। এটি বিশেষভাবে তখন উপকারী যখন অনেক কলাম বা তথ্য থাকে এবং ব্যবহারকারীকে দ্রুত তথ্য বিশ্লেষণ করতে সহায়তা করে।
বুটস্ট্র্যাপ ৫ এ বর্ডার টেবিল তৈরি করতে table-bordered ক্লাস ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bordered Table Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>2</td>
<td>মারিয়া স্মিথ</td>
<td>maria@example.com</td>
<td>987-654-3210</td>
</tr>
<tr>
<td>3</td>
<td>লুকাস ব্রাউন</td>
<td>lucas@example.com</td>
<td>456-789-0123</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
table-bordered: এই ক্লাসটি টেবিলের প্রতিটি সেল এবং টেবিলের বাইরের সীমানাকে বর্ডার দিয়ে ঘেরাটোপে আবদ্ধ করে।এছাড়া, আপনি চাইলে table-bordered এবং table-striped দুইটি ক্লাস একসাথে ব্যবহার করতে পারেন, যাতে টেবিলের প্রতিটি রো স্ট্রাইপড থাকে এবং টেবিলের প্রতিটি সেল বর্ডারযুক্ত থাকে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Striped and Bordered Table Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>2</td>
<td>মারিয়া স্মিথ</td>
<td>maria@example.com</td>
<td>987-654-3210</td>
</tr>
<tr>
<td>3</td>
<td>লুকাস ব্রাউন</td>
<td>lucas@example.com</td>
<td>456-789-0123</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
table-bordered এবং table-striped দুটি ক্লাস একসাথে ব্যবহার করা হয়েছে, যার ফলে টেবিলের সেলগুলো বর্ডারযুক্ত এবং রো গুলো স্ট্রাইপড হয়ে থাকবে।বুটস্ট্রাপ ৫ টেবিলের জন্য Hover এবং Custom Styling এর সুবিধা প্রদান করে, যা টেবিলের ভিজ্যুয়াল উপস্থাপনাকে আরও আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করে তোলে। Hover এফেক্ট ব্যবহার করলে, ব্যবহারকারী যখন টেবিলের কোন রোতে মাউস পয়েন্টার রাখে, তখন ঐ রোটি হাইলাইট হয়ে যায়। আর Custom Styling এর মাধ্যমে টেবিলের কাস্টম ডিজাইন, রঙ, প্যাডিং ইত্যাদি পরিবর্তন করা যায়।
Table Hover ব্যবহার করে, আপনি টেবিলের রোতে মাউস হোভার করলে ঐ রোটি হাইলাইট করতে পারবেন। বুটস্ট্র্যাপ ৫ এ এটি তৈরি করতে table-hover ক্লাস ব্যবহার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Hover Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>2</td>
<td>মারিয়া স্মিথ</td>
<td>maria@example.com</td>
<td>987-654-3210</td>
</tr>
<tr>
<td>3</td>
<td>লুকাস ব্রাউন</td>
<td>lucas@example.com</td>
<td>456-789-0123</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
এখানে table-hover ক্লাসের মাধ্যমে টেবিলের রোতে মাউস হোভার করলে ঐ রোটি হাইলাইট হবে।
বুটস্ট্র্যাপে আপনি টেবিলের বিভিন্ন অংশ কাস্টমাইজ করতে পারেন, যেমন টেবিলের ব্যাকগ্রাউন্ড, বর্ডার, রঙ, প্যাডিং ইত্যাদি। Custom Table Styling এর মাধ্যমে আপনি টেবিলের ডিজাইন নিজের মতো করে তৈরি করতে পারবেন।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Table Styling Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Custom table styles */
.table-custom {
background-color: #f8f9fa;
border: 2px solid #ccc;
}
.table-custom th {
background-color: #007bff;
color: white;
font-weight: bold;
}
.table-custom td, .table-custom th {
padding: 15px;
}
.table-custom tbody tr:hover {
background-color: #e9ecef;
}
</style>
</head>
<body>
<div class="container mt-4">
<table class="table table-custom">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john@example.com</td>
<td>123-456-7890</td>
</tr>
<tr>
<td>2</td>
<td>মারিয়া স্মিথ</td>
<td>maria@example.com</td>
<td>987-654-3210</td>
</tr>
<tr>
<td>3</td>
<td>লুকাস ব্রাউন</td>
<td>lucas@example.com</td>
<td>456-789-0123</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
এখানে:
.table-custom: টেবিলের কাস্টম স্টাইল দেওয়া হয়েছে। এর মাধ্যমে টেবিলের ব্যাকগ্রাউন্ড, বর্ডার এবং প্যাডিং কাস্টমাইজ করা হয়েছে।th: টেবিল হেডারের জন্য আলাদা ব্যাকগ্রাউন্ড রঙ দেওয়া হয়েছে।tbody tr:hover: টেবিলের রোতে হোভার করলে ব্যাকগ্রাউন্ড রঙ পরিবর্তন হবে।table-hover ক্লাস টেবিলের রোতে হোভার করলে হাইলাইট করতে সাহায্য করে।table-bordered ক্লাস টেবিলের চারপাশে বর্ডার তৈরি করে।এই উপাদানগুলো ওয়েব ডিজাইনে ক্লিন এবং অ্যাট্রাকটিভ টেবিল তৈরি করতে সহায়ক।
DataTables হল একটি শক্তিশালী jQuery প্লাগিন, যা টেবিল ডেটা প্রদর্শন এবং পরিচালনার জন্য ব্যবহৃত হয়। এটি স্বয়ংক্রিয়ভাবে বিভিন্ন ফিচার যেমন পেজিনেশন, সার্চ, সোর্টিং এবং ফিল্টারিং প্রদান করে। বুটস্ট্রাপ ৫ এর সাথে DataTables ব্যবহার করলে টেবিলের ডিজাইন আরও উন্নত হয় এবং ইউজার এক্সপেরিয়েন্সও বৃদ্ধি পায়।
এখানে আমরা দেখব কিভাবে DataTables প্লাগিনকে বুটস্ট্রাপ ৫-এ ইন্টিগ্রেট করে পেজিনেশন (pagination) এবং অন্যান্য ফিচার ব্যবহার করা যায়।
DataTables ব্যবহারের জন্য প্রথমে আপনাকে DataTables এর CSS এবং JS ফাইল লোড করতে হবে। এরপর, একটি HTML টেবিল তৈরি করতে হবে, যেটি DataTables দ্বারা কনফিগার করা হবে।
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- DataTables CSS -->
<link href="https://cdn.jsdelivr.net/npm/datatables@1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables JS -->
<script src="https://cdn.jsdelivr.net/npm/datatables@1.11.5/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap JS (Optional for functionality like dropdown, modals etc.) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
এখন একটি বেসিক HTML টেবিল তৈরি করি, যেটি আমরা DataTables প্লাগিনের সাথে ইন্টিগ্রেট করব।
<div class="container mt-5">
<h2>DataTables Integration with Bootstrap 5</h2>
<table id="myTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>নাম</th>
<th>ইমেইল</th>
<th>ফোন</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>জন ডো</td>
<td>john.doe@example.com</td>
<td>+880123456789</td>
</tr>
<tr>
<td>2</td>
<td>আলিনা রহমান</td>
<td>alina.rahman@example.com</td>
<td>+880987654321</td>
</tr>
<tr>
<td>3</td>
<td>মোহাম্মদ হাসান</td>
<td>mohammad.hassan@example.com</td>
<td>+880112233445</td>
</tr>
<tr>
<td>4</td>
<td>রিমি আক্তার</td>
<td>rimi.aktar@example.com</td>
<td>+880998877665</td>
</tr>
</tbody>
</table>
</div>
এখন, JavaScript দিয়ে DataTables ইনিশিয়ালাইজ করতে হবে, যাতে টেবিলটি পেজিনেশন, সার্চ, এবং সোর্টিং ফিচার পায়।
<script>
$(document).ready(function() {
$('#myTable').DataTable(); // এই লাইনটি DataTables প্লাগিনের কাজ শুরু করবে
});
</script>
এখন, আপনি যখন এই কোডটি চালাবেন, আপনার টেবিলটি স্বয়ংক্রিয়ভাবে পেজিনেশন, সার্চ এবং সোর্টিং ফিচার পাবে। DataTables প্লাগিন আপনাকে একটি সুন্দর এবং ইন্টারঅ্যাকটিভ টেবিল উপহার দিবে।
DataTables স্বয়ংক্রিয়ভাবে পেজিনেশন তৈরি করে, তবে আপনি এর পেজ সাইজ এবং অন্যান্য কনফিগারেশন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি টেবিলের প্রতি পেজে কতগুলি রেকর্ড দেখাতে চান তা কনফিগার করতে পারেন।
<script>
$(document).ready(function() {
$('#myTable').DataTable({
"pageLength": 5 // প্রতি পেজে ৫টি রেকর্ড দেখানো হবে
});
});
</script>
এছাড়া, lengthMenu অপশন ব্যবহার করে আপনি পেজ সাইজের জন্য বিভিন্ন অপশন প্রদান করতে পারেন।
<script>
$(document).ready(function() {
$('#myTable').DataTable({
"lengthMenu": [5, 10, 15, 20], // ইউজারকে ৫, ১০, ১৫, অথবা ২০ রেকর্ড পেজে দেখানোর অপশন দিবে
"pageLength": 10 // ডিফল্টভাবে প্রতি পেজে ১০টি রেকর্ড দেখাবে
});
});
</script>
DataTables প্লাগিনে একটি বিল্ট-ইন সার্চ বক্স থাকে যা টেবিলের কন্টেন্ট অনুসন্ধান করতে ব্যবহৃত হয়। এই ফিচারটি ব্যবহার করতে আলাদা কোনো কনফিগারেশন প্রয়োজন হয় না, কারণ এটি ডিফল্টভাবেই সক্রিয় থাকে। তবে আপনি যদি এটিকে কাস্টমাইজ করতে চান, তাহলে searching অপশনটি ব্যবহার করতে পারেন।
<script>
$(document).ready(function() {
$('#myTable').DataTable({
"searching": false // সার্চ ফিচারটি বন্ধ করা
});
});
</script>
এইভাবে আপনি আপনার টেবিলকে আরও ইন্টারঅ্যাকটিভ এবং ইউজার ফ্রেন্ডলি করতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
