1. 首頁
  2. 問答
  3. jQuery DataTables Scroller Ajax未被第二次調用

jQuery DataTables Scroller Ajax未被第二次調用

2015-04-22 76 views
1

我正在使用DataTables jQuery插件。我遇到了使用Scroller plugin的問題。當滾動到達容器的末尾時，它不會加載更多的數據。jQuery DataTables Scroller Ajax未被第二次調用

初始化jQuery中：

$("#data-table").dataTable({ 
    "bLengthChange": false, 
    "paging": false, 
    "scrollCollapse": true, 
    "searching": false, 
    "serverSide": true, 
    "ordering": false, 
    "ajax": { 
     "url": CONST_WEB_SERVICE_URL + "GetData", 
     "type": "POST" 

    }, 
    "scroller": { 
     "loadingIndicator": true, 
     "trace": true 
    }, 

    "deferRender": true, 
    "dom": "lfrtipS", 
    "scrollY": "400px" 
    });

我的.NET Web服務回報數據表時先讀這個JSON數據：

{ 
"draw": 1, 
"data": [{ 
    "id": 1.0, 
    "name": "88354b7e-c150-4985-b596-113fb3f9f591", 
    "rating": 40.0, 
    "votes": 1 
}, { 
    "id": 2.0, 
    "name": "82f5243d-b68c-4306-a83b-7c5178661bab", 
    "rating": 40.0, 
    "votes": 2 
}, { 
    "id": 3.0, 
    "name": "591c23cb-2ad6-472f-b347-96411bd7ca13", 
    "rating": 40.0, 
    "votes": 3 
}, { 
    "id": 4.0, 
    "name": "cd7eed2e-f175-40c6-86ef-1ef26fdffe62", 
    "rating": 40.0, 
    "votes": 4 
}, { 
    "id": 5.0, 
    "name": "46717542-a68a-48f9-92c7-21fbe94bbee6", 
    "rating": 40.0, 
    "votes": 5 
}, { 
    "id": 6.0, 
    "name": "d73561ac-5885-4fc3-b9ed-2c672298c5e6", 
    "rating": 40.0, 
    "votes": 6 
}, { 
    "id": 7.0, 
    "name": "6c18c250-c8e2-4e66-bb63-d13112cbbb4d", 
    "rating": 40.0, 
    "votes": 7 
}, { 
    "id": 8.0, 
    "name": "3fefb6f7-a35b-44fe-b1be-7dc6cfe59f69", 
    "rating": 40.0, 
    "votes": 8 
}, { 
    "id": 9.0, 
    "name": "7ba7d370-1250-4349-8228-4997b1c9d309", 
    "rating": 40.0, 
    "votes": 9 
}, { 
    "id": 10.0, 
    "name": "56c15c4b-7617-4519-bfbe-aa82d78fd352", 
    "rating": 40.0, 
    "votes": 10 
}, { 
    "id": 11.0, 
    "name": "7c2f49dc-9dad-4521-8a08-707ec60da31f", 
    "rating": 40.0, 
    "votes": 11 
}, { 
    "id": 12.0, 
    "name": "2ca7d4dd-d1df-47dd-8001-e32e0fad0105", 
    "rating": 40.0, 
    "votes": 12 
}, { 
    "id": 13.0, 
    "name": "7ccd94f1-63d7-4d39-8c75-940a3c687b52", 
    "rating": 40.0, 
    "votes": 13 
}, { 
    "id": 14.0, 
    "name": "b3c24654-d27b-497d-bd75-fb3b1f675262", 
    "rating": 40.0, 
    "votes": 14 
}, { 
    "id": 15.0, 
    "name": "68d28801-87c1-4f19-a96e-55b6a33fe609", 
    "rating": 40.0, 
    "votes": 15 
}, { 
    "id": 16.0, 
    "name": "51c880c5-eb5d-41c2-8c07-960097d0f687", 
    "rating": 40.0, 
    "votes": 16 
}, { 
    "id": 17.0, 
    "name": "518fd582-131e-47a2-ae8d-418650433c24", 
    "rating": 40.0, 
    "votes": 17 
}, { 
    "id": 18.0, 
    "name": "6f9f132c-c70b-4a79-8316-c833003ff615", 
    "rating": 40.0, 
    "votes": 18 
}, { 
    "id": 19.0, 
    "name": "bf189639-2e7a-49b3-86c7-5b6a2210635d", 
    "rating": 40.0, 
    "votes": 19 
}, { 
    "id": 20.0, 
    "name": "035940bc-ab81-488d-9853-cab963841508", 
    "rating": 40.0, 
    "votes": 20 
}, { 
    "id": 21.0, 
    "name": "1cb3b0a2-d03b-4792-b5a7-00cc1aeca33a", 
    "rating": 40.0, 
    "votes": 21 
}, { 
    "id": 22.0, 
    "name": "7934e41d-759f-4903-97df-5f0c15547c43", 
    "rating": 40.0, 
    "votes": 22 
}, { 
    "id": 23.0, 
    "name": "e2fe8827-0c02-49ee-9069-65f3349a2086", 
    "rating": 40.0, 
    "votes": 23 
}, { 
    "id": 24.0, 
    "name": "0822288b-5df3-4aba-82fa-0a302eff5411", 
    "rating": 40.0, 
    "votes": 24 
}, { 
    "id": 25.0, 
    "name": "e2b0f808-d0f7-4a80-bd06-4f34c63dcce6", 
    "rating": 40.0, 
    "votes": 25 
}, { 
    "id": 26.0, 
    "name": "7fe22ed9-7629-4f23-8901-f5d328800c21", 
    "rating": 40.0, 
    "votes": 26 
}, { 
    "id": 27.0, 
    "name": "18364942-bbbb-4c86-a310-5e256337c40d", 
    "rating": 40.0, 
    "votes": 27 
}, { 
    "id": 28.0, 
    "name": "433e904f-bf1c-4375-bbf3-b8f78c337efa", 
    "rating": 40.0, 
    "votes": 28 
}, { 
    "id": 29.0, 
    "name": "e55fe861-87d8-4377-91c7-914da0419fee", 
    "rating": 40.0, 
    "votes": 29 
}, { 
    "id": 30.0, 
    "name": "30be927f-8584-47a5-be66-b4df8b4075e8", 
    "rating": 40.0, 
    "votes": 30 
}, { 
    "id": 31.0, 
    "name": "8baaad43-7d1b-4abb-97c9-a81ba5e37dee", 
    "rating": 40.0, 
    "votes": 31 
}, { 
    "id": 32.0, 
    "name": "00f4014f-cc81-47d4-bd12-af9b8c565b50", 
    "rating": 40.0, 
    "votes": 32 
}, { 
    "id": 33.0, 
    "name": "225b4461-8740-45be-a094-9e747f9a7b07", 
    "rating": 40.0, 
    "votes": 33 
}, { 
    "id": 34.0, 
    "name": "0e178b0f-35ec-40dc-850e-5cf84ff0bfbd", 
    "rating": 40.0, 
    "votes": 34 
}, { 
    "id": 35.0, 
    "name": "e95c0aee-e525-4de0-addc-7b77a73df158", 
    "rating": 40.0, 
    "votes": 35 
}, { 
    "id": 36.0, 
    "name": "0c3a2eab-307b-44fe-bcba-ce299cf734cf", 
    "rating": 40.0, 
    "votes": 36 
}, { 
    "id": 37.0, 
    "name": "b0b0f894-c953-4560-8d6e-d13ce88541fb", 
    "rating": 40.0, 
    "votes": 37 
}, { 
    "id": 38.0, 
    "name": "ebfb8188-fa1c-44e8-af98-ea254de85ab9", 
    "rating": 40.0, 
    "votes": 38 
}, { 
    "id": 39.0, 
    "name": "1e726187-8214-4b44-926b-611e9fcb7f93", 
    "rating": 40.0, 
    "votes": 39 
}, { 
    "id": 40.0, 
    "name": "cf298d6c-3858-4645-9ea5-a628d8335ce9", 
    "rating": 40.0, 
    "votes": 40 
}, { 
    "id": 41.0, 
    "name": "3ce51eda-eff3-490a-94a5-09ae0ef4f6e0", 
    "rating": 40.0, 
    "votes": 41 
}, { 
    "id": 42.0, 
    "name": "c0d5b03a-aecb-4a00-b9c9-b1febd4e6262", 
    "rating": 40.0, 
    "votes": 42 
}, { 
    "id": 43.0, 
    "name": "6434056c-f682-40b3-a5c7-4a1bbfc45a6c", 
    "rating": 40.0, 
    "votes": 43 
}, { 
    "id": 44.0, 
    "name": "b8e3adec-f9c4-424c-a09d-aee6563c251e", 
    "rating": 40.0, 
    "votes": 44 
}, { 
    "id": 45.0, 
    "name": "666cea59-850c-45df-949f-4285d0ee9aa7", 
    "rating": 40.0, 
    "votes": 45 
}, { 
    "id": 46.0, 
    "name": "d570807f-1aa8-44b8-8221-188cb550a743", 
    "rating": 40.0, 
    "votes": 46 
}, { 
    "id": 47.0, 
    "name": "64b2353d-bea4-4fcc-b8cd-5dc5c897ac29", 
    "rating": 40.0, 
    "votes": 47 
}, { 
    "id": 48.0, 
    "name": "c8082be2-92e0-4e26-9c66-0a487ed084a8", 
    "rating": 40.0, 
    "votes": 48 
}, { 
    "id": 49.0, 
    "name": "4e4a1a01-aac0-41c0-934e-4fa1086cb82b", 
    "rating": 40.0, 
    "votes": 49 
}, { 
    "id": 50.0, 
    "name": "b194d213-bdf9-4973-8264-f3a156ab5910", 
    "rating": 40.0, 
    "votes": 50 
}], 
"recordsTotal": 5000000, 
"recordsFiltered": 5000000 
}

