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

قابلیت جستجو با فیلتر سفارشی در DataTables با پردازش سمت سرور

قابلیت جستجو با فیلتر سفارشی در DataTables با پردازش سمت سرور

DataTables یک پلاگین jQuery برای نمایش لیستی از سطر ها در جدول HTML با اینترفیس تعاملی است. این جدول شامل قابلیت هایی مثل جستجو, صفحه بندی, مرتب سازی, فیلتر و خیلی از موارد دیگر است.

با امکان پردازش سمت سرور (server-side) می توانید داده ها را بصورت داینامیک از دیتابیس دریافت و در جداول HTML به همراه قالبیت های جستجو، مرتب سازی و صفحه بندی لیست کنید.

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

به طور معمول، قابلیت های جستجو و فیلتر در DataTables استفاده می شوند اما شما می توانید با API از جستجو سفارشی و فیلتر ورودی های (input) استفاده کنید.

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

  • خواندن و لیست کردن داده ها از دیتابیس MySQL با استفاده از پردازش سمت سرور DataTables
  • افزودن مرتب سازی و صفحه بندی به جداول HTML با DataTables
  • افزودن جستجو سفارشی و فیلتر ورودی ها به DataTables

 

ساخت جداول دیتابیس

برای ذخیره اطلاعات اعضا نیاز به یک جدول در دیتابیس داریم.

کد SQL زیر جدول members را با چند فیلد پایه در دیتابیس MySQL ایجاد می کند.

 

افزودن DataTables به جدول HTML با جستجو سفارشی و فیلتر (index.html)

در این صفحه وب، داده های داینامیک در یک جدول HTML به همراه جستجو سفارشی و فیلتر توسط پلاگین جی کوئری DataTables اضافه می شود.

کتابخانه JS و CSS دیتاتیبل:

فایل های کتابخانه DataTables و jQuery را فراخوانی می کنیم.

 

جدول HTML به همراه جستجو و فیلتر ورودی:

یک جدول HTML می سازیم و سلکتور #memListTable را به این المان اضافه می کنیم.

  • افزودن فیلد جستجو و منو آبشاری فیلتر برای مرتب سازی سطرها بر اساس جنسیت

 

حتما بخوانید  تابع urlencode در php و اینکد URL

افزودن DataTables به جدول HTML

کلاس DataTables API را با متد DataTable() ایجاد و آبجکت جدول را پیکربندی می کنیم.

  • برای غیرفعال سازی جستجو پیش فرض، مقدار گزینه searching را false ست می کنیم.
  • برای فعالسازی پردازش سمت سرور
    • مقدار prossesing را true قرار میدیم.
    • مقدار serverSide را true قرار میدیم.
    • آدرس اسکریپت سمت سرور را (getData.php) را گزینه url شئ ajax مشخص می کنیم
  • برای فعال کردن جستجو سفارشی و فیلتر از متد extend() بهره می بریم.
    • نام فیلد سفارشی را مشخص و مقدار input را انتخاب کنید

 

اسکریپت سمت سرور (getData.php)

فایل getData.php برای انجام عملیات پردازش سمت سرور به همراه جستجو و فیلتر استفاده می شود.

برای آسان سازی عملیات ساخت کویری SQL ، از کلاس SSP استفاده می کنیم (ssp.class.php)

  • تابع simple() کلاس SSP، به ما کمک می کند که داده های اعضا را از دیتابیس بر اساس کوئری جستحو و فیلتر توسط PHP و MySQL دریافت کنیم.

 

کتابخانه SSP

کلاس SSP برای هندل عمبیات مربوط به دیتابیس استفاده می شود. این کلاس شامل توابع کمکی برای ساخت کوئری ها برای پردازش سمت سرور به همراه جستجو و فیلتر استفاده می شود.

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

 

جمع بندی

با این آموزش و اسکریپت شما می توانید قابلیت جستجو سفارشی و فیلتر را به پلاگین DataTables به راحتی اضافه کنید.

شما می توانید پردازش سمت سرور DataTables را فعال کنید و ورودی سفارشی را برای جستجو، فیلتر و مرتب سازی سطرها اضافه کنید.

همچنین، جدول HTML و لیست داده ها را می توانید بر اساس نیاز پروژه سفارش سازی کنید.

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

 

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

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

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

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

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

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

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

    دوره های آموزشی