jquery - 这个数据表销毁方法有问题吗？

Question

I am using the data table plugin method, do I have to add something to make it work, my plan is when clicking on the table it will automatically show another table. 

    $('#pl_medias body').on('click', function() {
      table.destroy();
    });

Here is the code : 

    this.getMediaList = function() {
        var jqxhr = $.getJSON( url + 'plugins/DataTables-1.10.12/media/js/i18n/fr_FR.json', function( data ) {});
        jqxhr.done(function(data) {
            self.pl_dt_language_json = data ;
            var languages_dt =  self.pl_dt_language_json ;
            languages_dt = $.extend(languages_dt, {"sSearch": ""});

这是数据表插件：

            self.pl_medias_dt = $('#pl_medias').DataTable({
                language: languages_dt,
                "columns": [
                    { "data": "orientation_and_type_icon" },
                    { "data": "name" },
                    { "data": "length" }
                ], 
                "columnDefs": [
                    { "searchable": false, "orderable": false, "targets": 0 }, 
                    { className: "pl_media_cell_icon", "targets": [ 0 ] } , 
                    { className: "pl_media_cell_name", "targets": [ 1 ] } , 
                    { className: "pl_media_cell_length", "targets": [ 2 ] } 
                ], 
                "order": [[ 1, 'asc' ]], 
                initComplete: function(settings, json) {
                    // search
                    if($('#pl_medias_filter input').eq(0).size() > 0) {
                        $('#pl_medias_filter input').eq(0).attr("placeholder", "Rechercher un fichier") ;
                        $('#pl_medias_filter input').unbind();
                        $('#pl_medias_filter input').on( 'keyup', function () {
                            var searchInput = $(this).val();
                            if(searchInput.length == 0) {

所有代码都正常工作：window.clearTimeout(self.pl_medias_dt_filter_status); self.pl_medias_dt.search(searchInput).draw(); } 别的 {
if(searchInput.length < 3) { window.clearTimeout(self.pl_medias_dt_filter_status); self.pl_medias_dt_filter_status = setTimeout(function() { self.pl_medias_dt.search( searchInput ).draw() ; }, 3000); } else { window.clearTimeout(self.pl_medias_dt_filter_status); self.pl_medias_dt_filter_status = setTimeout(function() { self.pl_medias_dt.search(searchInput).draw()
}, 1000); } } }); }

// Here is the code : 
                    $('#pl_medias tbody').on( 'click', function () {
                    table.destroy();
                    } );
                    /*
                        *Added new id and class name for all folders
                    */
                    $('#pl_medias tr').has('div.pl_media_folder').prop({
                    'id': 'row-id-folder',
                    'class': 'row-class-folder'
                    });

                    /*
                        *Added new id and class name for all medias
                    */
                    $('#pl_medias tr').has('div.pl_media_data').prop({
                    'id': 'row-id-media',
                    'class': 'row-class-media'
                    });

                    $('#pl_medias tbody').on('click', 'tr', function () {
                        $('#pl_medias tbody tr').not(this).popover('hide') ;
                        $(this).popover('toggle') ;
                    });
                }, 
                "preDrawCallback": function( settings ) {
                    $( "#pl_medias tbody tr" ).popover('hide') ;
                }, 
                drawCallback: function(settings) {
                    $( "#pl_medias tbody tr" ).popover('hide') ;
                    // hover tooltip media details
                    $( "#pl_medias tbody tr" ).popover({
                        placement: 'bottom',
                        trigger: 'manual',
                        html: true,
                        container: 'body', 
                        template: '<div class="popover popover_medias" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>', 
                        content: function () {
                            var content = $(this).find('.pl_media_cell_icon .pl_media_data .thumbnail').html() ;
                            content = '<a href="javascript:void(0);" onclick="closePopover(this);" class="glyphicon glyphicon-remove pull-right pl_popover_close"></a><br /><br />'+content ;
                            return content ;
                        }
                    });
                    // refresh drag and drop
                    self.initDragDropSortElementForContentPlaylist();   
                },
                "serverSide": true,
                "paging":   false,
                "lengthChange" : false,
                "scrollY": 122, 
                "info": false, 
                "ajax": {
                    url : url + "playlists/ajaxSearchMedias", // json datasource
                    type: "post"
                }, 
                "dom": '<lf<t>ip>'
            }); 
        }); 
    }, 

标签： jquery

Answer 1

我已经添加了它并且它工作了 100% :-)

$('#pl_medias tr').has('div.pl_media_folder').on('click', function(){ $('#pl_medias').dataTable().fnDestroy(); // 销毁当前数据表table $('#pl_medias').empty(); // 如果列改变则为空