به طور خلاصه میتوانید امکانات متعدد این پلاگین را در زیر مشاهده کنید:
- صفحه بندی دادهها با تعداد رکوردهای قابل تغییر در هر صفحه (variable length pagination)
- فیلتر کردن دادههای بایند شده به جدول (on-the-fly filtering)
- مرتب سازی دادهها بر اساس ستونهای مختلف با قابلیت تشخیص نوع داده ستون (Multi-column sorting with data type detection)
- تغییر اندازه ستونها به صورت هوشمند (Smart handling of column widths)
- نمایش دادهها در جدول از اکثر data sourceها (DOM، یک آرایه جاوا اسکریپتی، یک فایل، یا با استفاده از پردازش سمت سروری (سی شارپ، php و غیره) )
- قابلیت جهانی شدن یا منطبق شدن با زبانهای مختلف دنیا (Fully Internationalisable)
- قابلیت تعویض theme آن با استفاده از jQuery UI ThemeRoller
- وجود داشتن 2900 آزمون واحد برای آن (backed by a suite of 2900 unit test)
- وجود داشتن پلاگینهای متعدد برای آن
- و رایگان بودن آن
برای استفاده از این پلاگین ابتدا به اینجا مراجعه کرده و آنرا به همراه مثالهای آن که در یک فایل فشرده هستند را دانلود کنید. بعد از دانلود و خارج کردن فایل دانلودی از حالت فشرده، وارد پوشه examples از آن که بشوید میتوانید مثالهای متعدد در رابطه با این پلاگین را مشاهده نمائید.
مثالهای این پلاگین یکی از بهترین منابع یادگیری آن هستند. در این سری از مقالات هم از روی همین مثالها پیش میرویم. برای این کار، بعد از مراجعه به پوشه examples فایل index.html را باز کنید و مثال اول را (Zero Configuration) کلیک کنید.
نتیجه حاصل از اجرای مثال Zero Configuration چیزی شبیه تصویر زیر است:
تصویر را شماره گزاری کرده ام تا بتوانم راحتتر آنرا برایتان تشریح کنم.
- دادههای درون جدول (10 تای اول) که در قسمت tbody جدول قرار دارند
- قسمت thead جدول
- قسمت tfoot جدول
- اندازه صفحه (page size)
- کادر جستجو که در کلیه ستونهای جدول جستجویی را انجام میدهد و دادهها بر اساس آن فیلتر میشوند.
- قابلیت مرتب سازی رکوردها بر اساس یک ستون خاص به صورت صعودی یا نزولی
- اطلاعات مربوط به رکوردهای جاری و تعداد کل رکوردها
- قابلیت تغییر صفحه با دکمههای previous و next
تشریح مثال Zero Configuration :
برای استفاده از این پلاگین، باید ارجاعی به کتابخانه jquery و نیز فایل jquery.dataTables.js وجود داشته باشد. این دو فایل در زیر پوشه media/js قرار گرفته اند.
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<style type="text/css" title="currentStyle"> @import "../../media/css/demo_page.css"; @import "../../media/css/demo_table.css"; </style>
این نکته هم جا نمونه که برای اعمال شدن پلاگین DataTables به یک جدول که به طور مثال id جدول example هست، به صورت زیر عمل میکنیم:
$(document).ready(function() { $('#example').dataTable(); } );