如何销毁数据表?

2021/01/29 09:11 · jquery ·  · 0评论

我使用的数据表,并使用自举-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%"}
                                      ]
                    });
}

要完全删除和删除带有DOM元素的数据表对象,您需要:

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

只需将此参数添加到您的声明中即可:

“ bDestroy”:是的,

然后,每当您要“重新创建”表时,它都不会丢弃错误

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

例如,我在程序中使用了这个,如果它可以帮助您使其适应您的需求

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,enPaginate,dplyLength,enInfo,autoWidth,enTblTools,pdfOrientation,fileName){
    
    var dom =(enTblTools)?'T':'';

    var oTable = $ table.dataTable({
        “订单”:[
            [sortCol,sortOrder]
        ],
        “ bDestroy”:是的,
        “ bProcessing”:是的,
        “ dom”:dom,
        “ bFilter”:enFilter,
        “ bSort”:是的,
        “ bSortClasses”:是的,
        “ bPaginate”:enPaginate,
        “ sPaginationType”:“完整号码”,
        “ iDisplayLength”:dplyLength,
        “ bInfo”:enInfo,
        “ bAutoWidth”:autoWidth,
        “ tableTools”:{
            “ aButtons”:[{
                    “ sExtends”:“副本”,
                    “ sButtonText”:“复制”,
                    “ bHeader”:是的,
                    “ bFooter”:是的,
                    “ fnComplete”:函数(nButton,oConfig,oFlash,sFlash){
                        $()。shownotify('showNotify',{
                            文字:“表格已复制到剪贴板(无格式)”,
                            粘性:错误,
                            位置:“中间居中”,
                            类型:“成功”,
                            closeText:”
                        });
                    }
                },{
                    “ sExtends”:“ csv”,
                    “ sButtonText”:“ Excel(CSV)”,
                    “ sToolTip”:“另存为CSV文件(无格式)”,
                    “ bHeader”:是的,
                    “ bFooter”:是的,
                    “ sTitle”:fileName,
                    “ sFileName”:fileName +“ .csv”,
                    “ fnComplete”:函数(nButton,oConfig,oFlash,sFlash){
                        $()。shownotify('showNotify',{
                            文字:“ CSV文件保存在所选位置。”,
                            粘性:错误,
                            位置:“中间居中”,
                            类型:“成功”,
                            closeText:”
                        });
                    }
                },{
                    “ sExtends”:“ pdf”,
                    “ sPdfOrientation”:pdfOrientation,
                    “ bFooter”:是的,
                    “ sTitle”:fileName,
                    “ sFileName”:fileName +“ .pdf”,
                    “ fnComplete”:函数(nButton,oConfig,oFlash,sFlash){
                        $()。shownotify('showNotify',{
                            文字:“ PDF文件保存在所选位置。”,
                            粘性:错误,
                            位置:“中间居中”,
                            类型:“成功”,
                            closeText:”
                        });
                    }
                },
                {
                   “ sExtends”:“ Other”,
                   “ bShowAll”:是的,
                   “ sMessage”:fileName,
                   “ sInfo”:“完成后请按Escape键”
                }
            ]
        }
        / *“ fnDrawCallback”:function(oSettings){警告(“ DataTables已重绘了表”);} * /
    });
    / *如果是IE,则避免设置粘性标头* /
    如果(!navigator.userAgent.match(/ msie / i)&& enPaginate == false){
        新的$ .fn.dataTable.FixedHeader(oTable);
    }

    返回oTable
}

伊万

我知道这是一个古老的问题,但是由于我遇到了类似的问题并得以解决。

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

对于DataTables 1.10,调用为:

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

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

对于Google搜索者

Datatable在执行新操作并重新初始化Datatable之前,我几乎很难销毁,清空所有先前的数据,

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

...

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

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

在此处阅读更多详细信息

数据表

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

希望对你有帮助

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

这会破坏dataTable,然后您必须重新初始化dataTable。

本文地址:http://jquery.askforanswer.com/ruhexiaohuishujubiao.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!