طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت 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 ریسپانسیو در دو اندازه مختلف نمایش می دهد.

حتما بخوانید  10 کد کاربردی jquery - بخش دوم

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

 

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

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

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

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

حتما بخوانید  ساخت فرم تماس با ما اسلایدی با jQuery

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

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

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

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

جدیدترین آموزش های آنلاین



دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

افزایش امنیت سایت

مجوزهای ما

logo-samandehi

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

دانلود کتاب

عضویت در خبرنامه