جداول داده ها
جدول داده های پایه
DataTables اکثر ویژگی‌های فعال را به‌طور پیش‌فرض دارد، بنابراین تنها کاری که برای استفاده از آن با جداول خود باید انجام دهید، فراخوانی ساختار است.\n $().DataTable();. KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual
cells, columns, rows or all cells.
لطفا فایل css زیر را در آدرس قرار دهیدhead element
\u003c!-- جدول های داده css --\u003e\n
مطمئن شوید که فایل‌های js زیر را در پایان قرار دهیدbody element
\u003c!-- Datatables js --\u003e\n
\u003ctable id\u003d\
مثال دکمه ها
پسوند Buttons برای DataTables مجموعه‌ای از گزینه‌ها، روش‌های API و استایل‌های رایج را برای نمایش دکمه‌ها در یک صفحه ارائه می‌کند.\n
لطفا فایل css زیر را در آدرس قرار دهیدhead element
\u003c!-- جدول های داده css --\u003e\n
مطمئن شوید که فایل‌های js زیر را در پایان قرار دهیدbody element
\u003c!-- Datatables js --\u003e\n
\u003ctable id\u003d\
انتخاب چند مورد
این مثال چند گزینه را نشان می دهد.
لطفا فایل css زیر را در آدرس قرار دهیدhead element
\u003c!-- جدول های داده css --\u003e\n
مطمئن شوید که فایل‌های js زیر را در پایان قرار دهیدbody element
\u003c!-- Datatables js --\u003e\n
\u003ctable id\u003d\
صفحه بندی جایگزین
کنترل صفحه پیش فرض ارائه شده توسط DataTables (دکمه های جلو و عقب با حداکثر 7 شماره صفحه در بین)\n
\u003ctable id\u003d\
اسکرول - عمودی
این مثال بدنه جدول DataTables را در حال حرکت در جهت عمودی نشان می دهد.
\u003ctable id\u003d\
اسکرول - افقی
DataTables این قابلیت را دارد که جداول را با اسکرول افقی نشان دهد که برای مواقعی که عریض دارید بسیار مفید است.\n
\u003ctable id\u003d\
هدرهای پیچیده با نمای ستون
هدرهای پیچیده (با استفاده ازcolspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.
| نام | اطلاعات منابع انسانی | مخاطب | ||
|---|---|---|---|---|
| موقعیت | حقوق | دفتر | گسترش | |
| آنجلیکا راموس | مدیر عامل (مدیر عامل) | 1,200,000 دلار | لندن | 5797 |
| آیری ساتو | حسابدار | 162700 دلار | توکیو | 5407 |
| اشتون کاکس | نویسنده فنی جوان | 86000 دلار | سانفرانسیسکو | 1562 |
| امید فوئنتس | دبیر، منشی | 109,850 دلار | سانفرانسیسکو | 6318 |
| اولیویا لیانگ | مهندس پشتیبانی | 234500 دلار | سنگاپور | 2120 |
| باتلر یونیتی | طراح بازاریابی | 85675 دلار | سانفرانسیسکو | 5384 |
| ببر نیکسون | معمار سیستم | 320800 دلار | ادینبورگ | 5421 |
| بردلی گریر | مهندس نرم افزار | 132000 دلار | لندن | 2558 |
| برندن واگنر | مهندس نرم افزار | 206850 دلار | سانفرانسیسکو | 1314 |
| برونو نش | مهندس نرم افزار | 163500 دلار | لندن | 6222 |
| نام | موقعیت | حقوق | دفتر | گسترش |
\u003ctable id\u003d\
سطر ایجاد پاسخ به تماس
مثال زیر نشان می دهد که چگونه می توان از تابع callback برای قالب بندی یک ردیف خاص در زمان ترسیم استفاده کرد.
\u003ctable id\u003d\
پس انداز دولتی
DataTables این امکان را دارد که بتواند وضعیت یک جدول (موقعیت صفحه بندی، وضعیت سفارش و غیره) را ذخیره کند.\n
\u003ctable id\u003d\
ستون های ثابت
هنگام استفاده از ویژگی پیمایش محور x DataTables، ممکن است بخواهید اکثر ستون‌ها را در سمت چپ یا راست ثابت کنید.
\u003ctable id\u003d\
هدر ثابت
FixedHeader سرصفحه و/یا پاورقی را در یک DataTable در جای خود ثابت می کند و اطمینان حاصل می کند که اطلاعات عنوان همیشه قابل مشاهده خواهد بود.
| نام | موقعیت | دفتر | سن | تاریخ شروع | حقوق |
|---|---|---|---|---|---|
| آنجلیکا راموس | مدیر عامل (مدیر عامل) | لندن | 47 | 2009/10/09 | 1,200,000 دلار |
| آیری ساتو | حسابدار | توکیو | 33 | 2008/11/28 | 162700 دلار |
| اشتون کاکس | نویسنده فنی جوان | سانفرانسیسکو | 66 | 2009/01/12 | 86000 دلار |
| امید فوئنتس | دبیر، منشی | سانفرانسیسکو | 41 | 2010/02/12 | 109,850 دلار |
| اولیویا لیانگ | مهندس پشتیبانی | سنگاپور | 64 | 2011/02/03 | 234500 دلار |
| باتلر یونیتی | طراح بازاریابی | سانفرانسیسکو | 47 | 2009/12/09 | 85675 دلار |
| ببر نیکسون | معمار سیستم | ادینبورگ | 61 | 2011/04/25 | 320800 دلار |
| بردلی گریر | مهندس نرم افزار | لندن | 41 | 2012/10/13 | 132000 دلار |
| برندن واگنر | مهندس نرم افزار | سانفرانسیسکو | 28 | 2011/06/07 | 206850 دلار |
| برونو نش | مهندس نرم افزار | لندن | 38 | 2011/05/03 | 163500 دلار |
| نام | موقعیت | دفتر | سن | تاریخ شروع | حقوق |
\u003ctable id\u003d\