jQuery DataTables Scroller Ajax没有被第二次调用

伊丹·谢克特(Idan Shechter)

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

在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服务在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,分页有效,但是滚动到底部不会启动对服务器的另一个调用以获取第二页。

Gyrocode.com

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

  • 即使您在JSON响应中使用对象,也没有可用的列数据定义(column.data)。
  • 如果不使用分页(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'}
    ]
 });

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery ajax请求仅在第二次调用时返回值

来自分类Dev

jQuery的加载器没有第二次出现

来自分类Dev

第二次单击时,jQuery中没有函数错误

来自分类Dev

ajax jquery + bootstrap modal仅在第二次单击时有效

来自分类Dev

ajax jquery + bootstrap modal仅在第二次单击时有效

来自分类Dev

jQuery动画在第一次单击时移动,但没有第二次移动

来自分类Dev

jQuery单击事件仅工作一次,但第二次却没有

来自分类Dev

jQuery动画在第一次单击时移动,但没有第二次移动

来自分类Dev

使用jquery序列化上传多个文件仅在第二次调用时有效

来自分类Dev

使用jQuery第二次单击时调用的复选框的单击事件

来自分类Dev

jQuery单击事件在Ajax之后的第二次单击上传播

来自分类Dev

AJAX在第二次表单提交后返回整个网页-JQuery

来自分类Dev

使用Jquery和Ajax提交后,表单提交第二次无法正常工作

来自分类Dev

jQuery中的DatePicker未第二次加载

来自分类Dev

jQuery验证第二次不起作用

来自分类Dev

jQuery .bind方法第二次未激活?

来自分类Dev

jQuery on(change)第二次不起作用

来自分类Dev

jQuery函数第二次不起作用

来自分类Dev

jQuery无法识别单击功能第二次

来自分类Dev

在jQuery中单击第二次执行功能

来自分类Dev

jQuery验证器第二次不工作

来自分类Dev

jQuery在第二次单击后删除类

来自分类Dev

jQuery第二次单击不起作用

来自分类Dev

JQuery each() 第二次不工作

来自分类Dev

jQuery-第二次单击具有不同的功能

来自分类Dev

jQuery仅在第二次点击时有效

来自分类Dev

jQuery animate()仅在第二次单击时有效

来自分类Dev

jQuery click事件仅在第二次单击后有效

来自分类Dev

JavaScript / jQuery仅在第二次单击时有效

Related 相关文章

热门标签

归档