Materialize CSS একটি আধুনিক ফ্রন্ট-এন্ড ফ্রেমওয়ার্ক যা ব্যবহারকারীর ইন্টারফেস ডিজাইনে গুরুত্বপূর্ণ ভূমিকা পালন করে। যখন আপনি ডাইনামিক ডেটা বা টেবিল প্রদর্শন করতে চান, তখন DataTables একটি শক্তিশালী টুল হিসেবে কাজ করে। DataTables একটি জনপ্রিয় জাভাস্ক্রিপ্ট প্লাগইন যা ডেটা টেবিলের জন্য উন্নত ফিচার যেমন sorting, searching, filtering, এবং pagination প্রদান করে। এই টিউটোরিয়ালে আমরা দেখব কীভাবে Materialize CSS এবং DataTables ইন্টিগ্রেট করা যায় এবং কাস্টম পেজিনেশন সেটআপ করা যায়।
DataTables Integration with Materialize CSS
DataTables একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি যা টেবিল ডেটাকে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারে সহজ করে তোলে। Materialize CSS এর সাথে DataTables ব্যবহার করলে আপনি একটি সুন্দর এবং কার্যকরী টেবিল তৈরি করতে পারেন।
১. DataTables সেটআপ করা
প্রথমে, আপনাকে DataTables জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলো লোড করতে হবে। এটি করার জন্য CDN ব্যবহার করতে পারেন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Materialize and DataTables Integration</title>
<!-- Materialize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- DataTables JS -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<body>
<div class="container">
<h3>Materialize + DataTables</h3>
<table id="myTable" class="striped responsive-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>35</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Mark</td>
<td>50</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function() {
$('#myTable').DataTable(); // DataTables Initialization
});
</script>
</body>
</html>
এখানে:
- Materialize CSS এবং DataTables এর জন্য CDN লিংক যুক্ত করা হয়েছে।
- striped এবং responsive-table ক্লাসগুলো Materialize CSS এর স্টাইলিং সুবিধা প্রদান করে।
- DataTables প্লাগইনটি
$('#myTable').DataTable();মাধ্যমে ইনিশিয়ালাইজ করা হয়েছে।
২. DataTables Features
এখন, আপনার টেবিলটি DataTables এর সমস্ত ফিচার যেমন sorting, searching, pagination এবং filtering সহ প্রদর্শিত হবে।
- Sorting: আপনি যে কোনো কলামে ক্লিক করলে সেগুলো সুরুক্রম অনুযায়ী সাজানো হবে।
- Searching: সার্চ বক্স ব্যবহার করে আপনি টেবিলের মধ্যে দ্রুত অনুসন্ধান করতে পারবেন।
- Pagination: টেবিলের পেজিনেশন বা পৃষ্ঠা বিভাজন সুবিধা থাকবে, যা বড় ডেটাসেট পরিচালনা করতে সহায়ক।
Custom Pagination with Materialize
Custom Pagination তৈরি করা একটি সাধারণ চ্যালেঞ্জ, তবে Materialize CSS আপনাকে এর জন্য তৈরি করা স্টাইলস এবং ক্লাস প্রদান করে। আপনি যখন DataTables ব্যবহার করবেন, তখন pagination কাস্টমাইজ করতে পারেন।
১. Custom Pagination for DataTables
Materialize CSS এর pagination ক্লাস ব্যবহার করে আপনি টেবিলের জন্য কাস্টম পেজিনেশন ডিজাইন করতে পারবেন।
<ul class="pagination">
<li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
<li class="active"><a href="#!">1</a></li>
<li><a href="#!">2</a></li>
<li><a href="#!">3</a></li>
<li><a href="#!"><i class="material-icons">chevron_right</i></a></li>
</ul>
এখানে:
- disabled: প্রথম বা শেষ পৃষ্ঠা নির্বাচিত না হলে ব্যবহার করা হয়।
- active: বর্তমান নির্বাচিত পৃষ্ঠার জন্য।
- material-icons: pagination আইকন হিসেবে Chevron চিহ্ন দেখায়।
২. DataTables Pagination কাস্টমাইজেশন
আপনি DataTables প্লাগইনের মাধ্যমে পেজিনেশন কাস্টমাইজ করতে পারেন যেমন:
- pageLength: এক পৃষ্ঠায় কতটি রেকর্ড দেখা যাবে তা নির্ধারণ করতে পারেন।
- dom: এটি টেবিলের মধ্যে পেজিনেশন, সার্চ এবং তথ্যের ব্যবস্থা কাস্টমাইজ করতে সহায়তা করে।
<script>
$(document).ready(function() {
$('#myTable').DataTable({
"pageLength": 5, // এক পৃষ্ঠায় ৫টি রেকর্ড দেখানো হবে
"dom": '<"top"f>rt<"bottom"ip><"clear">', // কাস্টম ডোম স্ট্রাকচার
});
});
</script>
এখানে:
- pageLength: এক পৃষ্ঠায় প্রদর্শিত রেকর্ডের সংখ্যা নির্ধারণ করে।
- dom: টেবিলের পেজিনেশন, সার্চ, এবং অন্যান্য উপাদানগুলো কাস্টমাইজ করা যায়।
৩. Custom Buttons for Pagination
কাস্টম পেজিনেশন বাটন তৈরি করতে Materialize CSS এর ক্লাস ব্যবহার করা যেতে পারে:
<div class="row">
<div class="col s12 center">
<button class="btn waves-effect waves-light">Previous</button>
<button class="btn waves-effect waves-light">Next</button>
</div>
</div>
এখানে:
- waves-effect এবং waves-light ব্যবহার করে Materialize CSS এর ওয়েভ এফেক্ট যোগ করা হয়েছে।
- btn ক্লাস বাটনের স্টাইলিং জন্য ব্যবহৃত।
উপসংহার
Materialize CSS এবং DataTables এর সঠিক ইন্টিগ্রেশন আপনার ওয়েবসাইটে ডাইনামিক এবং ব্যবহারকারী-বান্ধব টেবিল তৈরি করতে সহায়ক। DataTables প্লাগইন আপনার টেবিলের মধ্যে searching, sorting, filtering, এবং pagination যোগ করে, যা ব্যবহারকারীদের জন্য সুবিধাজনক। আপনি কাস্টম পেজিনেশন এবং অন্যান্য কাস্টম স্টাইল ব্যবহার করে আপনার টেবিলকে আরও উন্নত এবং আকর্ষণীয় করতে পারেন। Materialize CSS এর সাহায্যে আপনি আপনার টেবিলের ডিজাইন এবং ফিচারগুলো খুব সহজেই কাস্টমাইজ করতে পারবেন।
Read more
