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.
.