جستجوی فیلد های جدول با ( ‌Bootstrap 4 )

جستجوی فیلد های جدول با ( ‌Bootstrap 4 )

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

                                                
                                                     


                                                
                                        

اول یک input میسازیم با type="text" و یک ID با یک مقدار مشخص بهش میدیم که منحصر به فردو تک مخصوص خودش باشه

                                                
                                                    

                                                
                                        

بعد یک جدول درست میکنیم و چندتا مفدار مشخص یا دلبخواه داخلش قرار میدیم . 

بعد از ساخت جدولمون , به <tbody> یک ID میدیم که منحصر به فردو تک باشه .

                                                
                                                    
Firstname Lastname Email
Majid Bahmani Majid@example.com
Alireza SHekofteh SHekofteh@mail.com
Peyman Doosti Peyman@yahoo.com
Mohammad Shabani a_r@test.com

حالا میایم کد های jquery مون رو اضافه میکنیم .

تو کد پایین گفتم که , بیا مقدار Input رو بگیر و با استفاده از .toLowerCase() حروف رو به متن کوچک تبدیل کن .

برای مثال (MAJID یا MajiD یا Majid) که گرفتی , به (majid) تبدیل کن.

بعد بیا مقادیر جدول رو بگیر و اونارم به حروف کوچیک تبدیل کن و با مقادیر input مقایسه کن , اگر جفت مقادیر با هم یکی بودند , تو جدول نمایش بده

                                                
                                                    
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});                                                
                                        
اشتراک

0 نظرات

پاسخ دهید