Not able to do fnClearTable in client side.

Gayu3

I am not able to destroy a existing data table and redraw it even if i write ServerSide : false. Why is this?

    loada("hi");

function loada(hi){
console.log(hi);
    if(oTable != null) {
        oTable.fnClearTable();
      //  oTable.fnAddData(datas_for_table);

    }
    else {

            oTable = $('#example').DataTable( {
                "bDestroy": true,
                "pageLength": 10,
                //"scrollY": "100px",
                "bServerSide":false,

                "sScrollY": calcDataTableHeight(),
                "lengthMenu": [[10, 15, -1], [10, 15, "All"]],
                 responsive: true,
            //  "sScrollY": calcDataTableHeight(),
            //  "bPaginate": true,
            //  "bScrollCollapse": true,
//              "aaData": datas_for_table,
                    "ajax": {
                            "url": "scripts/test.php?search="+param,
                            "type": "POST"
                            },
                    "columns": [
                            {
                                    "class":          'details-control',
                                    "orderable":      true,
                                    "data":           null,
                                    "defaultContent": ''


                            },
                            {
                        data: null,
                        width: "12px",
                        "sClass": "dt-center",
                        render: function(data, type, row) {
                                if (type === 'display') {
                                        return '<input type="checkbox" class="editor-active">';
                                }
                                return data;
                        }
                },
                                            {data: "Name", width:"162px"},
                                            {data: "City", width:"82px"},
                                            {data: "State", width:"32px"},
                                            {data: "Industry",  width:"62px","sClass": "dt-center"},
                                            {data: "MLSeats",  width:"32px", "sClass": "dt-right"},
                                            {data: "NPS2YrBack",  width:"32px","sClass": "dt-fixedcenter"},
                                            {data: "Flags",  width:"232px", "sClass": "dt-center"}

            ],
        //  "bJQueryUI":  "true" ,
                    "order": [[7, 'desc']],
                    "sDom": '<"top">rt<"bottom"lp><"clear">',
                    "fnDrawCallback": function (oSettings) {
    $('.inlinesparkline:not(:has(canvas))').sparkline('html', {
        type: 'bar',
                barWidth:6,
                barSpacing:3,
                tooltipPrefix:'$ '
    });
}       } );

$('div.dataTables_scrollBody').css('height',calcDataTableHeight());
    //This highlights the row selected
// Add event listener for opening and closing details
$('#example').on('click', '.details-control', function () {
    var tr = $(this).closest('tr');
    var row = oTable.row(tr);
    //var row = table.row( tr );
if ($(this).prev('tr').hasClass( 'shown' )){
}
else    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');

    }
    else {
        tr.addClass('shown');

        var trNext = $(this).next('tr');
        trNext.addClass('detail');
        row.child( format(row.data()) ).show();
tr.next().addClass('detail' );
    }
} );

        $('#myInputTextField').on('keyup', function() {
            oTable.search(this.value).draw();
            /*  $('#example').on('change', 'input.editor-active', function() {
            $("#example tbody").trigger("click");
                        flag=1;
        }); */
                /*Places the selected rows in the basic-name select2 box*/
    $('#example tbody').on('click', 'tr', function() {

            //  flag=0;
        //$('.editor-active').trigger('change');
            //  var set= document.getElementById("checkbox").checked;
        var str = this.id;
        var res = str.split("row_");
        var id = res[1];
        var contenttoshow = $('td:eq(2)', this).html();
        //var data = Table.cells('.checked').data();
        var index = $.inArray(id, selected);
        if (index === -1) {
            selected.push(id);
        } else {
            selected.splice(index, 1);
        }
        var index1 = $.inArray(contenttoshow, selected1);

        if (index1 === -1) {
            selected1.push(contenttoshow);
        } else {
            selected1.splice(index1, 1);
        }

        var accounting = [];
        for (var i = 0; i < selected.length; i++) {

            accounting.push({
                "id": selected[i],
                "text": selected1[i]
            });
        
      //  console.log(accounting);
        $("#basic-name").select2("data", accounting);
}
    });

}}

Gayu3

if i include an initComplete as below

initComplete: function () {
  this.api().on( 'draw', function () {
    alert( 'draw' );
  } );
}

This is alerting "draw" two times.

Gayu3

How can the second alert be prevented or stopped?

allan

How can the second alert be prevented or stopped?

Either remove the event lister you added or use one() rather than on().

I am not able to destroy a existing data table and redraw it even if i write ServerSide : false. Why is this?

Please link to a test case showing the issue, as per the forum rules.

Allan

Gayu3

Allan,

Thanks for the quick reply and for the amazing tool.
The Fiddle

https://jsfiddle.net/ephd7z85/

This gives an example of what I am trying to accomplish..

After clicking the repeat button, on clicking a row. The event is called twice.
while clicking first it gets called only once.

allan

Your function was adding multiple event handlers to the table: https://jsfiddle.net/ephd7z85/1/ .

Allan

Gayu3

This makes sense.
Awesome. Thanks :)