Inilah Cara saya melaksanakan penomboran berasaskan kursor dalam jQuery Datatable.

Apabila bekerja dengan set data yang besar dalam aplikasi web, penomboran adalah penting untuk prestasi dan pengalaman pengguna. Penomboran berasaskan offset standard, yang biasa digunakan dengan jadual data, boleh menjadi tidak cekap untuk set data yang besar.

Penomboran berasaskan kursor menawarkan alternatif yang lebih berprestasi, terutamanya apabila mengendalikan kemas kini masa nyata atau pemuatan data yang besar. Dalam artikel ini, saya akan membimbing anda melalui cara saya melaksanakan penomboran berasaskan kursor dalam jQuery DataTable.

Langkah untuk Melaksanakan Penomboran Berasaskan Kursor dalam jQuery DataTable

1.Menyediakan Persekitaran
Sebelum menyelami logik penomboran, pastikan anda mempunyai perkara berikut:

i. jQuery
ii. Pemalam DataTables
iii. API Bahagian Belakang (atau pangkalan data) yang menyokong penomboran berasaskan kursor

2.Mengkonfigurasi API Bahagian Belakang
Penomboran berasaskan kursor sangat bergantung pada bahagian belakang untuk mengembalikan data yang diperlukan. Katakan kita sedang bekerja dengan API REST yang mengembalikan respons JSON, termasuk:

Data: Satu susunan rekod
Kursor: Pengecam unik, seperti id atau cap masa, yang menunjukkan kedudukan semasa dalam set data.

Berikut ialah contoh respons bernombor daripada pelayan:

{
  "data": [
    {"id": 101, "name": "John Doe", "email": "john@example.com"},
    {"id": 102, "name": "Jane Smith", "email": "jane@example.com"}
  ],
  "pagination": {
     "next_cursor": "eyJpZCI6MTgsIl9wb2ludHNUb05leHRJdGVtcyI6dHJ1ZX0",
        "prev_cursor": "eyJpZCI6MTAsIl9wb2ludHNUb05leHRJdGVtcyI6ZmFsc2V9"
   }
}

3.Permulaan Jadual Data jQuery
DataTable dimulakan menggunakan jQuery dan dipautkan dengan API bahagian belakang. Berikut ialah struktur asas:

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.Sesuaikan kawalan Penomboran

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. Mengendalikan API dan Penyegerakan Bahagian Hadapan
Setiap kali pengguna mengklik pada butang Seterusnya atau Sebelumnya, kursor dikemas kini dan dihantar ke bahagian belakang. Bahagian belakang mengambil rekod daripada pangkalan data, bermula dari kedudukan kursor semasa dan mengembalikan set data yang sesuai kepada Jadual Data.

Inilah intipatinya: Klik Sini

Kesimpulan
Penomboran berasaskan kursor ialah pendekatan yang praktikal dan cekap apabila bekerja dengan set data besar atau aplikasi masa nyata. Dengan melaksanakan penomboran berasaskan kursor dalam jQuery DataTable, anda meningkatkan prestasi, meningkatkan pengalaman pengguna dan memastikan pengendalian data yang tepat. Teknik ini amat berguna untuk aplikasi moden yang menuntut pengurusan data yang pantas, berskala dan boleh dipercayai.

Saya harap panduan ini membantu anda melaksanakan penomboran berasaskan kursor dalam projek anda sendiri. Selamat mengekod!

Atas ialah kandungan terperinci Inilah Cara saya melaksanakan penomboran berasaskan kursor dalam jQuery Datatable.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!