TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে Weebly এ উন্নত ডেটা টেবিল উইজেট যোগ করবেন?

1

আপনি HTML ব্যবহার করে সহজ টেবিল তৈরি করতে পারেন

ট্যাগ । কিন্তু একটি সাধারণ টেবিল সবসময় আপনার ডেটা প্রদর্শনের জন্য যথেষ্ট নাও হতে পারে এবং একাধিক বৈশিষ্ট্য সহ জটিল ডেটা টেবিলের প্রয়োজন হতে পারে। Weebly অফিসিয়াল সিম্পল টেবিল অ্যাপ অফার করে এবং Weebly সাইটে টেবিল সন্নিবেশ করার জন্য আপনার কাছে অন্যান্য অপশন থাকতে পারে । যাইহোক, ওয়ার্ডপ্রেসের বিপরীতে যা জটিল টেবিল সন্নিবেশ করার জন্য নিবেদিত প্লাগইন রয়েছে, উইবলির অন্তর্নির্মিত বিকল্প নেই।

আপনি যদি Weebly তে বড় ডেটা টেবিল যোগ করতে চান, তাহলে এখানে আমরা ব্যাখ্যা করব কিভাবে datatables.net থেকে jQuery প্লাগইন ব্যবহার করে উন্নত ডেটা টেবিল উইজেট যোগ করা যায়। টেবিলটি নিচের মত দেখাবে। এই কোডটি জনপ্রিয় বুটস্ট্র্যাপ ফ্রেমওয়ার্কের উপর ভিত্তি করে এবং আমরা আপনার উইবলি সাইটে এই উইজেটটি কীভাবে যুক্ত করবেন তাও ব্যাখ্যা করব।

কিভাবে Weebly এ উন্নত ডেটা টেবিল উইজেট যোগ করবেন?

বুটস্ট্র্যাপ উন্নত ডেটা টেবিল

ডেটা টেবিলের বৈশিষ্ট্য

উন্নত ডেটা টেবিল উইজেটের নিম্নলিখিত বৈশিষ্ট্য থাকবে:

  • কোন একক কলামের উপর ভিত্তি করে সাজানো যায়।
  • বুটস্ট্র্যাপ দিয়ে তৈরি সম্পূর্ণ প্রতিক্রিয়াশীল।
  • প্রতি পৃষ্ঠায় 10, 25, 50 এবং 100 টি রেকর্ড দিয়ে বিষয়বস্তু ফিল্টার করুন।
  • টেবিল সেলের যেকোনো একটিতে কন্টেন্ট সার্চ করার জন্য সার্চ বক্স।
  • পূর্ববর্তী এবং পরবর্তী পৃষ্ঠার বিকল্প সহ টেবিলের যে কোনো পৃষ্ঠায় নেভিগেট করার জন্য আড়ম্বরপূর্ণ পৃষ্ঠাঙ্কন।
  • টেবিলে উপস্থিত মোট এন্ট্রি সহ প্রদর্শিত এন্ট্রির সংখ্যা দেখায়।

সম্পূর্ণ কোডটি ডাউনলোড করুন

উন্নত ডেটা টেবিল উইজেটের জন্য সম্পূর্ণ কোডটি ডাউনলোড করুন। আর্কাইভ ফাইলটিতে নিম্নলিখিত ফাইল রয়েছে:

  • উন্নত- table.html
  • dataTables.bootstrap.css
  • bootstrap.min.css
  • jquery.min.js
  • bootstrap.min.js
  • dataTables.bootstrap.js
  • jquery.dataTables.js

