DataTable destroy export button generate error.

michsh1

I want to destroy and reinitialize Table with fixed column and export Buttons.
Console error: Uncaught TypeError: Cannot read property 'node' of undefined dataTables.buttons.js:199.
File dataTables.buttons.js:199.
destroy: function ()
{
// Key event listener
$('body').off( 'keyup.'+this.s.namespace );

    // Individual button destroy (so they can remove their own events if
    // needed
    var buttons = this.s.buttons;
    var i, ien;

    for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
        this.remove( buttons[i].node ); !!!
    }

    // Container
    this.dom.container.remove();

    // Remove from the settings object collection
    var buttonInsts = this.s.dt.settings()[0];

    for ( i=0, ien=buttonInsts.length ; i<ien ; i++ ) {
        if ( buttonInsts.inst === this ) {
            buttonInsts.splice( i, 1 );
            break;
        }
    }

    return this;
},

MY code:
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - horizontal and vertical</title>
<link rel="stylesheet" type="text/css" href="../media/css/jquery.dataTables.css">

<link rel="stylesheet" type="text/css" href="../media/css/fixedColumns.dataTables.css">
<link rel="stylesheet" type="text/css" href="../media/css/buttons.dataTables.css">

<link rel="stylesheet" type="text/css" href="../media/css/shCore.css">
<link rel="stylesheet" type="text/css" href="../media/css/demo.css">


<style type="text/css" class="init">

div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;

}

</style>
<script type="text/javascript" language="javascript" src="../media/js/jquery-1.12.3.min.js">
</script>
<script type="text/javascript" language="javascript" src="../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../media/js/dataTables.fixedColumns.js"></script>

<script type="text/javascript" language="javascript" src="../media/js/dataTables.buttons.js">   </script>
<script type="text/javascript" language="javascript" src="../media/js/jszip.min.js">    </script>

<script type="text/javascript" language="javascript" src="../media/js/buttons.print.js">    </script>
<script type="text/javascript" language="javascript" src="../media/js/pdfmake.min.js">  </script>
    <script type="text/javascript" language="javascript" src="../media/js/vfs_fonts.js">    </script>

<script type="text/javascript" language="javascript" src="../media/js/shCore.js"> </script>
<script type="text/javascript" language="javascript" src="../media/js/demo.js">
</script>

var table; $(document).ready(function() { $("#example > tbody").html(""); $("#example > tbody").append("TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net") $("#example > tbody").append("TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net") $("#example > tbody").append("TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net") $("#example > tbody").append("TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net") $("#example > tbody").append("TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net") $("#example > tbody").append("TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net") table = $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ], scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, bDestroy: true, fixedColumns: { leftColumns: 1, rightColumns: 0 } } ); } ); var count =0; function test(){ //table.buttons().destroy(); //$(".dt-buttons").remove(); table .clear() .draw(); table.destroy(); count++; $("#example > tbody").append(""+count+"NixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net") table = $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ], scrollY: "300px", scrollX: true, scrollCollapse: true, paging: false, bDestroy: true, fixedColumns: { leftColumns: 1, rightColumns: 0 } } ); alert("TEst"); //table.cell( 0, 0 ).data( 'New data' ).draw(); //table.fixedColumns().update(); }

</head>
<button onclick="test()" >test</button>
<body class="dt-example">
<div class="container">
<section>
<br>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>

                <tr>
                    <td>Michael</td>
                    <td>Bruce</td>
                    <td>Javascript Developer</td>
                    <td>Singapore</td>
                    <td>29</td>
                    <td>2011/06/27</td>
                    <td>$183,000</td>
                    <td>5384</td>
                    <td>m.bruce@datatables.net</td>
                </tr>
                <tr>
                    <td>Donna</td>
                    <td>Snider</td>
                    <td>Customer Support</td>
                    <td>New York</td>
                    <td>27</td>
                    <td>2011/01/25</td>
                    <td>$112,000</td>
                    <td>4226</td>
                    <td>d.snider@datatables.net</td>
                </tr>
            </tbody>
        </table>

    </section>
</div>

I need to do 3 click to destroy and reinitialize the table. I have no other errors. If i use only print button works perfectly or if i remove the js libs:
buttons.flash.js
buttons.html5.js

Any help will be appreciated.

allan

Can you try using the latest version of Buttons (1.2.1) is you aren't already. There was a bug in 1.2.0 whereby what you describe would happen.

If you are already using the latest version, please link to a test case showing the issue, per the forum rules.

Allan

michsh1

Thanks Allan. It`s worked.