首頁 > web前端 > js教程 > 這裡是我如何在 jQuery Datatable 中實作基於遊標的分頁。

這裡是我如何在 jQuery Datatable 中實作基於遊標的分頁。

Mary-Kate Olsen
發布: 2024-09-24 06:17:02
原創
933 人瀏覽過

Here

在 Web 應用程式中處理大型資料集時,分頁對於效能和使用者體驗至關重要。標準的基於偏移量的分頁(通常與資料表一起使用)對於大型資料集可能效率低。

基於遊標的分頁提供了一種效能更高的替代方案,特別是在處理即時更新或大量資料載入時。在本文中,我將引導您了解如何在 jQuery DataTable 中實作基於遊標的分頁。

在 jQuery DataTable 中實作基於遊標的分頁的步驟

1.搭建環境
在深入研究分頁邏輯之前,請確保您具備以下條件:

我。 jQuery
二.資料表插件
三.支援基於遊標的分頁的後端API(或資料庫)

2.設定後端API
基於遊標的分頁很大程度上依賴後端傳回必要的資料。假設我們正在使用傳回 JSON 回應的 REST API,包括:

資料:記錄數組
遊標:唯一標識符,例如 id 或時間戳,指示資料集中的目前位置。

這是來自伺服器的分頁回應的範例:

1

2

3

4

5

6

7

8

9

10

{

  "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.jQuery資料表初始化
DataTable 使用 jQuery 初始化並與後端 API 連結。這是基本結構:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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.自訂分頁控制項

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

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.處理API與前端同步
每次使用者點擊「下一步」或「上一步」按鈕時,遊標都會更新並傳送到後端。後端從資料庫中取得記錄,從目前遊標位置開始,並將適當的資料集傳回DataTable。

重點:點此

結論
在處理大型資料集或即時應用程式時,基於遊標的分頁是一種實用且高效的方法。透過在 jQuery DataTable 中實現基於遊標的分頁,您可以增強效能、改善使用者體驗並確保準確的資料處理。該技術對於需要快速、可擴展且可靠的資料管理的現代應用程式特別有用。

我希望本指南可以幫助您在自己的專案中實現基於遊標的分頁。快樂編碼!

以上是這裡是我如何在 jQuery Datatable 中實作基於遊標的分頁。的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板