Jquery datatable destroy removing all the attribute

Jquery datatable destroy removing all the attribute

dineshdoradineshdora 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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Can you link to a test case showing the issue please?

    Thanks,
    Allan

This discussion has been closed.