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

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

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

htmlCopy code
<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 كما يلي:

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

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

htmlCopy code
<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 لتحديد مظهر الرأس الثابت:

cssCopy code
#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 المناسبة.

htmlCopy code
<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 لتجنب تحديثات متكررة.

htmlCopy code
<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. التعامل مع البيانات الديناميكية:

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

htmlCopy code
<script>
  function setupTable() {
    // قم بتحديث متغيرات الجدول والعمود هنا
    // ...

    // قم بتشغيل الكود لتثبيت الرأس أو الأعمدة
    // ...
  }

  // استدعاء الدالة عند تحميل البيانات
  $(document).ready(function() {
    setupTable();
  });
script>

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