javascript - 如何销毁数据表？

Question

我正在使用数据表并使用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%"}
                                      ]
                    });
}

score 29 · Accepted Answer

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

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

score 14 · Accepted Answer

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

“bDestroy”：是的，

然后，每当您想“重新创建”表时，它都不会出错

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

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

initDataTable($('#tbl1'), 2, 'asc', 假, 假, 25, 假, 假, 假, '风景', 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);
    }

    返回表
}

伊万。

score 7 · Accepted Answer

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

以下应该可以解决问题（评论来自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();

score 7 · Accepted Answer

对于 DataTables 1.10，调用是：

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

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

score 2 · Accepted Answer

对于谷歌搜索者

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

if ($.fn.DataTable.isDataTable("#myTbl")) {
      ("#myTbl").DataTable().destroy();
}
$('#myTbl tbody > tr').remove();

...

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

score 1 · Accepted Answer

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

在此处阅读更多详细信息

score 0 · Accepted Answer

从数据表

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
        } );
    } );
});

希望它会有所帮助

score -1 · Accepted Answer

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

这应该破坏数据表，然后你将不得不重新初始化数据表。

javascript - 如何销毁数据表？

8 回答 8

Related

Reference