我產生這種結果的代碼進行測試。

DataTables讀取recordsTotal並應該知道有更多的數據要讀取。 數據在指定的200px容器中正確顯示在表中，但當我滾動到結尾時，它不會啓動另一個Ajax調用來檢索更多數據。

爲了讓Scroller插件不斷從服務器讀取數據，我需要做些什麼改變？

我試着用paging: true沒有成功。我在控制檯中沒有錯誤。

當我註釋bLengthChange和paging時，分頁工作，但滾動到底部不會啓動到服務器的另一個呼叫以獲取第二個頁面。

來源

2015-04-22 Idan Shechter

回答

2

有一些潛在的問題與您的初始化代碼和數據：即使你在你的JSON響應使用對象

  • 沒有列數據定義（columns.data）可供選擇。
  • 如果不使用它們，則不應在dom參數中指定分頁（p）和長度更改控件（l）。
  • 數據格式正確，但請確保您返回的值與請求中給出的值相同draw和length參數中請求的記錄數（請參閱full list of request parameters）。

我認爲正確的代碼應該是這樣的：

$("#data-table").dataTable({ 
    "scrollCollapse": true, 
    "serverSide": true, 
    "ordering": false, 
    "searching": false, 
    "ajax": { 
     "url": CONST_WEB_SERVICE_URL + "GetData", 
     "type": "POST" 
    }, 
    "scroller": { 
     "loadingIndicator": true 
    }, 
    "deferRender": true, 
    "dom": "rtiS", 
    "scrollY": "400px", 
    "columns": [ 
     {"data": "id"}, 
     {"data": "name"}, 
     {"data": 'rating'}, 
     {"data": 'votes'} 
    ] 
});

爲例見this JSFiddle。我使用了一個不同的AJAX函數來模擬服務器端處理。

來源

2015-04-23 03:27:23

+0

嗨，我正在嘗試它，謝謝。請告訴我，爲什麼我總是得到-1（返回所有行）。它有一個選項來設置基於卷軸高度和項目高度檢索多少行？ –

+0

這是它變得有趣的地方。在上面的JSFiddle示例中，我嘗試了更改表的高度，這會影響請求的記錄數。 Scroller計算所需記錄的數量時，可能會隱藏您的表格。請參閱Scroller API中的[fnMeasure]（http://datatables.net/docs/Scroller/1.2.0/Scroller.html#fnMeasure）函數，該函數可用於重新計算行數。請注意，該示例似乎適用於DataTables 1.9.x分支，可能需要更新才能使用DataTables 1.10.x API。 –

+0

我的表未隱藏，但第一個數據不在表中並在服務器端呈現，Datatables讀取第一頁。所以我認爲它有自己的高度測量功能，可以在從ajax調用中檢索第一批行後測試高度，對嗎？ –

相關問題

 相關問題