Javascript jQuery DataTables Scroller Ajax未被第二次调用

我正在使用DataTables jQuery插件。我在使用电脑时遇到问题。当滚动到达容器末尾时，它不会加载更多数据

jQuery中的Init:

 $("#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"
   });

My.NET webservice在DataTables首次读取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

时，分页工作正常，但滚动到底部不会启动对服务器的另一个调用以获取第二页。

初始化代码和数据存在一些潜在问题：

• 即使在JSON响应中使用对象，也没有可用的列数据定义（）
• 如果未使用分页（

  p

  ）和长度更改控件（

  l

  ），则不应在

  dom

  参数中指定它们
• 数据格式正确，但请确保返回的是请求中提供给您的相同的

  draw

  值以及

  length

  参数中请求的记录数（请参阅）

我认为正确的代码应该如下所示：

$("#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'}
    ]
 });

---

有关示例，请参见。我使用了不同的AJAX函数来模拟服务器端处理。

您好，我现在正在尝试，谢谢。请告诉我，为什么我总是得到-1的长度（返回所有行）。是否有一个选项可以根据滚动条高度和项目高度设置要检索的行数？这就是它的有趣之处。在上面的JSFIDLE示例中，我尝试更改表的高度，这会影响请求的记录数。当Scroller计算所需的记录数时，您的表可能被隐藏。请参阅Scroller API中可用于重新计算行数的函数。请注意，该示例似乎是针对DataTables 1.9.x分支的，可能需要更新以使用DataTables 1.10.x API。我的表不隐藏，但第一个数据不在表中并在服务器端呈现，DataTables读取第一页。所以我假设它有自己的高度测量功能，在从ajax调用中检索第一批行之后测试高度，对吗？我相信Scroller在初始化DataTables库时会进行高度测量，高度受

scrollY

参数的约束。数据最初不存在的事实应该无关紧要。我已经在JSFiddle（）上更新了代码，您可以尝试将

“paging”：true

添加到DataTables初始化代码中，看看这是否会影响请求中的

长度。您好，我使用的是基于scroller的客户端处理，如果我删除特定于列的搜索，工作正常，否则在滚动到特定位置后，出现空白屏幕，数据未加载。