亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在頁面加載時從表中加載一定數量的行,并僅在用戶加載它們時加載更多行?

如何在頁面加載時從表中加載一定數量的行,并僅在用戶加載它們時加載更多行?

PHP
慕田峪7331174 2022-11-12 13:27:27
我有一個使用 DataTables 的表,它包含大量行,因此這會導致頁面加載非常緩慢,因為我假設瀏覽器會等到表填滿后再顯示頁面。我只想加載表格的一頁(10 行),并且只在用戶瀏覽表格時顯示更多數據,顯示加載標志也很好。我已經研究并聽說過一個名為“deferRender”的 DataTables 函數,它應該可以滿足我的需求,但我無法讓它與我的表一起使用。我的表有 8 列 + html 是使用 PHP 生成的,它根據文本文件中的數據構建表:<?php     $tdcount = 1; $numtd = 8; // number of cells per row     $str = "<table id=\"table1\" class=\"table1 table table-striped table-bordered\">                                     <thead>                                     <th>1</th>                                     <th>2</th>                                     <th>3</th>                                     <th>4</th>                                     <th>5</th>                                     <th>6</th>                                     <th>7</th>                                     <th>8</th>                 </thead>                                     <tbody> ";     $f = fopen("tabledata.txt", "r");     if ( $f === FALSE ) { exit;    }     while (!feof($f)) {         $arrM = explode(",",fgets($f));         $row = current ( $arrM );         if ($tdcount == 1)             $str .= "<tr>"; $str .= "<td>$row </td>";         if ($tdcount == $numtd) {             $str .= "</tr>";             $tdcount = 1;         } else {             $tdcount++;         }     }     if ($tdcount!= 1) {         while ($tdcount <= $numtd) {             $str .= "<td>&nbsp;</td>"; $tdcount++;         } $str .= "</tr>";     }     $str .= "</tbody></table>";     echo $str;然后我使用以下代碼將其轉換為數據表:<script>        $(document).ready(function() {        $('#table1').basictable({          forceResponsive: false          });        $('#table1').DataTable( { "order": [[ 0, "desc" ]] } );          });</script>我已閱讀此處的說明:https ://datatables.net/examples/server_side/defer_loading.html 并且知道我需要向 JS 添加參數:"processing": true,"serverSide": true,"ajax": "scripts/server_processing.php","deferLoading": 57并使用 server_processing 腳本,但是該示例僅顯示如何在連接到數據庫時使用它,而不是在使用 php.ini 從文本文件加載數據時使用它。我怎樣才能做到這一點?
查看完整描述

1 回答

?
手掌心

TA貢獻1942條經驗 獲得超3個贊

這將純粹關注“服務器端”解決方案的 DataTables 方面。如何編寫支持它所需的服務器端邏輯超出了此答案的范圍。但我希望這些說明至少能夠闡明該邏輯需要是什么,以及您可以如何處理它。


假設

假設您有一個文本文件,其中包含 1,000 行這樣的數據(或一百萬行 - 但太多行無法同時發送到瀏覽器和 DataTables)。文本文件是一個簡單的管道分隔文件,包含三個字段:


id|name|description

1|widget_1|This is a description for widget 1

2|widget_2|This is a description for widget 2

3|widget_3|This is a description for widget 3

...

1000|widget_1000|This is a description for widget 1000

您希望使用服務器端處理一次將 10 個項目發送到 DataTables。


您的數據映射到一個簡單的 JSON 結構,就像這樣 - 一組對象(每個對象是一個記錄):


[

    {

        "id": 1,

        "name": "widget_1",

        "description": "This is a description for widget 1"

    },

    {

        "id": 2,

        "name": "widget_2",

        "description": "This is a description for widget 2"

    },

    ... // more records...

]

數據表定義

您的數據表定義看起來像這樣 - 在這個階段它故意非常簡單:


<body>


<div style="margin: 20px;">


<table id="demo" class="display dataTable cell-border" style="width:100%">

</table>


</div>


<script type="text/javascript">


  $(document).ready(function() {

    $('#demo').DataTable({

      serverSide: true,

      ajax: {

        url: 'http://localhost:7000/data',

        type: 'POST'

      },

      columns: [

        { title: 'ID',

          data: 'id' },

        { title: 'Name',

          data: 'name' },

        { title: 'Description',

          data: 'description' }

      ]

    });


  });

</script>


</body>

初步反應