CSS এবং JS ফাইলগুলি যথাযথ কাঠামোর জন্য "CSS" এবং "JS" ফোল্ডারের মধ্যে সংরক্ষিত থাকে এবং HTML ফাইল এই সম্পদের বাইরে থাকে। আপনি CSS / JS ফাইল সংরক্ষণের জন্য যেকোনো কাঠামো ব্যবহার করতে পারেন কিন্তু কাঠামোর উপর ভিত্তি করে আপনার লিঙ্কগুলি সঠিকভাবে যুক্ত করতে হবে তাদের HTML ফাইলে লিঙ্ক করুন। যদি এটি আপনার জন্য কঠিন কাজ হয়, তাহলে Mobirise এর মত বুটস্ট্র্যাপ ওয়েবসাইট নির্মাতাদের ব্যবহার করার কথা বিবেচনা করুন । তারা আপনার সাইটে and োকাতে এবং দ্রুত প্রকাশের জন্য প্রস্তুত ব্লক অফার করে।

ডেটা টেবিল উইজেট যোগ করার জন্য তিনটি ধাপ রয়েছে:

1 Weebly তে CSS যোগ করা

আপনার পৃষ্ঠার হেডার কোড বিভাগে নিম্নলিখিত CSS যোগ করুন :

<link rel="stylesheet" href="css/bootstrap.min.css">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/dataTables.bootstrap.css"/> <style> .table-responsive { overflow-x: hidden; } @media (max-width: 800px) { .table-responsive { overflow-x: auto; } </style>

এখানে আমরা ফন্ট অসাধারণ আইকন সংযোগের জন্য সিডিএন লিংক ব্যবহার করেছি, যদি আপনি আপনার সাইটে ফন্ট অসাধারণ আইকন হোস্ট করেন তাহলে আপনাকে আলাদাভাবে এই লিঙ্কটি যোগ করার দরকার নেই। আপনার সাইটের সঠিক লিঙ্কগুলির সাথে "bootstrap.min.css" এবং "dataTables.bootstrap.css" লিঙ্কগুলি প্রতিস্থাপন করা নিশ্চিত করুন।

2 স্ক্রিপ্ট যোগ করা

আপনার পৃষ্ঠার ফুটার কোড বিভাগে নীচের স্ক্রিপ্ট যোগ করুন:

<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/jquery.dataTables.js"></script> <script src="js/dataTables.bootstrap.js"></script> <script> $(document).ready(function() { $('#dataTables-example').dataTable(); }); </script>

আমরা "jquery.min.js" দিয়ে গুগল jQuery লাইব্রেরি ব্যবহার করেছি, মনে রাখবেন এই jQuery স্ক্রিপ্ট ছাড়া উইজেট কাজ করবে না। যদি আপনার সাইট ডিফল্টরূপে jQuery ব্যবহার করে তাহলে আপনাকে সংস্করণের উপর ভিত্তি করে এই লিঙ্কটি আলাদাভাবে উল্লেখ করার প্রয়োজন হতে পারে না।

3 এইচটিএমএল যোগ করা

একটি এম্বেড কোড এলিমেন্টের ভিতরে নিচের HTML কোডটি যোগ করুন । এই উদাহরণে, আমরা 5 টি কলাম সহ একটি টেবিল তৈরি করছি এবং কোডটিতে হেডার এবং একটি সারির জন্য ডেটা রয়েছে। আপনি সারিতে ডেটা কপি / পেস্ট করতে পারেন টেবিলে যতগুলো সারি যোগ করতে পারেন। টেবিলের সঠিকভাবে কাজ করার জন্য সমস্ত কক্ষের মান পাশাপাশি হেডার এবং সারি সমান সংখ্যক কলাম যুক্ত করা নিশ্চিত করুন। ফাঁকা ডেটা নির্দেশ করতে আপনি হাইফেন (-) ব্যবহার করতে পারেন।

<div class="panel-body"> <div class="table-responsive"> <table class="table table-striped table-bordered table-hover" id="dataTables-example"> <!-- This is the header section of the table --> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <!-- End of table header --> <tbody> <!-- This is the start of first row of the table --> <tr> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td>4</td> <td>X</td> </tr> <!-- End of first row (copy and paste this block to append additional rows --> <!-- Paste additional rows here --> </tbody> </table> </div> </div>

আপনার Weebly সাইটের হেডার এবং ফুটার সেকশনে কিভাবে কোড ertোকানো যায় সে সম্পর্কে আরও জানুন ।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত