.destroy() event not firing

lordmight

Good Day!

I have this event which fires and loads datatables ajax sourced data:

if ($.fn.DataTable.isDataTable($('#TemplateUsrTbl'))) {
        $TemplateUsersDt.destroy();
    }
    else {
        console.log('Datatable not initialized');
    }
    $('#TemplateUserTblBody').html('<div class="text-center"><span>Loading...</span> <i class="fa fa-spinner fa-spin fa-fw"></i></div>');
    $.ajax({
        type: "POST",
        url: $('#fineUrl').val() + "webservice/adm/AdminService.asmx/apprGetTemplateUsers",
        data: JSON.stringify(data),
        dataType: "json",
        async: false,
        contentType: "application/json;charset=utf-8",
        success: function (response) {
            $('#TemplateUserTblBody').html('<table id="TemplateUsrTbl" class="table table-striped table-hover table-bordered"> </table> ');
            $TemplateUsersDt = $('#TemplateUsrTbl').DataTable({
                "destroy": true,
                responsive: true,
                "aaData": JSON.parse(response.d),
                "aoColumns": [
                    { "sTitle": "Order", "mData": "Order" },
                    { "sTitle": "Action", "mData": "Action" },
                    { "sTitle": "User Name", "mData": "UserName" }
                ]
                //,
                //rowReorder: true,
                //rowReoder: {
                //    selector: 'tr'
                //}
            });
        },
        error: function (response) {
            console.log(response.responseText);
       }
 });

The destroy event is not firing. No errors shown or whatsoever.

Thank you very much!

jLinux

Format your post, looks like you may have forgotten the last ````` at the end

lordmight

Hi jLinux,

it appears that there's a problem with the markdown.

allan

Markdown needs the code tick marks to be on their own lines. I've made that change to your post.

Regarding your question - can you link to a page showing the issue please? This simple text case shows the destroy event being triggered.

I also don't see in the above code where you are listening for the destroy event.

Allan

lordmight

Hi allan!

I have this declaration

($(document).ready(function(){
    var $TemplateUsersDt ="";
}));

which will declare $TemplateUsersDt as global variable. Then I have this on my event

function LoadTemplateUsers(){
     if ($.fn.DataTable.isDataTable($('#TemplateUsrTbl'))) {
        $TemplateUsersDt.destroy();
    }
    else {
        console.log('Datatable not initialized');
    } // This will check whether the table is a datatable;
  $('#TemplateUserTblBody').html('<div class="text-center"><span>Loading...</span> <i class="fa fa-spinner fa-spin fa-fw"></i></div>');
    $.ajax({
        type: "POST",
        url: $('#fineUrl').val() + "webservice/adm/AdminService.asmx/apprGetTemplateUsers",
        data: JSON.stringify(data),
        dataType: "json",
        async: false,
        contentType: "application/json;charset=utf-8",
        success: function (response) {
            $('#TemplateUserTblBody').html('<table id="TemplateUsrTbl" class="table table-striped table-hover table-bordered"> </table> ');
            $TemplateUsersDt = $('#TemplateUsrTbl').DataTable({
                "aaData": JSON.parse(response.d),
                "aoColumns": [
                    { "sTitle": "Action", "mData": "Action" },
                    { "sTitle": "User Name", "mData": "UserName" },
                    { "sTitle": "UserId", "mData": "usr_id", "visible": false }
                ]
            });
        },
        error: function (response) {
            console.log(response.responseText);
        }
    });
}

the above code will check and will load the datatable. The purpose of checking is to destroy and release all data from the table. Even if I replace the html of $('#TemplateUsrTbl').html('') the event still wired up.

So, after a couple of hours tinkering with the code I have here, I found out that the reason why my datatable keeps data and values intact is because the control where I trigger row().add() is wired and should be unbinded.

jLinux

Are you juat trying to destry it to re-initialize it? It looks that way.. if so, have you looked at the destroy option? Or even the retrieve?

allan

which will declare $TemplateUsersDt as global variable

Actually it doesn't. Because you've used var it makes it a local variable. You would need to define it outside of a function or not use var to make it global.

Because you then use $TemplateUsersDt = $('#TemplateUsrTbl').DataTable({ that is actually defining a global :-).

You could just use:

     if ($.fn.DataTable.isDataTable($('#TemplateUsrTbl'))) {
       $('#TemplateUsrTbl').DataTable().destroy();
    }

rather than trying to keep a variable.

However, good to hear you've got it working now.

Allan

jLinux

^ that, or.. destroy, might be easier, imo

And id recommend keeping async enabled for that ajax call if i was you