वेब अनुप्रयोगों में बड़े डेटासेट के साथ काम करते समय, प्रदर्शन और उपयोगकर्ता अनुभव के लिए पेजिनेशन महत्वपूर्ण है। मानक ऑफसेट-आधारित पेजिनेशन, आमतौर पर डेटा तालिकाओं के साथ उपयोग किया जाता है, बड़े डेटासेट के लिए अक्षम हो सकता है।

कर्सर-आधारित पेजिनेशन एक अधिक प्रभावी विकल्प प्रदान करता है, खासकर वास्तविक समय अपडेट या बड़े डेटा लोड को संभालते समय। इस लेख में, मैं आपको बताऊंगा कि मैं jQuery डेटाटेबल में कर्सर-आधारित पेजिनेशन कैसे लागू करता हूं।

jQuery डेटाटेबल में कर्सर-आधारित पेजिनेशन लागू करने के चरण

1.पर्यावरण की स्थापना
पृष्ठांकन तर्क में गोता लगाने से पहले, सुनिश्चित करें कि आपके पास निम्नलिखित हैं:

मैं। jQuery
द्वितीय. डेटाटेबल्स प्लगइन
iii. बैकएंड एपीआई (या डेटाबेस) जो कर्सर-आधारित पेजिनेशन का समर्थन करता है

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 डेटाटेबल आरंभीकरण
डेटाटेबल को 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. एपीआई और फ्रंटएंड सिंक को संभालना
जब भी कोई उपयोगकर्ता अगला या पिछला बटन पर क्लिक करता है, तो कर्सर अपडेट हो जाता है और बैकएंड पर भेज दिया जाता है। बैकएंड वर्तमान कर्सर स्थिति से शुरू करके डेटाबेस से रिकॉर्ड लाता है, और उचित डेटासेट को डेटाटेबल पर लौटाता है।

यहां सार है: यहां क्लिक करें

निष्कर्ष
बड़े डेटासेट या वास्तविक समय अनुप्रयोगों के साथ काम करते समय कर्सर-आधारित पेजिनेशन एक व्यावहारिक और कुशल दृष्टिकोण है। JQuery डेटाटेबल में कर्सर-आधारित पेजिनेशन लागू करके, आप प्रदर्शन बढ़ाते हैं, उपयोगकर्ता अनुभव में सुधार करते हैं और सटीक डेटा हैंडलिंग सुनिश्चित करते हैं। यह तकनीक आधुनिक अनुप्रयोगों के लिए विशेष रूप से उपयोगी है जो तेज़, स्केलेबल और विश्वसनीय डेटा प्रबंधन की मांग करते हैं।

मुझे आशा है कि यह मार्गदर्शिका आपको अपनी परियोजनाओं में कर्सर-आधारित पेजिनेशन लागू करने में मदद करेगी। हैप्पी कोडिंग!