如何销毁数据表？

Posted 2023-05-07

【中文标题】如何销毁数据表？

【英文标题】：How to destroy a datatable?

【发布时间】：2013-02-16 20:21:00

【问题描述】：

我使用datatables 和bootstrap-daterangepicker 来选择数据将在数据表中显示的范围。

一切正常。

问题是当我在 daterangepicker 中选择一个新范围时，它为我提供了一个回调函数，我可以在其中做我的事情。 在那个回调函数中，我再次调用 Datatables。但是既然表已经被创建了，我怎么能破坏之前的表并在它的位置显示一个新的呢？

请帮助。我被困住了。 :(

编辑： 我有以下代码：

$(element).daterangepicker(options,
function (startDate, endDate)  //This is the callback function that will get called each time
$('#feedback-datatable').dataTable(
                        "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
                        "sPaginationType": "bootstrap",
                        "oLanguage": 
                            "sLengthMenu": "_MENU_ records per page",
                            "oPaginate": 
                                "sPrevious": "Prev",
                                "sNext": "Next"
                            
                        ,
                        "aoColumnDefs": [
                            'bSortable': false,
                            'aTargets': [2,4]
                        ],
                        "bAutoWidth": false,
                        "aoColumns": [
                                      "sWidth": "20%",
                                      "sWidth": "15%",
                                      "sWidth": "45%",
                                      "sWidth": "15%",
                                      "sWidth": "5%"
                                      ]
                    );

【问题讨论】：

向我们展示您的代码，但您可以使用if(oTable != null)oTable.fnDestroy();

将我的代码添加到问题中。你能解释一下如何销毁吗？

为什么需要重新创建数据表？您可以刷新现有的：oTable.fnDraw(false);

BTW oTable 是您的数据实例：oTable = $('#feedback-datatable').dataTable( ... );

那么什么是 otable？我需要做类似 var oTable = $('#feedback-datatable').dataTable(...) 的事情吗？我在哪里写 oTable.fnDraw？您能指导回答吗？

【参考方案1】：

要完全删除和移除带有 DOM 元素的数据表对象，您需要：

//Delete the datable object first
if(oTable != null)oTable.fnDestroy();
//Remove all the DOM elements
$('#feedback-datatable').empty();

【讨论】：

嗯..我无法清空 标记之间的整个 DOM，因为我正在使用 AngularJS 在该表中填充动态值。所以我有包含车把的占位符，例如

name 等。有什么办法可以只删除表格的内容吗？

由于您使用的是 Angular，我建议您使用数据表的“服务器端处理”功能，即使您没有在服务器端做任何事情 (datatables.net/usage/server-side)

对不起；对我不起作用，而且模棱两可。我的控制台说 fnDestroy 没有定义。我也没有定义“oTable”，问题也没有定义，因此显然引用了其他内容。对这个问题有效的是 $('#feedback-datatable').dataTable().fnDestroy();或更一般地说 $([table selector]).dataTable().fnDestroy();

@Josh 此代码完美运行。 oTable 是您的数据实例 oTable = $('#datatable').dataTable( ... );如果在您的情况下未定义 oTable，则此代码显然不起作用。

这个方法对我有用。就我而言，对于大型表（1000 行）。销毁方法非常慢。有什么解决方法吗？

【参考方案2】：

只需将此参数添加到您的声明中：

"bDestroy" : true,

然后，无论何时你想“重新创建”表，它都不会出错

附：您可以创建一个函数来获取所需的参数，然后在运行时使用不同的选项重新初始化表。

例如我在我的程序中使用这个，如果它可以帮助你适应你的需要

 initDataTable($('#tbl1'), 2, 'asc', false, false, 25, false, false, false, 'landscape', rptHdr); /* 初始化表 */

/*------------------------ 数据表初始化 ------------------------ --- */ /* * @$table 被初始化的表id * @sortCol 初始排序的列号 * @sorOrder 上升 (asc) 或下降 (desc) * @enFilter 布尔值是否启用过滤器选项 * @enPaginate 布尔值是否启用过滤器选项 * @dplyLength 启用分页时每页包含的记录数 * @enInfo 布尔值是否显示记录信息 * @autoWidth 布尔值是否启用表格自动宽度 * @enTblTools 布尔值是否启用表格工具插件 * @pdfOrientation pdf 文档的页面方向（横向、纵向）（需要 enTblTools == 已启用） * @fileName 输出文件命名（需要 enTblTools == 启用） /*------------------------------------------------ ------------------------------*/ 函数 initDataTable($table, sortCol, sortOrder, enFilter, enPagnate, dplyLength, enInfo, autoWidth, enTblTools, pdfOrientation, fileName) var dom = (enTblTools) ？ 'T' : ''; var oTable = $table.dataTable( “命令”： [ [sortCol，排序顺序] ], “bDestroy”：是的， “bProcessing”：是的， “dom”：dom， “bFilter”：enFilter， “bSort”：是的， “bSortClasses”：是的， “bPaginate”：enPaginate， "sPaginationType": "full_numbers", “iDisplayLength”：dplyLength， “bInfo”：enInfo， “bAutoWidth”：自动宽度， “表格工具”： “按钮”：[ "sExtends": "复制", "sButtonText": "复制", “bHeader”：是的， “bFooter”：是的， “fnComplete”：函数（nButton，oConfig，oFlash，sFlash） $().shownotify('showNotify', text: '表格复制到剪贴板（无格式）', 粘性：假， 位置：'中间中心'， 类型：'成功'， 关闭文本：'' ); , "sExtends": "csv", "sButtonText": "Excel (CSV)", "sToolTip": "另存为 CSV 文件（无格式）", “bHeader”：是的， “bFooter”：是的， “sTitle”：文件名， "sFileName": 文件名 + ".csv", “fnComplete”：函数（nButton，oConfig，oFlash，sFlash） $().shownotify('showNotify', text: 'CSV 文件保存在选定的位置。', 粘性：假， 位置：'中间中心'， 类型：'成功'， 关闭文本：'' ); , "sExtends": "pdf", “sPdfOrientation”：pdf方向， “bFooter”：是的， “sTitle”：文件名， "sFileName": 文件名 + ".pdf", “fnComplete”：函数（nButton，oConfig，oFlash，sFlash） $().shownotify('showNotify', text: '保存在选定位置的 PDF 文件。', 粘性：假， 位置：'中间中心'， 类型：'成功'， 关闭文本：'' ); , "sExtends": "其他", “bShowAll”：是的， “sMessage”：文件名， "sInfo": "完成后请按escape" ] /*"fnDrawCallback": function(oSettings) alert('DataTables 已重绘表格');*/ ); /* 如果是 IE 则避免设置粘性标题 */ if (!navigator.userAgent.match(/msie/i) && enPaginate == false) 新 $.fn.dataTable.FixedHeader(oTable); 返回表

伊万。

【讨论】：

最简单的方法，因此也是最好的方法，IMO。

【参考方案3】：

我知道这是一个老问题，但是因为我遇到了类似的问题并解决了它。

以下应该可以解决问题（cmets 来自DataTable API doc）。

// Quickly and simply clear a table
$('#feedback-datatable').dataTable().fnClearTable();

// Restore the table to it's original state in the DOM by removing all of DataTables enhancements, alterations to the DOM structure of the table and event listeners
$('#feedback-datatable').dataTable().fnDestroy();

【讨论】：

经过 4 小时的搜索，这是正确的。谢谢。

终于，在destroy桌子上浪费了很多时间之后，终于，这是正确的。

【参考方案4】：

对于 DataTables 1.10，调用如下：

// Destroy dataTable
$('#feedback-datatable').DataTable.destroy();

// Remove DOM elements
$('#feedback-datatable').empty();

【参考方案5】：

对于谷歌搜索者

我几乎没有设法销毁Datatable，在加载新数据并通过这样做重新初始化Datatable之前清空所有以前的数据，

if ($.fn.DataTable.isDataTable("#myTbl")) 
      ("#myTbl").DataTable().destroy();

$('#myTbl tbody > tr').remove();

...

// Load table with new data and re-initialize Datatable

【讨论】：

你能用一个例子来扩展你的答案吗？你如何重建列？

【参考方案6】：

在 DataTables 1.10 及更高版本上，您可以使用 "destroy": true

阅读更多详情here

【参考方案7】：

来自DataTable

var table = $('#myTable').DataTable();
$('#tableDestroy').on( 'click', function () 
table.destroy();
);

从服务器重新加载完整的表描述，包括列：

var table = $('#myTable').DataTable();
$('#submit').on( 'click', function () 
    $.getJSON( 'newTable', null, function ( json ) 
        table.destroy();
        $('#myTable').empty(); // empty in case the columns change

        table = $('#myTable').DataTable( 
            columns: json.columns,
            data:    json.rows
         );
     );
);

希望对你有帮助

【参考方案8】：

$('#feedback-datatable').dataTable().fnDestroy();

这应该会破坏 dataTable，然后你将不得不重新初始化 dataTable。