از آن جا که جدول ها با عملکرد هایی نظیر مرتب سازی، جستجو، فیلتر و … در موارد زیادی مورد استفاده قرار می گیرند، پلاگین های جدول در جی کوئری بسیار کاربردی هستند و اکنون که از جدول های سازگار با موبایل، استفاده می شوند، یکی از ویژگی های پلاگین ها باید سازگاری با دستگاه های موبایل و قابلیت واگنش گرایی آن هاست. در بخش اول این این مقاله، چندین پلاگین جی کوئری، معرفی شد و در این بخش از مقاله، تعداد بیشتری از آن ها گردآوری شده اند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
JSON To Bootstrap Table
پلاگین جی کوئری JSON To Bootstrap Table به شما اجازه می دهد تا جداول واکنش گرای بوت استرپ را از داده های فایل JSON استفاده کنید. این پلاگین یک جدول کامل از داده هایی که از backend گرفته شده است را ایجاد می کند.
این افزونه، یک افزونه ی فوق العاده است برای نمایش جدول واکنش گرای بوت استرپ با صفحه بندی و دکمه های عملکردی است. شما فقط باید داده های JSON خود را تجزیه کنید و آن را به پلاگین جدول Bootstrap to JSON منتقل کنید و یک جدول به صورت پویا ایجاد کنید.
با استفاده از این پلاگین جی کوئری شما می توانید اندازه صفحه، ستون اصلی کلیدی، دکمه نمایش / مخفی کردن / ویرایش، و عملکرد حذف و غیره را مشخص کنید.
دریافت پلاگین: وب سایت Codecanyon.
TinyTable – پلاگین جدول جی کوئری
افزونه ی TinyTable یک پلاگین جدول جی کوئری هوشمند است که برای ایجاد انواع جداول واکنش گرا استفاده می شود. تمام جداول در مرورگر موبایل عالی به نظر می رسند و این افزونه به شما کمک می کند تا جدول خود را به شکل سازگار برای موبایل تبدیل کنید.
آموزش پیشنهادی برای شما : آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته
پلاگین TinyTable به طور خودکار، عرض جدول را به حداکثر عرض پنجره ی مرورگر تبدیل می کند. گزینه ای به نام overflow وجود دارد که جدول را در یک کانتینر خاص نگه می دارد و هنگامی که روی موبایل نمایش داده می شود، قابلیت حرکت بین ستون ها را فراهم می کند.
گزینه ی دیگری نیز وجود دارد که جدول را به یک جدول دو ستونی تبدیل می کند و سایت شما را بر اساس طول خود، گسترش می دهد. علاوه بر این، با استفاده از این پلاگین می توانید گزینه های متعددی برای تزیین جداول طولانی داشته باشید.
این افزونه ی جی کوئری هوشمند با انواع مرورگر های IE، فایرفاکس، سافاری، اپرا و کروم و غیره سازگار است.
دریافت پلاگین: وب سایت Codecanyon.
پلاگین رایگان جی کوئری Tablesaw
پلاگین رایگان جی کوئری Tablesaw برای نمایش جدول های واکنش گرا با حفظ کیفیت رزولوشن صفحه نمایش کاربرد دارد. این افزونه هنوز هم برای توسعه دهندگان یک چالش برای حفظ یک طراحی جدول واکنش گرا با وضوح تصویر مناسب است.
پلاگین جی کوئری Tablesaw شامل انواع مختلفی از حالت های تنظیم جدول است. لیست کوتاهی از حالت ها در زیر آمده است:
- Stack – این حالت، هدر های جدول را در حالت طرح بندی دو ستونی با سر صفحه در سمت چپ و اطلاعات را در سمت راست قرار می دهد. این اتفاق زمانی می افتد که عرض پورت نمایش / viewport کمتر از ۴۰em و یا ۶۴۰ پیکسل باشد.
- Column Toggle – این حالت این امکان را برای کاربران فراهم می کند که حالت نمایش و عدم نمایش ستون را تنظیم کنند.
- Swipe Mode – حالت Swipe Modeرا فعال می کند.
- Mode Switcher – برای تغییر بین حالت های مختلف استفاده می شود.
- Sortable – برای مرتب سازی داده های جدول استفاده می شود.
- Kitchen Sink – برای ترکیب همه حالت ها در یک واحد ترکیبی استفاده می شود.
- Check All – کادر انتخاب / checkbox را فعال می کند که برای تغییر حالت checkbox های دیگر در یک ستون استفاده می شود.
این پلاگین دارای استاندارد پشتیبانی A-grade برای پشتیبانی از مرورگر IE، مرورگر Android و Blackberry OS است.
دریافت پلاگین: GitHub.
پلاگین جدول Tablesorter -JQuery
پلاگین جی کوئری Tablesorter، یک پلاگین رایگان است که برای تبدیل یک جدول استاندارد HTML به یک جدول قابل مرتب سازی عالی استفاده می شود. بخش خوب افزونه این است که نیازی به بارگذاری صفحات در هنگام مرتب سازی جدول نیست. این پلاگین می تواند به راحتی بسیاری از داده ها از جمله داده های مرتبط در یک سلول را مرتب سازی و تجزیه کند.
با استفاده از Tablesorter شما می توانید ویژگی های زیر را داشته باشید: مرتب سازی بر اساس حروف الفبا و اعداد با الگوریتم های جدید، توابع فراخوان صفحه، ویدجت های متعدد، هدر های sticky، برنامه ی تم UI، فیلتر های ستون و resizer و غیره.
افزونه ی Tablesorter از Bootstrap V2-4 پشتیبانی می کند و دارای تجزیه کننده هایی برای مرتب سازی متن ساده، URL ها، اعداد شناور، اعداد صحیح، ارز، آدرس IP، تاریخ و زمان و غیره است. همچنین می توانید یک حالت سفارشی برای خودتان ایجاد کنید. این پلاگین از لحاظ اندازه ی کد خیلی کوچک، ۲۵k، است.
دریافت پلاگین: GitHub.
پلاگین جدول جی کوئری FooTable
پلاگین جی کوئری FooTable، جدول ساده ی HTML را واکنش گرا می کند. این پلاگین در jQuery ساخته شده و اساسا با Bootstrap کار می کند. و یک افزونه هوشمند است که باعث می شود جداول شما هوشمند تر از همیشه باشد.
افزونه ی FooTable به شما این امکان را می دهد که ستون های خاصی را در دستگاه های کوچکتر پنهان کنید و مقیاس جدول را برای جدول بزرگ حذف کنید. بنابراین کاربران می توانند هر ردیف را گسترش دهند تا محتویات ستون های پنهان را ببینند.
مهم نیست که چه تعداد ستون از داده ها را در جدول ایجاد شده توسط این افزونه داشته باشید، FooTable تمامی آن جداول HTML را به جداول واکنش گرا و قابل ارتقا تبدیل می کند.
این افزونه سه تم جدول برای کاربران خود آماده کرده و می تواند CSS سفارشی را در هر جای جدول اضافه کنند. با استفاده از انتخابگر CSS، می توانید هر جدول خاصی را در سایت خود قرار دهید.
دریافت پلاگین: GitHub.
این موارد، جالب ترین افزونه های جی کوئری هستند که می توانید در هنگام ایجاد یک جدول پویا در سایت خود داشته باشید. تمام پلاگین های ذکر شده در این جا برای انجام عملکرد های تقریبا یکسان در ایجاد جداول استفاده می شوند. هر یک از افزونه های ذکر شده در بالا می تواند بهترین گزینه برای شما باشد.
پس از خواندن این مقاله، ممکن است به پلاگینی برای وردپرس فکر کنید که برای اهداف مشابه این موارد استفاده می شود. برای این منظور، پلاگین وردپرس Ninja Tabs Plugin پیشنهاد می شود که با ترکیبی از کتابخانه جی کوئری و چارچوب Bootstrap در WordPress ساخته شده است.
نتیجه گیری
در پایان، لازم به گفتن است که در موارد عملی، راه های زیادی وجود دارد که می توانید جداول را در سایت خود اضافه کنید، این بستگی به نوع پلاگین هایی دارد که می خواهید در هر پلتفرم استفاده کنید. ممکن است یک کاربر وردپرس و یا غیر وردپرس باشید. اگر شما کاربر غیر وردپرس هستید، می توانید از هرکدام از موارد ذکر شده در لیست بالا استفاده کنید. یا اگر یک کاربر وردپرس هستید، به شدت پیشنهاد می شود که از جداول نینجا استفاده کنید و در این شکی نداشته باشید.
اگر قبلا از هر یک از آن ها استفاده کرده اید، تجربه ی خود در استفاده از افزونه ها را با ما در میان بگذارید. یا اگر هنوز از آن ها استفاده نکرده اید، سعی کنید یکی از آن ها را امتحان کنید. در صورت نیاز به هر گونه پیشنهادی در مورد این موضوع، ما را در این مورد آگاه سازید.
