ASP.Net GridView ထဲမှ Data ကို Client Side မှာပဲ ရှာဖွေခြင်း

Website တွေမှာ Client Side နှင့် Server Side အသွားအလာနည်းအောင် လုပ်ထားခြင်းဟာလည်း မိမိ Website ကို ပိုမိုမြန်ဆန်စေပါတယ်။  အခု Code လေးဟာ JQuery နှင့် ASP.Net GridView ကိုပေါင်းသုံးထားတာပါ။  ASP.Net Page တစ်ခုမှာ GridView ထဲမှ Data ကို Search လုပ်ဖို့ TextBox (ID = id_search) တစ်ခုနှင့် GridView (ID = table_example) တစ်ခုရှိပါမယ်။  TextBox ထဲမှာ တစ်ခုခု ရိုက်ထည့်လိုက်ရင် ထည့်လိုက်တဲ့ Data ကို GridView ထဲမှာ Live Search လုပ်ပေးတာဖြစ်ပါတယ်။  ဒီ Program ရေးဖို့ အောက်ပါ JQuery ဖိုင်ကို Download ချပါ။

https://github.com/riklomas/quicksearch

ပြီးရင် ASP.Net Page ရဲ့  body  မတိုင်ခင်မှာ။ 

jquery-2.0.3.js အဓိကဖိုင်ကို script tag နှင့် ထည့်ပါ။  ပြီးလျှင် Download ချထားတဲ့

jquery-quicksearch.js ဖိုင်ကို နောက်ထပ် script tag နှင့် နောက်တစ်ကြောင်းထည့်ပါ။

ပြီးလျှင် နောက်ထပ် script tag တခုဖွင့်ပြီး အောက်ပါ script code ကို ထည့်ရေးလိုက်ပါ။

    $(function () {

         $('input#id_search').quicksearch('table#table_example tbody tr');

    })

ပြီးလျှင် script tag ပိတ်ပါ။ ဒါတွေရေးပြီးတာနှင့် Run လိုက်ရင် Client Side မှာပဲ ရှာဖွေတဲ့ အလုပ်ကို လုပ်နိုင်ပါလိမ့်မည်။

(မှတ်ချက်။ November 10, 2013 နေ့က ဖေ့ဘွတ်မှာ ရေးသားခဲ့သော မှတ်စုတစ်ခုဖြစ်ပါသည်။)

အပြည့်အစုံ ဖတ်မယ်...

Meerket (JQuery Plugin for Splash Pages or Promotions)

JQuery ဟာ Web Technology ကို‌လေ့လာသူ‌တွေ မသိမဖြစ် သိရမယ့် နည်းပညာတစ်ခု Web Site Design ပိုင်းကို လုံးဝ အမြင်ဆန်းသစ်သွား‌အောင် ဖန်တီးနိုင်ပါတယ် JQuery ဟာ အသင့်ဖန်တီး ထားပြီးသား JavaScript (.js) ဖိုင်‌လေးကို HTML Tag ‌တွေထဲမှာ ထည့်သုံးရုံပါဘဲ။  Customize လည်းပြန်လုပ်နိုင်ပါတယ်။  ခု JQuery တစ်ခုဖြစ်တဲ့ Meeket အ‌ကြောင်းကို ‌ပြောမှာပါ။  ဒီ Meeket က မိမိ Web Site မှာ Splash Page တစ်ခု အဖြစ် (သို့) Promotions အစိတ်အပိုင်း တစ်ခုအ‌နေနဲ့ တင်ပြချင်တဲ့ အခါ သုံးတဲ့ JQuery Plugin ပါ သူ့ကို ဒီ‌နေရာ မှာ အ‌သေးစိတ် ‌လေ့လာနိုင်ပါတယ်။  နမူတာ‌တွေလဲ ‌ဖေါ်ပြထားပါတယ် ဘယ်လိုသုံးတယ် ဆိုတာလဲ အ‌သေးစိတ် ‌လေ့လာနိုင်ပါတယ်။  HTML, JavaScript အ‌ကြောင်းကို သိရုံနဲ့ JQuery ကို‌လေ့လာလို့ ရပါတယ် JQuery Code ‌တွေ‌လေ့လာမယ် ဆိုရင်‌တော့ အချိန်ယူရပါလိမ့်မယ်။

ကိုစစ်ကိုင်း

အပြည့်အစုံ ဖတ်မယ်...