當網頁首次顯示時,它會向 URL ( http://localhost:7000/data ) 發送一個初始 POST 請求,并期望從 Web 服務器接收 JSON 響應,其中包含要顯示的數據.


由于 DataTables 正在使用serverSide: true,因此 DataTables 將期望 JSON 具有特定的結構,如此處所述。


具體來說,服務器必須將所有必填字段(draw、recordsTotal、recordsFiltered和data)添加到它發送到 DataTables 的 JSON 中。


在我們的例子中,它看起來像這樣 - 請注意,它只是我們之前提到的 JSON 結構,添加了一些額外的元數據字段:


{

    "draw": 1,

    "recordsTotal": 1000,

    "recordsFiltered": 1000,

    "data": [{

        "id": 1,

        "name": "widget_1",

        "description": "This is a description for widget 1"

    }, {

        "id": 2,

        "name": "widget_2",

        "description": "This is a description for widget 2"

    }, {

        "id": 3,

        "name": "widget_3",

        "description": "This is a description for widget 3"

    }, {

        "id": 4,

        "name": "widget_4",

        "description": "This is a description for widget 4"

    }, {

        "id": 5,

        "name": "widget_5",

        "description": "This is a description for widget 5"

    }, {

        "id": 6,

        "name": "widget_6",

        "description": "This is a description for widget 6"

    }, {

        "id": 7,

        "name": "widget_7",

        "description": "This is a description for widget 7"

    }, {

        "id": 8,

        "name": "widget_8",

        "description": "This is a description for widget 8"

    }, {

        "id": 9,

        "name": "widget_9",

        "description": "This is a description for widget 9"

    }, {

        "id": 10,

        "name": "widget_10",

        "description": "This is a description for widget 10"

    }]

}

服務器負責構建此 JSON - 服務器數據集的前 10 條記錄。服務器還告訴 DataTables 它總共有 1,000 條記錄,并且它還沒有過濾掉任何數據(還) - 因此過濾后總共還有 1,000 條記錄。


DataTables 需要所有這些信息,所以它知道要顯示多少個分頁按鈕,以及要顯示哪些分頁數據。


請注意,完成所有這些工作完全是服務器的責任——這就是它被稱為“服務器端”處理的原因。


客戶端(瀏覽器)只有 10 條記錄要呈現 - 所以很快就會發生。

http://img1.sycdn.imooc.com//636f2ee200010ea709160496.jpg

(我剛剛注意到屏幕截圖提到了“500 條記錄”——這是我的服務器端代碼中的一個錯誤——沒有過濾器,所以我需要修復它)。


后續請求

當用戶單擊頁面導航按鈕(例如頁面“4”)時,會觸發從 DataTables 到服務器的新請求。DataTables 使用此處描述的字段自動構建此請求。


請求作為表單數據發送。


在我們的示例中,請求如下所示:


"Form data": {

    "draw": "5",

    "columns[0][data]": "id",

    "columns[0][name]": "",

    "columns[0][searchable]": "true",

    "columns[0][orderable]": "true",

    "columns[0][search][value]": "",

    "columns[0][search][regex]": "false",

    "columns[1][data]": "name",

    "columns[1][name]": "",

    "columns[1][searchable]": "true",

    "columns[1][orderable]": "true",

    "columns[1][search][value]": "",

    "columns[1][search][regex]": "false",

    "columns[2][data]": "description",

    "columns[2][name]": "",

    "columns[2][searchable]": "true",

    "columns[2][orderable]": "true",

    "columns[2][search][value]": "",

    "columns[2][search][regex]": "false",

    "order[0][column]": "1",

    "order[0][dir]": "asc",

    "start": "30",

    "length": "10",

    "search[value]": "",

    "search[regex]": "false"

}

這些字段告訴服務器它需要知道的一切,因此它可以準備正確的響應。


在我們的例子中,最重要的字段是:


"start": "30",

"length": "10"

從第 30 行開始,提供 10 條記錄。


同樣,服務器有責任準備一個準確反映所請求數據的 JSON 響應。


在我們的例子中,這意味著服務器需要有邏輯來讀取文本文件到正確的起點(數據行 31 - 記住偏移量從零開始),總共 10 行(第 31 到 40 行)。


上述來自 DataTables 的請求中的其他字段描述了如何對數據進行排序和過濾。在我們的例子中沒有過濾器"search[value]": "",- 數據將按第一列升序排序。


最后的筆記

我故意沒有描述以下內容:


1) 您的服務器端代碼如何處理它發送回 DataTables 的 JSON 響應的創建;


2) 服務器端代碼如何解析它從 DataTables 收到的表單請求。


這完全取決于您的服務器端技術是什么。數據表不在乎。它只是傳遞 JSON 消息——它與服務器端實現分離——它應該是這樣的。


關于此處描述的“延遲渲染”選項,這是一個增強功能,您可以在需要時選擇添加它。但我建議首先讓更基本的服務器端實現工作。


查看完整回答
反對 回復 2022-11-12
  • 1 回答
  • 0 關注
  • 115 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號