1. قرار دادن محتوا با HTML

این <table> تگ تگ معنایی HTML است که برای نمایش داده ها در یک صفحه وب استفاده می شود. ما خود را قرار خواهیم داد <table> تگ در یک div جدول کانتینر که به ما امکان می دهد یک استایل پاسخگو در CSS اضافه کنیم.

جدول ما شامل سرصفحه جدول خواهد بود، thead و محتوای جدول، tbody برچسب ها در هدر جدول خود، دکمه‌هایی را در هر کدام قرار می‌دهیم th سلولی که برای مدیریت عملکرد مرتب سازی استفاده می شود. سلول‌های محتوای جدول با استفاده از داده‌های پاسخ JSON ما با جاوا اسکریپت اضافه می‌شوند.

2. ساخت جدول ریسپانسیو با CSS

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

می‌توانیم با قرار دادن جدول در یک کانتینر جدول که عرض کل صفحه است با ویژگی اسکرول سرریز از شر این مسائل خلاص شویم. به این ترتیب، جدول همیشه به اندازه کل صفحه است و نیازی به کوچک کردن سلول ها به دلیل سرریز قابل پیمایش نیست. ما همچنین ویژگی‌های min-width را در سلول‌های جدول خود اضافه می‌کنیم تا از بسته‌بندی متن جلوگیری کنیم.

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

این CSS مورد نیاز است تا جدول ما قابل پیمایش باشد:

سپس می توانیم بقیه استایل خود را اضافه کنیم:

3. قرار دادن داده های JSON در یک جدول HTML

برای این مثال، ما با یک پاسخ JSON تجزیه شده ساختگی کار خواهیم کرد. این چیزی است که داده های ما به نظر می رسد:

ما داده ها را در داخل خود قرار می دهیم <tbody id="table-content"> تگ کنید بنابراین ما آن عنصر را در جاوا اسکریپت هدف قرار خواهیم داد.

محتوای ردیف بر اساس هر شیء درون ما خواهد بود response.pokedata. بیایید یک تابع برای ایجاد یک ردیف جدید بر اساس داده های شی تعریف کنیم:

در این تابع از Object.keys() روشی برای دریافت کلیدهای شی به صورت آرایه. این چیزی است که مقدار بازگشتی به نظر می رسد:

Object.keys(obj) (9) ['name', 'type', 'hp', 'attack', 'defense', 'spAttack', 'spDefense', 'speed', 'total']Object.keys(obj) (9) ['name', 'type', 'hp', 'attack', 'defense', 'spAttack', 'spDefense', 'speed', 'total']Object.keys(obj) (9) ['name', 'type', 'hp', 'attack', 'defense', 'spAttack', 'spDefense', 'speed', 'total']
Object.keys() یک آرایه حاوی کلیدهای شی را برمی گرداند

هنگامی که آرایه کلیدهای شی را بدست آوردیم، با استفاده از کلید هر کلید را حلقه می کنیم .map() روش. متد map تابعی را که به آن داده ایم در هر آیتم آرایه انجام می دهد.

در این تابع نقشه، ما یک سلول جدید برای هر آیتم در آرایه ایجاد می کنیم و سلول داخلی HTML را به عنوان مقدار کلید شی مربوطه تنظیم می کنیم.

نگاشت از طریق شی با استفاده از آرایه کلیدهانگاشت از طریق شی با استفاده از آرایه کلیدهانگاشت از طریق شی با استفاده از آرایه کلیدها
نگاشت از طریق شی با استفاده از آرایه کلیدها

در نهایت، سلولی را که ایجاد کرده‌ایم به ردیفی که در ابتدای تابع تعریف شده است، اضافه می‌کنیم .appendChild() روش.

اکنون که تابع ایجاد ردیف خود را داریم، تابعی را تعریف می کنیم تا از طریق آن حلقه بزنیم response.pokedata آرایه کنید و هر سطر جدید را به ما اضافه کنید tableContent عنصر

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

4. مرتب سازی داده ها با جاوا اسکریپت

اکنون که جدول خود را ایجاد کرده ایم، بیایید قابلیت مرتب سازی را اضافه کنیم. در HTML خود، دکمه‌هایی را در سلول‌های هدر گنجانده‌ایم که کلیدهای شی را به عنوان شناسه خود داشتند. بیایید اکنون آن دکمه ها را هدف قرار دهیم:

ما می‌خواهیم مرتب‌سازی داده‌ها را بر اساس دکمه‌ای که کلیک می‌شود انجام دهیم و همچنین ویژگی‌ای را شامل شود که هنگام کلیک روی دکمه، جهت مرتب‌سازی (صعودی یا نزولی) را تغییر می‌دهد.

ما می توانیم استفاده کنیم .sort() روشی برای مدیریت مرتب سازی داده ها در ما response.pokedata آرایه. متد مرتب سازی تابعی را می گیرد که دو پارامتر مختلف را با هم مقایسه می کند و آنها را بر اساس پاسخ تابع مرتب می کند:







compareFunction(a, b) ارزش بازگشتی ترتیب مرتب سازی
> 0 مرتب سازی a بعد از b
< 0 مرتب سازی a قبل از b
=== 0 نظم اصلی را حفظ کنید a و b

منبع: MDN

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

جهش آرایه هنگام استفاده از .sort()

ما می توانیم با استفاده از آرایه اصلی خود از جهش جلوگیری کنیم نحو گسترش […]

اجتناب از جهش آرایه با استفاده از نحو گسترش

اکنون می توانیم تابع مرتب سازی خود را ایجاد کنیم. منطق تابع مرتب سازی ما به این صورت خواهد بود:

  1. محتوای موجود در عنصر tableContent را پاک کنید
  2. داده ها را بر اساس پارامتر و جهت انتخاب شده مرتب کنید
  3. داده های مرتب شده را با استفاده از getTableContent عملکرد

تابع مرتب سازی ما سه پارامتر دارد:

  • data: آرایه ای که باید مرتب شود
  • param: مقداری که برای مرتب سازی آرایه استفاده می شود
  • direction: آرایه را به ترتیب صعودی یا نزولی مرتب کنید. این پارامتر پیش فرض مقدار روی “صعود” تنظیم شده است.

ما محتوای عنصر tableContent خود را با تنظیم innerHTML روی یک رشته خالی پاک می کنیم. سپس از .sort() روش و direction پارامتر برای تعیین اینکه چگونه داده ها باید مرتب شوند. تابع مقایسه را معکوس می کنیم تا به ترتیب نزولی مرتب شوند. استفاده از تابع مقایسه به این ترتیب به ما امکان می دهد داده ها را بدون توجه به نوع مقدار (رشته، عدد صحیح، شناور و غیره) مرتب کنیم.

در نهایت، ما از عبور sortedData به عنوان مقدار جدید در محتوای جدول ما.

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

در این تابع، با تنظیم a، ضامن را کنترل می کنیم data-dir ویژگی روی دکمه های ما برای تعیین جهت مرتب سازی. همچنین CSS خود را به‌روزرسانی می‌کنیم تا بسته به جهت مرتب‌سازی، نمادی در کنار دکمه نمایش داده شود:

ما نمی‌خواهیم نمادها روی همه دکمه‌هایی که قبلاً کلیک کرده‌اید نشان داده شوند، بنابراین یک resetButtons عملکردی که ویژگی data-dir را در هر دکمه ای که دکمه کلیک نشده است حذف می کند.

ما آن تابع را به شنونده رویداد دکمه خود منتقل می کنیم تا هر زمان که دکمه جدیدی کلیک شد، دکمه های قبلی را بازنشانی کنیم

نتیجه

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