- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 DataTables jQuery 插件。我在使用 Scroller plugin 时遇到问题。当滚动到达容器末尾时,它不会加载更多数据。
在 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 网络服务 在 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,应该知道还有更多的数据需要读取。 数据正确显示在表格中,按照指定在 200 像素的容器中,但是当我滚动到末尾时,它不会启动对服务器的另一个 ajax 调用以检索更多数据。
为了让 Scroller 插件持续从服务器读取数据,我需要做哪些更改?
我尝试使用 paging: true
但没有成功。我在控制台中没有收到任何错误。
当我注释掉 bLengthChange
和 paging
时,分页有效,但滚动到底部不会启动对服务器的另一次调用以获取第二页。
最佳答案
您的初始化代码和数据存在一些潜在问题:
p
) 和长度更改控件 (l
),则不应在 dom
参数中指定它们。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 函数只是为了模拟服务器端处理。
关于javascript - jQuery DataTables Scroller Ajax 没有被第二次调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29804178/
该插件的绝大多数文档表明您可以使用 对其进行初始化 $('#example').dataTable(); 但是http://www.datatables.net/examples/api/multi_
我有一个 SQL 查询,它获取一些数据(dbtable 表中的语言列)。查询使用 GROUP_CONCAT,因此一个单元格有多个结果,例如 "Ajax, jQuery, HTML, CSS". 我想要
我有一个由 jQuery DataTables 增强的动态表,它显示一个与此类似的自定义对象 example . JSON: { "data": [ { "name": "Ti
我有两个数据表。首先是 DataTable NameAddressPhones = new DataTable(); 具有三列姓名、地址和电话号码。但我只想要两列姓名和地址数据,所以我想将这些列(包含
有没有办法将“处理...”语言放在 DataTable 对象的顶部而不是垂直中间?如果我有一张长 table ,它会隐藏在页面之外,因为它的默认位置在中间。 $('#example').dataTab
当我们向 DataTables 添加自定义过滤器时: $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) { ..
我可以更改 dataTables 中搜索文本字段的宽度吗? 我现在正在编写以下代码,但它不起作用。 $('#example').dataTable() .columnFilter(
使用 DataTables plugin 时 如何使分页和 Showing 1 to 8 of 8 entries 出现在顶部而不是底部? 谢谢 最佳答案 每个数据表控件都以唯一的 id 命名计划之后
Angular 版本:6.0.4 ~ 节点版本:10.4.1 ~ NPM 版本:6.1.0 我看到这个问题被问了很多次,但没有回答。 关注这些后instructions to install angu
当单击外部按钮时,我正在尝试使用 DataTable(新版本)修改单元格值。我现在有以下内容: $(document).on('click', '.dropdown-menu li a', funct
引用:http://datatables.net/reference/api/page.info() 我正在尝试获取 ajax POST 生成的 jQuery DataTable 的当前分页信息。 使
以下对我有用: $('#datatable').on('page.dt', function() { alert("changed"); }); 每当我更改页面时,都会显示警报。但是如果我想警
我有一个 HTML 表,我在其中应用了 DataTables 函数。我使用表的第一行并将"template"类应用为我的模板行。然后选择此格式并使用 JSON feed 填充表中的所有行。问题是 Da
我有一个由 DataTables 1.10 驱动的表。过滤已打开。当我在下面谈论“做搜索”时,我指的是使用该表的过滤功能。 问题描述 关闭 stateSave 一切正常。但是,当 stateSave
看看这个例子,http://www.datatables.net/examples/api/multi_filter_select.html ,它使用 DataTable API 中的 columns
我正在使用 jQuery DataTables 在 spring 4.x 应用程序中创建一个报表页面来呈现报表。 通过 Jackson 消息转换器解析后,服务器返回以下对象。 { "data"
我在刷新 Primesfaces 的延迟加载数据表时遇到了一些问题。我正在使用 3.0.M4。 使用过滤器在您的示例中使用三个类。还尝试了仅使用延迟加载的示例,但随后未在 Controller 中重新
在 Blue Prism (BP) 中,有一种叫做 Collection 的东西,它基本上是 C# 中的 DataTable。在 BP 中,您可以在集合中拥有集合。我的问题是,您可以在 C# 的 Da
我正在使用 Flutter DataTables 来显示购物车中的商品列表。现在我想编辑任何选定行的数量。有没有办法获取用户点击的行信息? 以下是我的DataTable的完整代码: class _Da
我有一个关于 primefaces 数据表组件的问题。我想将 DataTable 变量绑定(bind)到 p:dataTable,以便我能够从支持 bean 以编程方式操作第一个、行、rowsPerP
我是一名优秀的程序员,十分优秀!