在 JQuery Datatable 中选择另一个页面后如何重绘 Datatable?

Posted

技术标签:

【中文标题】在 JQuery Datatable 中选择另一个页面后如何重绘 Datatable?【英文标题】:How to redraw Datatable after selecting another page in JQuery Datatable? 【发布时间】:2017-04-10 19:51:09 【问题描述】:

我有一个数据表,我用来自服务器端的数据填充。桌子正在以正确的方式填充。当我使用分页时,再次调用服务器端并为下一页生成 JSON 数据。数据是对的。但桌子并不清爽。根据 Datatables 文档,我知道我应该以某种方式使用 draw() 函数,但我不知道在哪里调用它。

这是我的 html 表格:

<table id="table-esemenyLista" class="table table-striped table-bordered table-hover"> <thead> <tr> <th>Id</th> <th>Dátum</th> <th>Esemény</th> </tr> </thead> <tbody id="esemenyListBody" class="text-primary"> </tbody> </table>

这是连接到它的 Jquery-datatable 代码:

$( document ).ready(function() esemenyListaTable = $("#table-esemenyLista").DataTable( "processing" : true, "serverSide" : true, "paging" : true, "searching" : false, "lengthChange" : false, "drawCallback": function( settings ) console.log('redrawn'); , "ajax" : contextPath + "/historyContent.do" ); );

这是我第一次从 server-sid 得到的 JSON 对象(显示正确):

"draw":1, "recordsTotal":16, "recordsFiltered":16, "data":[ [ 1, "2016-07-23", "text1" ], [ 12, "2016-10-04", "text2" ], [ 13, "2016-10-04", "text3" ], [ 16, "2016-10-18", "text4" ], [ 17, "2016-11-05", "text5" ], [ 18, "2016-11-14", "text6" ], [ 19, "2016-11-15", "text7" ], [ 20, "2016-11-16", "text8" ], [ 22, "2016-11-16", "text9" ], [ 23, "2016-11-17", "text10" ] ]

翻到第二页后,得到如下JSON对象,是哪个语法正确,但没有出现:

"draw":1, "recordsTotal":16, "recordsFiltered":16, "data":[ [ 24, "2016-11-17", "text11" ], [ 25, "2016-11-23", "text12" ], [ 26, "2016-11-23", "text13" ], [ 27, "2016-11-23", "text16" ], [ 28, "2016-11-24", "text17" ], [ 29, "2016-11-25", "text18" ] ]

drawCallBack 函数只在第一次写入日志。我应该如何调用draw方法?在我在 *** 上红色了一些与我相关的其他问题之后,我知道我应该清除,然后重新绘制表格,但是如何?有人可以帮帮我吗?

【问题讨论】:

【参考方案1】:

您必须返回正确的draw 索引。 所以第二个必须是“画”:2。 我不知道您的服务器端语言,在 php 中您可以使用 $_GET['draw'] 获取绘制索引

【讨论】:

谢谢 :) 我没有动态设置draw 变量,这就是问题所在。 我知道,也没有立即明白,必须尝试:D 不喜欢手册页 非常感谢。

以上是关于在 JQuery Datatable 中选择另一个页面后如何重绘 Datatable?的主要内容,如果未能解决你的问题,请参考以下文章

jquery中的dataTable表格控件中如何插入超链接或者按钮?

如何为 dataTable 中的不同操作选择图像?

如何使用jquery在datatable中选择输入

使用 jquery 动态更新 DataTable 内容

带有复选框的 JQuery DataTable 选择行

jQuery DataTable中的引导日期选择器在Laravel应用程序中不起作用