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

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

خطوات تنفيذ ترقيم الصفحات المستند إلى المؤشر في jQuery DataTable

1.تهيئة البيئة
قبل الغوص في منطق ترقيم الصفحات، تأكد من أن لديك ما يلي:

أنا. مسج
ثانيا. البرنامج المساعد DataTables
ثالثا. واجهة برمجة تطبيقات الواجهة الخلفية (أو قاعدة البيانات) التي تدعم ترقيم الصفحات المستند إلى المؤشر

2.تكوين واجهة برمجة التطبيقات الخلفية
يعتمد ترقيم الصفحات المستند إلى المؤشر بشكل كبير على الواجهة الخلفية لإرجاع البيانات الضرورية. لنفترض أننا نعمل مع REST API الذي يُرجع استجابة JSON، بما في ذلك:

البيانات: مجموعة من السجلات
المؤشر: معرف فريد، مثل المعرف أو الطابع الزمني، يشير إلى الموضع الحالي في مجموعة البيانات.

إليك مثال على استجابة مرقّمة من الخادم:

{
  "data": [
    {"id": 101, "name": "John Doe", "email": "[email protected]"},
    {"id": 102, "name": "Jane Smith", "email": "[email protected]"}
  ],
  "pagination": {
     "next_cursor": "eyJpZCI6MTgsIl9wb2ludHNUb05leHRJdGVtcyI6dHJ1ZX0",
        "prev_cursor": "eyJpZCI6MTAsIl9wb2ludHNUb05leHRJdGVtcyI6ZmFsc2V9"
   }
}

3.jQuery DataTable تهيئة
تتم تهيئة DataTable باستخدام jQuery وربطه بواجهة برمجة التطبيقات الخلفية. إليك البنية الأساسية:

var ajaxurl = "your-ajax-url";

var oTable = jQuery("#product_list_tbl").DataTable({
  preDrawCallback: function (settings) {
    var dt = jQuery("#product_list_tbl").DataTable();
    var settings = dt.settings();
    if (settings[0].jqXHR) {
      settings[0].jqXHR.abort();
    }
  },
  pagingType: 'simple',
  pageLength: 9,
  serverMethod: "post",
  ajax: {
    url: ajaxurl   "?action=search_ids",
    data: function (d) {
      d.search_id = jQuery("#search_id").val();
      // other params
    }
  },
});

4.تخصيص عناصر التحكم في ترقيم الصفحات

var ajaxurl = "your-ajax-url";

var oTable = jQuery("#product_list_tbl").DataTable({
  preDrawCallback: function (settings) {
    var dt = jQuery("#product_list_tbl").DataTable();
    var settings = dt.settings();
    if (settings[0].jqXHR) {
      settings[0].jqXHR.abort();
    }
  },
  pagingType: 'simple',
  pageLength: 9,
  serverMethod: "post",
  ajax: {
    url: ajaxurl   "?action=search_ids",
    data: function (d) {
      d.cursor = jQuery("#product_list_tbl").data('current-cursor') || '';
      d.search_id = jQuery("#search_id").val();
      // other params
    }
  },
  drawCallback: function (json) {

    const pagination = json.json.pagination;

    if (pagination.next_cursor) {
      jQuery(document).find('.paginate_button.next').removeClass('disabled');
      jQuery(document).find('.paginate_button.next').attr('data-cursor', json.json.pagination.next_cursor ?? '' );
    } else {
      jQuery(document).find('.paginate_button.next').addClass('disabled');
    }

    if (pagination.prev_cursor) {
      jQuery(document).find('.paginate_button.previous').removeClass('disabled');
      jQuery(document).find('.paginate_button.previous').attr('data-cursor', json.json.pagination.prev_cursor ?? '' );
    } else {
      jQuery(document).find('.paginate_button.previous').addClass('disabled');
    }

  },
});

 // Custom click handlers for pagination buttons
  jQuery(document).on('click', '#product_list_tbl_paginate .paginate_button', function(e) {
    e.preventDefault();
    e.stopPropagation(); // Prevent event from bubbling up

    // Only proceed if this is actually a 'next' or 'previous' button
    if (!jQuery(this).hasClass('next') && !jQuery(this).hasClass('previous')) {
      return;
    }

    var cursor = jQuery(this).attr('data-cursor');

    // Set the cursor directly on the table element
    jQuery("#product_list_tbl").data('current-cursor', cursor);

    // Reload the table with the new cursor
    oTable.ajax.reload();
  });

  // Disable default DataTables click handlers for pagination
  jQuery(document).off('click.DT', '#product_list_tbl_paginate .paginate_button');

5.معالجة واجهة برمجة التطبيقات ومزامنة الواجهة الأمامية
في كل مرة ينقر فيها المستخدم على زر التالي أو السابق، يتم تحديث المؤشر وإرساله إلى الواجهة الخلفية. تقوم الواجهة الخلفية بجلب السجلات من قاعدة البيانات، بدءًا من موضع المؤشر الحالي، وإرجاع مجموعة البيانات المناسبة إلى DataTable.

إليك الجوهر: انقر هنا

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

آمل أن يساعدك هذا الدليل في تنفيذ ترقيم الصفحات المستند إلى المؤشر في مشاريعك الخاصة. برمجة سعيدة!