-
2
سبد خرید
-
مجموع سفارش: ۱,۰۰۰.۰۰
- مشاهده سبد خرید تسویه حساب
- 4
-
15
-
آوا
مدیر
ابتدایی
پیکربندی صفر
DataTables بیشتر ویژگیها را بهطور پیشفرض فعال دارد، بنابراین تنها کاری که برای استفاده از آن با جداول خود باید انجام دهید، فراخوانی تابع ساخت آن است:().DataTable();.
جستجو، مرتبسازی و صفحهبندی بلافاصله به جدول اضافه خواهند شد، همانطور که در این مثال نشان داده شده است.
| نام | سمت | دفتر | سن | تاریخ شروع | حقوق | عملیات |
|---|---|---|---|---|---|---|
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 | |
| محمد | معمار سیستم | تهران | 61 | 1385/04/12 | 320,800 |
هدرهای پیچیده (rowspan و colspan)
هنگام استفاده از جدولها برای نمایش دادهها، اغلب میخواهید اطلاعات ستونها را به صورت گروهی نمایش دهید. DataTables کاملاً ازcolspan و rowspan در هدر جدول پشتیبانی میکند و لیسنرهای مرتبسازی لازم را به عنصر TH مناسب برای آن ستون اختصاص میدهد.
هر ستون باید یک سلول TH منحصر به فرد داشته باشد تا لیسنرها به آن اضافه شوند. به طور پیشفرض DataTables از سلول منحصر به فرد پایین برای ستون استفاده میکند تا لیسنر مرتبسازی را الصاق کند، اگر بیش از یک سلول برای یک ستون پیدا شود. گزینه orderCellsTop:option میتواند برای مشخص کردن اینکه DataTables از سلول بالا استفاده کند در صورت تمایل استفاده شود.
مثال زیر دارای دو مجموعه اطلاعات گروهبندی شده است که بر اساس colspan در هدر گروهبندی شدهاند.
ذخیرهسازی وضعیت
DataTables این امکان را دارد که وضعیت یک جدول (موقعیت صفحهبندی، حالت مرتبسازی و غیره) را ذخیره کند تا هنگام بارگذاری مجدد صفحه یا بازگشت کاربر پس از بازدید از یک زیرصفحه، قابل بازیابی باشد. این قابلیت ذخیرهسازی وضعیت با گزینهstateSave فعال میشود.
روش ذخیرهسازی داخلی از HTML5 localStorage و sessionStorage برای ذخیرهسازی کارآمد دادهها استفاده میکند. توجه داشته باشید که این بدان معناست که گزینه ذخیرهسازی وضعیت داخلی در IE6/7 کار نخواهد کرد زیرا این مرورگرها از این APIها پشتیبانی نمیکنند. گزینههای جایگزین شامل استفاده از کوکیها یا ذخیره وضعیت در سرور از طریق Ajax میباشد که از طریق گزینههای stateSaveCallback و stateLoadCallback قابل استفاده است.
مدت زمانی که وضعیت ذخیره شده معتبر است و میتواند برای بازیابی وضعیت جدول استفاده شود، با پارامتر اولیه stateDuration تنظیم میشود (به طور پیشفرض ۲ ساعت). این پارامتر همچنین کنترل میکند که از localStorage (۰ یا بیشتر) یا sessionStorage (-۱) برای ذخیره دادهها استفاده شود.
مثال زیر به سادگی نشان میدهد که ذخیرهسازی وضعیت با گزینه stateSave در DataTables فعال است.
| نام | سمت | دفتر | سن | تاریخ شروع | حقوق | عملیات |
|---|---|---|---|---|---|---|
| مهرناز | معمار سیستم | تهران | 61 | 1398/04/25 | 320,800 | |
| مهرناز | حسابدار | تهران | 63 | 1398/07/25 | 170,750 | |
| آرش | نویسنده فنی جوان | تهران | 66 | 1395/01/12 | 86,000 | |
| حمید | توسعهدهنده ارشد جاوااسکریپت | تهران | 22 | 1390/03/29 | 433,060 | |
| محمد | حسابدار | تهران | 33 | 1380/11/28 | 162,700 | |
| حمید | توسعهدهنده ارشد | تهران | 64 | 1390/04/09 | 138,575 | |
| زینب | مهندس نرم افزار | تهران | 63 | 1400/01/04 | 125,250 | |
| زینب | مهندس نرم افزار | تهران | 56 | 1390/06/01 | 115,000 | |
| حمید | توسعهدهنده ارشد | تهران | 43 | 1400/02/01 | 75,650 | |
| حمید | توسعهدهنده ارشد | تهران | 46 | 1398/12/06 | 145,600 | |
| حمید | توسعهدهنده ارشد | تهران | 27 | 1398/01/25 | 112,000 | |
| نام | سمت | دفتر | سن | تاریخ شروع | حقوق | عملیات |
اسکرول - عمودی، ارتفاع پویا
این مثال یک DataTable با اسکرول عمودی را نشان میدهد که از واحد CSS3vh برای تغییر اندازه دینامیک نمای جدول بر اساس ارتفاع پنجره مرورگر استفاده میکند. واحد vh عملاً درصدی از ارتفاع پنجره مرورگر است. بنابراین 50vh استفاده شده در این مثال برابر با 50٪ ارتفاع پنجره است. اندازه نمای جدول هنگام تغییر اندازه پنجره بهطور پویا بهروزرسانی میشود.
برای عملکرد صحیح واحد vh به مرورگر نسبتاً مدرن نیاز است. IE9+ از واحد vh و سایر مرورگرهای بهروز پشتیبانی میکند.
| نام | سمت | دفتر | سن | تاریخ شروع | حقوق | عملیات |
|---|---|---|---|---|---|---|
 متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 320,800 | |
 متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 170,750 | |
 متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 86,000 | |
 متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 433,060 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 162,700 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 372,000 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 137,500 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 452,500 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 136,200 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 645,750 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 234,500 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 86,500 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 183,000 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 183,000 | |
| متین |
توسعه دهنده جاوا | تهران | 61 | 1398/04/25 | 112,000 | |
| نام | سمت | دفتر | سن | تاریخ شروع | حقوق |