illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

tableSorter : پلاگین jQuery برای Sort کردن ستونهای جدول

0 1704 ۳۰ بهمن ۹۳

در این مطلب میخوام یک پلاگین jQuery بنام tableSorter رو خدمت شما معرفی کنم و اونو آموزش بدم.

tablesorter

با استفاده از این پلاگین میتونین خاصیتی رو به جدولهاتون اضافه کنید که ، کاربر بتونه هر ستون رو بصورت نزولی و صعودی مرتب کنه و دیگه نیازی به PHP و کدهای سمت سرور نیست و Javascript اینکارو براتون انجام میده و صفحه بدون اینکه Reload بشه ، جدولتون مرتب میشه. پشتیبانی این پلاگین از مرورگرها بسیار خوب هست. بصورت زیر :

  • Firefox 2+
  • Internet Explorer 6+
  • Safari 2+
  • Opera 9+
  • Konqueror

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

sorter1

با کلیک روی این عنوان ، صعودی یا نزولی بودن ستون تغییر میکنه و متناسب با اون ، علامت مناسب نشون داده میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jQuery و jquery.tablesorter.min.js نیاز داریم. من این فایلهارو در انتهای این مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای HTML و CSS مورد نظر رو نوشتیم.

حتما باید عناوین جدول رو در تگ thead و بدنه رو در تگ tbody قرار بدین ، تا پلاگین به نحو احسنت کار کنه. در بالا اینکارو انجام دادیم و استایل ساده ای به اون دادیم. استفاده از این پلاگین خیلی ساده هست ، بصورت زیر :

میبینید که در ابتدا جدول رو انتخاب کردیم و بعد از اون متد tablesorter رو برای اون فراخوانی کردیم. حالا اگر خروجی رو در مرورگر ببینید ، میبینید که با کلیک بر روی هر عنوان ، ستون مربوط به اون مرتب میشه. ولی تا اینجا ظاهرش ساده هست و هیچکدوم از اون آیکون ها هم وجود ندارن. برای اضافه کردن اونا باید بصورت زیر عمل کنید :

  •  cssAsc : با استفاده از این ویژگی نام کلاس هدر نشان دهنده ی حالت صعودی رو مشخص میکنید
  • cssDesc : با استفاده از این ویژگی نام کلاس هدر نشان دهنده ی حالت نزولی رو مشخص میکنید

خود این پلاگین به تمام عناوین ، کلاس header رو نسبت میده ، من کدهای CSS زیر رو برای این کلاس قرار دادم :

همونطور که در بالا دیدید ، برای عناوین نشاندهنده ی نزولی کلاس headerSortDown و کلاس صعودی headerSortUp رو مشخص کردیم. کدهای CSS مربوط به هرکدام :

بهمین راحتی جدولمون مرتب شد. شما میتونین به راحتی هر چه تمامتر استایل و آیکونهای اون رو تغییر بدین.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram