50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

ساخت DataTables ریسپانسیو

  • منتشر شده در تاریخ

ساخت DataTables ریسپانسیو

ساخت DataTables ریسپانسیو به شما امکان مخفی کردن ستون ها بصورت اتوماتیک و بر اساس سایز صفحه نمایش را می دهد. قابلیت رسیپانسیو می تواند توسط افزودن calss=’responsive’ در HTML یا افزودن آپشن responsive بصورت true هنگام ساخت Datatables , بوجود بیاد.

مخفی کردن ستون ها بصورت اتوماتیک از سمت راست انجام می شود (پیش فرض).می توانیم ستون هایی که قرار است مخفی شود را با تعیین priority مشخص کنیم.و همچنین می توانیم این قابلیت را با مشخص کردن data-priority تعیین کرد.

در این آموزش, یک مثال برای ساخت DataTables ریسپانسیو به همراه سفارش سازی اولیت مخفی کردن ستون ها بصورت اتوماتیک داریم.

این مثال ها به شما نحوه تعریف کردن اولویت (priority) با آپشن columnDef در زمان ساخت DataTables و استفاده از خاصیت data-priority در HTML5 را نشان می دهد.

در آموزش قبلی, نحوه محاسبه جمع اعداد ستون DataTables را دیدیم.

ساخت DataTables ریسپانسیو

ساخت DataTables ریسپانسیو با اولویت

در این مثال, من از خاصیت columnDef برای مشخص کردن اولویت ریسپانسیو به ستون ها استفاده کردم. در زمان مقداردهی اولیه Datatables , priority و ایندکس target را برای ستون ها مشخص کردم.

در این مثال, ۵ ستون نام,نام خانوادگی, آدرس, شماره تماس و تاریخ را داریم.

به ترتیب اولویت ۱ و ۲ را به ستون نام و تاریخ دادم. بنابراین زمانی که سایز صفحه نمایش کوچکتر شده, این ستون ها بر اساس اولیت بندی مخفی می شوند.

خروجی : ساخت DataTables ریسپانسیو

اسکرین شات های زیر به شما خروجی این مثال از ساخت DataTables ریسپانسیو در دو اندازه مختلف نمایش می دهد.

ساخت DataTables ریسپانسیو

 

سفارش سازی اولویت ستون ها با خاصیت Data در HTML5

در این مثال, من برای مشخص کردن اولویت مخفی شدن ستون ها از data-priority به همراه کد HTML استفاده کردم. در این کد, من کلاس responsive را نیز به جدول ها دادم.

در اینجا هر دو ستون آخری یعنی Phone و DOB را به ترتیب اولیت ۱ و ۲ قرار دادم.

امیدوارم از آموزش ساخت DataTables ریسپانسیو نهایت استفاده را برده باشید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۲)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. ترنم ۱۵ آبان ۱۳۹۹

    خیلی بحالی.مطالب سایتت مفید و ارزنده ست.موفق باشید

    پاسخ
    1. حسن شفیعی ۱۵ آبان ۱۳۹۹

      سلام. ممنونم.
      خوشحالیم که مفید واقع شده.
      موفق باشید.

      پاسخ
دوره های آموزشی