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

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

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

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

 

DataTable توابع بازگشتی هدر و فوتر برای دستکاری داده های HTML در یک رابط کاربری بصری را می دهد.

برای پیاده سازی بخش پردازش سمت سرور, من از کلاس SSP مربوط به DataTables برای ساخت داده های درخواست به همراه پارامترهای مورد نیاز کردم.

این پاسخ در یک فرمت JSON اینکد و در ظاهر جدول توسط AJAX لود می شود.

 

پیاده سازی DataTables در HTML

کتابخانه DataTables به عنوان بخشی از سورس کد از زیر این پست قابل دانلود است.

آی دی جدول HTML به عنوان سلکتور jQuery برای ساخت DataTables به همراه گزینه های موردنیاز استفاده شده است.

Callback هدر DataTable برای نمایش جستجو

در این بخش از آموزش قابلیت جستجو در DataTables , کد تابع بازگشتی DataTables را می بینیم. در این تابع بازگشتی, هدر جدول به گزینه جستجو تغییر پیدا می کند.

با داشتن رفرنس فیلد جستجو برای هر هدر ستون, رویداد keyup برای درخواست جستجو اجرا می شود.

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

کد PHP برای دریافت داده های DataTables

در فایل server.php , اطلاعات دیتابیس, جداول, ستون ها, کلید اصلی مشخص و به عنوان داده های داینامیک برای DataTables استفاده شده اند.

از کلاس SSP نیز برای واکشی (fetch) کردن از دیتابیس با روش پردازش سمت سرور بهره بردیم. این نتایج در فرمت JSON اینکد و به عنوان پاسخ ajax بازگشت داده می شوند.

 

کلاس SSP

این کلاس کانکشن دیتابیس را برای ساخت کویری به منظور فیلتر, مرتب سازی و… داده ها را انجام می دهد. کد کامل این کلاس به همراه سورس کد نهایی این پست قرار دارد.

اسکریپت دیتابیس

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

خروجی – قابلیت جستجو در DataTables

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

قابلیت جستجو در DataTables

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

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

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

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

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۶)

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

  1. علیرضا علیرضایی ۲۴ شهریور ۱۳۹۹

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

    پاسخ
    1. حسن شفیعی ۲۴ شهریور ۱۳۹۹

      سلام ممنون. خوشحالیم که مفید واقع شده
      جایی که دیتاتیبل را صدا می زنید یعنی $(‘X’).DataTable() ، مقدار زیر را بهش اضافه کنید :
      “language”: {
      “url”: “//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Persian.json”
      }
      موفق باشید.

      پاسخ
  2. ابوالفضل صالحی ۱۹ مرداد ۱۳۹۹

    سلام
    وقتتون بخیر
    ممنونم بابت آموزش فوق العاده خوبتون
    من یه جدول دارم که میخوام با استفاده از Dropdown list فیلتر روش اعمال کنم
    ممنون میشم راهنماییم کنین

    پاسخ
    1. حسن شفیعی ۱۹ مرداد ۱۳۹۹

      سلام ممنون. خوشحالیم که مفید واقع شده.
      باید با استفاده از dropdown اون مواردی که میخواید بصورت فیلتر اعمال بشه رو بسازید و داخل یک فرم html قرار بدید و بعد یک دکمه هم بزارید و کاربر با انتخاب و تغییر اون فیلدها به سمت php سابمیت کنه و شما در سمت php با بررسی این موارد کویری sql رو بنویسید تا نتایج دلخواه نمایش داده بشه.

      پاسخ
  3. sodabeh ۲۸ مرداد ۱۳۹۸

    سلام ممنون از آموزش کاربردیتون برای اینکه فارسی رو علامت سوال نده اولین راه کارو انجام دادم جواب نداد میشه بگید کد دومی که گفتینو باید کدوم قسمت بنویسم؟

    پاسخ
    1. حسن شفیعی ۲۹ مرداد ۱۳۹۸

      سلام خوشحالیم که مفید واقع شده.
      از سورس کد آخر همین پست استفاده کنید.
      موفق باشید.

      پاسخ
      1. Sodabeh ۲۹ مرداد ۱۳۹۸

        شرمنده کدوم قسمت کدام باید اضافه کنم چون اضافه کردم داخل سرور ارور گرفتم اگر بگید کجای کدم اضافه کنم ممنون میشم

        پاسخ
      2. حسن شفیعی ۲۹ مرداد ۱۳۹۸

        کل فایل سورس کد رو باید استفاده کنید و بعد یکی یکی فایل ها رو به پروژه اصلیتون اضافه کنید در این حین از console و network که از f12 مرورگر قابل دسترس است کمک بگیرید تا بتوانید ببینید که فایل ها بدرستی لود شدند و مشکلی در اجرای کدها وجود ندارد.
        موفق باشید.

        پاسخ
  4. شقایق ۲۷ مرداد ۱۳۹۸

    خیلی ممنون درست شد زمپ خاموش روشن کردم

    پاسخ
  5. شقایق ۲۶ مرداد ۱۳۹۸

    $sql_details = array(
    ‘user’ => ‘root’,
    ‘pass’ => ”,
    ‘db’ => ‘blog_samples’,
    ‘host’ => ‘localhost’,
    );
    ببخشید من پسووردم باید خالی باشه و نام دیتا بیسم همین گذاشتم میشه بپرسم باتوجه به اروری ک توی کامنت قبل گفتم مشکلم چی میتونه باشه؟

    پاسخ
  6. شقایق ۲۶ مرداد ۱۳۹۸

    فقط سطر هارو نشون میده ینی جدولی که برام بالا میاره خالیه

    پاسخ
    1. حسن شفیعی ۲۶ مرداد ۱۳۹۸

      اگر بدرستی اطلاعات دیتابیس رو وارد کردید و همچنین فایل tbl_contact.sql رو ایمپورت کرده باشید همه چی اوکی خواهد بود و اطلاعات بدرستی نمایش داده می شوند.

      پاسخ
  7. شقایق ۲۶ مرداد ۱۳۹۸

    DataTables warning: table id=tbl-contact – An error occurred while connecting to the database. The error reported by the server was: SQLSTATE[HY000] [1045] Access denied for user ‘root’@’localhost’ (using password: YES)

    سلام خسته نباشید من SQL ایمپرت کردم ولی الان این ارور گرفتم باید چکار کنم؟

    پاسخ
    1. حسن شفیعی ۲۶ مرداد ۱۳۹۸

      سلام ممنون. مشکل از اطلاعات ورود دیتابیس است که در فایل server.php و خط ۴۵ باید اطلاعات ورود و نام دیتابیس را تغییر بدید

      پاسخ
  8. امیر نیسی ۲۳ دی ۱۳۹۷

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

    پاسخ
    1. حسن شفیعی ۲۳ دی ۱۳۹۷

      سلام. خوشحالم که مفید واقع شده
      مقدار charset’ => ‘utf8’ به آرایه اتصال به دیتابیس اضافه کنید. (آرایه $sql_details)
      یا اینکه به اینصورت عمل کنید $db->exec(“set names utf8”);

      موفق باشید.

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