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

- visibility ٢ mode_comment

در این مطلب میخوام یک پلاگین 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 مربوط به هرکدام :

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

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

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

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

comment دیدگاه کاربران
Hosein Mousavi

سلام این پلاگین با حروف فارسی و اعداد فارسی مشکل داره و به این صورت هست که مثلا این اعداد رو اگه داشته باشیم
1و2و12000و5و6و19000000000و4
میاد به این صورت مرتب میشه
1و12000و19000000000و4و5و6
آیا راهکاری براش دارید؟

محمد اسفندیاری

منظورتون از اعداد فارسی چیه؟ من همین اعدادی که گفتید رو وارد کردم و هیچ مشکلی نداره و به درستی مرتب میکنه….
برای زمان فارسی چیز از پیش ساخته شده ای وجود نداره و یا اینکه من نتونستم پیدا کنم ولی خودتون میتونین یکی بسازید
لینکهای زیر میتونه بهتون کمک کنه
https://stackoverflow.com/questions/28310314/tablesort-for-multiple-languages
https://github.com/mottie/tablesorter/
https://mottie.github.io/tablesorter/docs/example-locale-sort.html
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.