البرمجة

تحسين تجربة المستخدم: جداول HTML الثابتة باستخدام jQuery

في عالم تطوير الويب، يعد استخدام جداول HTML ذات رؤوس وأعمدة ثابتة باستخدام jQuery أمرًا شائعًا وفعالًا لتحسين تجربة المستخدم وتحسين أداء الصفحة. يتيح لنا الجمع بين هاتين التقنيتين إمكانية إنشاء جداول يمكن تمريرها بسلاسة، مع القدرة على تثبيت رأس الجدول أو أعمدته بحيث يظل مرئيًا أثناء التمرير.

قبل البدء في شرح كيفية تحقيق ذلك باستخدام jQuery، دعنا نلقي نظرة على هيكل جدول HTML الأساسي:

html
<table id="myTable"> <thead> <tr> <th>Header 1th> <th>Header 2th> tr> thead> <tbody> <tr> <td>Row 1, Cell 1td> <td>Row 1, Cell 2td> tr> tbody> table>

الآن، سنقوم بتحقيق جداول ذات رأس وأعمدة ثابتة باستخدام jQuery. أولاً، تأكد من أنك قمت بتضمين مكتبة jQuery في صفحتك. يمكنك القيام بذلك عبر رابط CDN كما يلي:

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

ثم، يمكنك استخدام السيناريو التالي باستخدام jQuery لتثبيت رأس الجدول:

html
<script> $(document).ready(function() { var tableOffset = $("#myTable").offset().top; $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= tableOffset) { $("#myTable thead").addClass("fixed"); } else { $("#myTable thead").removeClass("fixed"); } }); }); script>

وتأكد من أن لديك بعض أنماط CSS لتحديد مظهر الرأس الثابت:

css
#myTable thead { background-color: #ffffff; /* خلفية الرأس الثابتة */ position: fixed; width: 100%; top: 0; display: none; /* للتلاعب بالظهور/الاختفاء حسب الحاجة */ } #myTable tbody { margin-top: 40px; /* لتفادي اختفاء المحتوى تحت الرأس الثابتة */ }

مع هذا السيناريو، سيظل رأس الجدول مرئيًا أثناء التمرير. يمكنك أيضًا تكوين السيناريو لتثبيت أعمدة بدلاً من رأس الجدول، حسب متطلبات تصميم صفحتك.

في الختام، يُظهر هذا النهج كيف يمكن دمج تقنيات HTML و jQuery بشكل إبداعي لتحسين واجهة المستخدم وتحسين أداء الصفحة.

المزيد من المعلومات

بالطبع، دعونا نوسع نطاق الحديث حول استخدام جداول HTML ذات رؤوس وأعمدة ثابتة باستخدام jQuery، ونتعمق في بعض المزيد من المعلومات حول الخصائص والتقنيات المستخدمة.

1. تخصيص تثبيت الأعمدة:

في السيناريو السابق، قد قمنا بتثبيت رأس الجدول أثناء التمرير، ولكن يمكنك أيضًا توسيع هذا النهج لتثبيت أعمدة محددة بدلاً من الرأس. يمكن ذلك عبر إضافة فئة fixed-column للأعمدة المراد تثبيتها وتطبيق تنسيقات CSS المناسبة.

html
<script> $(document).ready(function() { var columnOffset = $("#myTable th.fixed-column").offset().left; $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= tableOffset) { $("#myTable thead").addClass("fixed"); $("#myTable th.fixed-column").addClass("fixed"); } else { $("#myTable thead").removeClass("fixed"); $("#myTable th.fixed-column").removeClass("fixed"); } }); $(window).scroll(function() { var scrollLeft = $(window).scrollLeft(); $("#myTable th.fixed-column").css({ "transform": "translateX(" + scrollLeft + "px)" }); }); }); script>

2. تحسين أداء التمرير:

تحسين أداء التمرير للجداول الكبيرة يعتبر أمرًا هامًا. يمكن تحقيق ذلك من خلال استخدام تقنيات تأخير التحديثات أثناء التمرير (Debouncing) باستخدام دالة setTimeout لتجنب تحديثات متكررة.

html
<script> var debounce; $(document).ready(function() { $(window).scroll(function() { clearTimeout(debounce); debounce = setTimeout(function() { var scroll = $(window).scrollTop(); if (scroll >= tableOffset) { $("#myTable thead").addClass("fixed"); $("#myTable th.fixed-column").addClass("fixed"); } else { $("#myTable thead").removeClass("fixed"); $("#myTable th.fixed-column").removeClass("fixed"); } }, 50); // تأخير التحديث لـ 50 مللي ثانية }); }); script>

3. التعامل مع البيانات الديناميكية:

إذا كنت تقوم بتحميل البيانات بشكل دينامي إلى الجدول، يجب عليك إعادة تشغيل الكود الخاص بتثبيت الرأس أو الأعمدة بعد تحميل البيانات لضمان أن التثبيت يعمل بشكل صحيح.

html
<script> function setupTable() { // قم بتحديث متغيرات الجدول والعمود هنا // ... // قم بتشغيل الكود لتثبيت الرأس أو الأعمدة // ... } // استدعاء الدالة عند تحميل البيانات $(document).ready(function() { setupTable(); }); script>

هذه بعض النقاط التي يمكن أن تكون ذات أهمية عند استخدام جداول HTML ذات رؤوس وأعمدة ثابتة باستخدام jQuery. يمكنك دمج هذه التقنيات وتعديلها بما يتناسب مع احتياجات مشروعك لتحقيق تجربة مستخدم محسنة وأداء ممتاز.

مقالات ذات صلة

زر الذهاب إلى الأعلى
إغلاق

أنت تستخدم إضافة Adblock

يرجى تعطيل مانع الإعلانات حيث أن موقعنا غير مزعج ولا بأس من عرض الأعلانات لك فهي تعتبر كمصدر دخل لنا و دعم مقدم منك لنا لنستمر في تقديم المحتوى المناسب و المفيد لك فلا تبخل بدعمنا عزيزي الزائر