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

آموزش پلاگین Fancytable در JQuery

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

آموزش پلاگین Fancytable در JQuery

پلاگین JQuery fancyTable قابلیت مرتب سازی ، صفحه بندی و جستجو روی ردیف ها و ستون ها به جداول اضافه میکند. این پلاگین با فریم ورک های محبوب CSS ، مانند بوت استرپ 3 و 4 سازگار است.


ویژگی های این پلاگین :

  • مرتب سازی براساس هر ستون با کلیک روی هدر هر ستون
  • سفارشی کردن استایل ها و فرم جستجو
  • معین کردن تعداد ردیف های هر صفحه

برای استفاده از این پلاگین ، ابتدا لینک های جاوا اسکریپت و CSS را در پروژه قرار میدهیم.

< script src="https://code.jquery.com/jquery-3.3.1.min.js" >< /script >
< script src="src/fancyTable.js" >< /script >

جهت افزودن قابلیت مرتب سازی ، جدول باید دارای عنصر Thead باشد

< table id="example" class="example" >
  < thead >
    < tr >
      < th >Col A< /th >
      < th >Col B< /th >
      < th >Col C< /th >
    < /tr >
  < /thead >
  < tbody >
    ...
  < /tbody >
< /table >

براساس قطعه کد زیر شما میتوانید روی جدول این پلاگین را اعمال کنید و قابلیت های صفحه بندی ، مرتب سازی ، جستجو را به آن اضافه کنید

$ (".example").fancyTable({
  sortColumn:0,// column number for initial sorting
  sortOrder:'descending',// 'desc', 'descending', 'asc', 'ascending', -1 (descending) and 1 (ascending)
  sortable:true,
  pagination:true,// default: false
  searchable:true,
  globalSearch:true,
  globalSearchExcludeColumns: [2,5]// exclude column 2 & 5
});

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

$ (".example").fancyTable({
  pagination:false,
  paginationClass:"btn btn-light",
  paginationClassActive:"active",
  pagClosest: 3,
  perPage: 10,
});

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

$ (".example").fancyTable({
  inputStyle:"",
  inputPlaceholder:"Search..."
});

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

$ (".example").fancyTable({
  onInit:function(){
    // do something
  },
});
  • 40
  •    56
  • تاریخ ارسال :   1398/10/23

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

ارسال

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

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