Jquery datatable destroy removing all the attribute
Jquery datatable destroy removing all the attribute
dineshdora
Posts: 1Questions: 1Answers: 0
Hello,
I need help ! I am trying to do search filter on table column, if i draw a table without destroy, it's not getting refreshed.
If i tried to destroy and draw it was working fine, but the problem is it was removing all the existing attributes like buttons added to datatable.
Here is the below code snippet of my complete html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title>Label Manage</title>
<link href="https://fonts.googleapis.com/css?family=Exo+2:300,400" rel="stylesheet">
<!-- required -->
<link rel="stylesheet" type="text/css" media="all" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/stellarnav.css">
<link type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet">
<link type="text/css" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css" rel="stylesheet">
<!-- required -->
<style>
*{ margin: 0; padding: 0; }
body { height: 100%; height: 100%; font-size: 16px; font-family: 'Exo 2', sans-serif; background: #efefef; font-weight: 300; }
.header { text-align: center; max-height: 120px;}
.header a { padding: 50px 0; display: block; font-size: 48px; text-decoration: none; color: #555; }
tfoot {
display: table-header-group;
}
div.dt-buttons{
position:relative;
float:right;
}
</style>
</head>
<body>
<div class="header">
<a href="#">Label Manage</a>
</div>
<div id="main-nav" class="stellarnav">
<ul>
<li><a href="">Views</a>
<ul>
<li onclick="Testclick()"><a href="#">As shipped</a></li>
<li><a href="#">Product RO</a></li>
<li><a href="#">View3</a></li>
<li><a href="#">View4</a></li>
</ul>
</li>
</ul>
</div><!-- .stellar-nav -->
<div id="mymain">
<div>
<!--script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script-->
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script type="text/javascript" src="js/stellarnav.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<!-- <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>-->
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('.stellarnav').stellarNav({
theme: 'light'
});
});
function Testclick() {
var dataSet = [
[ "CATS", "2015-September", "K-2015.09", "", "","","X","","","","","","", "", "","","XY","","","","","","", "", "","","","","","","","","Z"],
[ "CATS2", "2016-September", "L-2015.09", "", "","","","XY","","","","","", "X", "","","","","","","","","", "", "","","","","","","","","Z"],
[ "CATS3", "2017-September", "M-2015.09", "", "","","","","","","","XY","", "", "","","","","","","","","", "", "X","","","","","","","","Z"],
];
$('#mymain').append("<table id='example' class='display' cellspacing='0' width='100%'></table>");
$('#example').append("<tfoot><tr><th>Product</th><th>RO</th><th>Release</th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>");
$('#example').DataTable( {
data: dataSet,
dom: 'Bfrtip',
bFilter: false,
"bRetrieve": true,
"bDestroy" : true,
"buttons": ['pageLength',{
extend: 'excel',
text: 'Save as Excel',
customize: function(xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '46');
//color the background of the cells if found the value
$('row c[r]',sheet).each(function(){
if($(this).attr("r").replace(/[0-9]/g, '') == "A" || $(this).attr("r").match(/\d+/g)[0] =="1" || $(this).attr("r").replace(/[0-9]/g, '') == "B" || $(this).attr("r").replace(/[0-9]/g, '') == "C" ){
console.log("hello");
}
else{
if ($('is t', this).text().includes("->"))
$(this).attr('s', '12');
else
$(this).attr('s','15');
}
});
}
}],
columns: [
{ title: "Product" },
{ title: "RO" },
{ title: "Release" },
{ title: "Ekki" },
{ title: "FSDB" },
{ title: "boost" },
{ title: "bpio" },
{ title: "build" },
{ title: "cci" },
{ title: "cdpl" },
{ title: "cle" },
{ title: "cudd" },
{ title: "devutil" },
{ title: "generic" },
{ title: "gpio" },
{ title: "jcr" },
{ title: "license" },
{ title: "memory" },
{ title: "oa" },
{ title: "sdfp" },
{ title: "sdp" },
{ title: "sml" },
{ title: "spfp" },
{ title: "spl" },
{ title: "splext" },
{ title: "stattool" },
{ title: "svr" },
{ title: "system" },
{ title: "tcl" },
{ title: "tools" },
{ title: "uisdc" },
{ title: "wwhapi" },
{ title: "zlib" }
],
"aoColumnDefs": [
{
aTargets: [ 0 ,1, 2] ,
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
return;
}
},
{
aTargets : ["_all"],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
if(sData == ''){
return;
}
else{
if(sData.includes("->"))
$(nTd).css('background-color', 'red'); // You can use hex code as well
else
$(nTd).css('background-color', 'green');
}
}
}
],
initComplete: function () {
this.api().columns([0,1,2]).every( function () {
var column = this;
var select = $('<select id="'+this[0][0]+'"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
//$('#example').DataTable().rows().invalidate().draw();
//column
//.search( val ? '^'+val+'$' : '', true, false ).draw();
//.draw();
//$('#example').DataTable().clear();
//$('#example').DataTable().rows().invalidate();
//$('#example').DataTable().rows().invalidate().draw();
$('#example').DataTable().destroy();
//$('#example').empty();
$('#example').DataTable().column($(this).attr("id")).search($(this).val()).draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
}
</script>
</body>
</html>
Can you please help?
Thank you
Answers
Can you link to a test case showing the issue please?
Thanks,
Allan