ডাটাটেবিল হলো একটি জেকোয়েরি প্লাগিন যা html টেবিলে এক্সট্রা ফিচার যোগ করে যেমনঃ সার্চ,সর্ট,পেজিনেশন ইত্যাদি
প্রথমে একটি html টেবিল নিয়ে তাতে একটি id এসাইন করে জেকোয়েরি cdn ও ডাটাটেবিল সিডন যোগ করে টেবিল কে ডাটাটেবিল ফাংশন এপলাই করলে html টেবিল সুন্দর ডাটাটেবিল এ পরিণত হয়। এরসাথে বুটস্ট্র্যাপ বা mdbbootstrap উসে করলে সুন্দর ইন্টারফেস পাওয়া যাই। এটা ডিফল্ট ভাবে ১০ তা row ডিসপ্লে করে পরবর্তী row পেজিনেশন আকারে শো করে। যদি “pageLength”: 3 ব্যবহার করি তবে তিনটা করে row শো করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-12">
<table class="table" id="table1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Occupation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ram</td>
<td>21</td>
<td>Male</td>
<td>Doctor</td>
</tr>
<tr>
<td>Mohan</td>
<td>32</td>
<td>Male</td>
<td>Teacher</td>
</tr>
<tr>
<td>Rani</td>
<td>42</td>
<td>Female</td>
<td>Nurse</td>
</tr>
<tr>
<td>Johan</td>
<td>23</td>
<td>Female</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>Shajia</td>
<td>39</td>
<td>Female</td>
<td>Farmer</td>
</tr>
<tr>
<td>Jack</td>
<td>19</td>
<td>Male</td>
<td>Student</td>
</tr>
<tr>
<td>Hina</td>
<td>30</td>
<td>Female</td>
<td>Artist</td>
</tr>
<tr>
<td>Gauhar</td>
<td>36</td>
<td>Female</td>
<td>Artist</td>
</tr>
<tr>
<td>Jacky</td>
<td>55</td>
<td>Female</td>
<td>Bank Manager</td>
</tr>
<tr>
<td>Pintu</td>
<td>36</td>
<td>Male</td>
<td>Clerk</td>
</tr>
<tr>
<td>Sumit</td>
<td>33</td>
<td>Male</td>
<td>Footballer</td>
</tr>
<tr>
<td>Radhu</td>
<td>40</td>
<td>Female</td>
<td>Coder</td>
</tr>
<tr>
<td>Mamta</td>
<td>49</td>
<td>Female</td>
<td>Student</td>
</tr>
<tr>
<td>Priya</td>
<td>36</td>
<td>Female</td>
<td>Worker</td>
</tr>
<tr>
<td>Johnny</td>
<td>41</td>
<td>Male</td>
<td>Forest Officer</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#table1').DataTable({
"pageLength": 3
});
});
</script>
</body>
</html>
ডাটাটেবিলে জাভাস্ক্রিপ্ট এরে হতে ডাটা শো করানো যাই
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-md-12">
<table class="table" id="table3">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Occupation</th>
</tr>
</thead>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
var json = [
{
"name": "Ram",
"age": "21",
"sex": "Male",
"occupation": "Doctor"
},
{
"name": "Mohan",
"age": "32",
"sex": "Male",
"occupation": "Teacher"
},
{
"name": "Rani",
"age": "42",
"sex": "Female",
"occupation": "Nurse"
},
{
"name": "Johan",
"age": "23",
"sex": "Female",
"occupation": "Software Engineer"
},
{
"name": "Shajia",
"age": "39",
"sex": "Female",
"occupation": "Farmer"
}
];
</script>
<script>
$('#table3').DataTable({
data: json,
columns: [
{ data: 'name' },
{ data: 'age' },
{ data: 'sex' },
{ data: 'occupation' }
],
"pageLength": 3
});
</script>
</body>
</html>
ডাটাটেবিলে জেসন এরে হতে ডাটা শো করানো যাই ajax method ব্যবহার করে যেকোনো ডাটা সোর্স হতে ডাটা ফেচ করে জেসন ফরম্যাটে এনে তা শো করানো যায়
মনে কর তোমার জেসন ডাটা হলো
{
"roomsData": [
{
"id": 1,
"room": "Basic",
"price": "$49"
},
{
"id": 2,
"room": "Common",
"price": "$59"
},
{
"id": 3,
"room": "Luxury",
"price": "$99"
},
{
"id": 4,
"room": "Deluxe",
"price": "$89"
},
{
"id": 5,
"room": "Super",
"price": "$199"
}
]
}
<table id="table4">
<thead>
<tr>
<th>Id</th>
<th>Room</th>
<th>Price</th>
</tr>
</thead>
</table>
$('#table4').DataTable({
ajax: {
url: 'data.php',
dataSrc: "roomsData"
},
columns: [
{ data: 'id' },
{ data: 'room' },
{ data: 'price' }
],
"pageLength": 3
});
For Coustomizing Data Table Follow This Link
OLEETECH 