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

آموزش فیلتر Filter اطلاعات در بوت استرپ 4

دوره های مرتبط با این مقاله

آموزش فیلتر (Filter) اطلاعات در Bootstrap 4:

بوت استرپ دارای کامپوننتی برای سرچ یا فیلتر اطلاعات نیست و کلا انجام آن در Bootstrap امکان پذیر نیست.

اما با ترکیب کلاس های بوت استرپ برای دیزاین المنت ها و استفاده از کدهای jQuery می توان فیلترهای جستجو (Search Filter) های خاصی ایجاد نمود. در ادامه به تشریح چند مثال کاربردی خواهیم پرداخت.

آموزش فیلتر اطلاعات جدول در بوت استرپ 4:

در کد مثال عملی زیر، یک جدول اطلاعاتی طراحی شده است که در کادر بالای آن می توانید به جستجوی اطلاعات درون جدول بپردازید.

عملیات جستجو در این مثال، حساس به حروف بزرگ و کوچک (Case Sensitive) نیست. به کد مثال توجه نموده و خروجی را مشاهده کنید. سپس به تشریح کد آن خواهیم پرداخت :

مثال 1

امتحان کنید

توضیح مثال : از jQuery برای چرخش (loop) درون هر سطر جدول استفاده کرده ایم تا ببینیم آیا متنی (text value) معادل و برابر با مقدار وارد شده در کادر ورود متن (input value) وجود دارد یا خیر.

متد toggle()، سطر (row) هایی از جدول که با مقدار مورد جستجو، یکسان نیستند را با تغییر خاصیت display : name مخفی می کند.

همچنین از کلاس ()toLowerCase برای تبدیل تمامی حروف به حروف کوچک استفاده کرده ایم، اما جستجو ما غیر حساس به حروف بزرگ و کوچک است (Case Insensitive) بوده و فرقی بین John با john نخواهد بود.

آموزش فیلتر اطلاعات در لیست ها در بوت استرپ 4:

می توانید درون آیتم های یک لیست نیز عملیات جستجو انجام دهید. در کد مثال عملی زیر، یک لیست داریم که با تایپ حروف در کادر متن، عملیات جستجو انجام می شود. تنها فرق با کد مثال قبل برای جدول این است که به جای گردش در سطر های جدول، این بار در درون آیتم های لیست (تگ li در ul) می پردازیم. ضمنا این بار، مثال حساس به حروف بزرگ و کوچک است :

مثال 2

Filterable List

Type something in the input field to search the list for specific items:


  • First item
  • Second item
  • Third item
  • Fourth
امتحان کنید

آموزش جستجو اطلاعات درون هر عنصر بوت استرپ 4:

می توانید عملیات جستجو را در هر عنصر و المنت دیگر هم که دارای عناصر فرزند است، انجام دهید.

در کد مثال عملی زیر، به جستجوی اطلاعات درون المنت های فرزند تگ div پرداخته ایم. این بار به گردش درون متن عناصر فرزند تگ مادر (div) پرداخته شده است :

مثال 3

Filter Anything

Type something in the input field to search for a specific text inside the div element with id="myDIV":

I am a paragraph.

I am a div element inside div.

Another paragraph.

امتحان کنید
  • 30
  •    0
  • تاریخ ارسال :   1398/08/16

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .