Reloading Datatable outside document ready.

Kren

Hi everyone, first post here!

I am trying to create a table which contains a delete row button when click it will go to an ajax script in order to validate the delete, and then it will try to refresh the data, but it seems it is not working!

It does delete the data in the desired row, but! it is not refreshing the datatable, :s, so the old data is kept, and if you press it again it will just say it failed.

the code looks like the following:

var table = $('example').dataTable();
$(document).ready(function () {
   var table = $('#example').dataTable({

        "bServerSide": true,
        "sAjaxSource": "Home/AjaxHandler",
        "bProcessing": true,
        "aoColumns": [
                        {
                            "sName": "ID",
                            "bSearchable": false,
                            "bSortable": false,
                            "bVisible": false
                        },
                        { "sName": "Column1"/*,
                            "bSearchable": false,
                            "bSortable": false,
                            "mRender": function (data, type, row) {
                                if (data = 1)
                                {
                                    return '<input type =\"checkbox\" checked=\"false\">';
                                    //

                                }
                                else if (data = 0)
                                { 
                                    return '<input type=\"checkbox\" checked=\"false\">';
                                    //return 'oda';
                                    }
                                
                            },*/},
                        { "sName": "Column2" },
                        { "sName": "Column3" },
                        { "sName": "Column4" },
                        { "sName": "Column5"},
                        {
                            "sName": "Column6",
                            "bSearchable": false,
                            "bSortable": false,
                            "mRender": function (data, type, row) {
                                //return '<a href=\"Details/' + data + '\">View</a>';

                                return '<a href="#" OnClick="DeleteBtn('+ data +')"><button "type="button" class="btn btn-primary" ><i class="fa fa-trash"></i> Delete</button></a>';

                            }
                        }
        ]
   })
});

function DeleteBtn(id) {
    $.ajax({
        url: "/HoldFaultManager/Delete",
        data: "id=" + id,
        type: 'POST',
        success: function (data) {
            alert(data.success);
            table.fnDraw(); /* REFRESH HERE WHICH IS FAILING */
        }
    });
}

so uh.. sorry it's my first post here, and i am loving datatable :D

allan

Welcome :-)

Two points:

var table = $('example').dataTable();

Don't do that there. Just do:

var table;

That makes the table variable available to both functions and initialises the table only once (you don't want to do it twice as it is above!).

Secondly, is your /HoldFaultManager/Delete API actually deleting the row?

Are you getting any errors on your browser's console?

Allan

Kren

Thanks for the first tip, yeah sounds logical to do that :-).

/HoldFaultManager/Delete is sending the result, the data is getting deleted..

the only error I get is the following:

Uncaught TypeError: Cannot read property 'fnDraw' of undefinedDeleteBtn.$.ajax.success @ index.js:91jQuery.Callbacks.fire @ jquery-1.9.1.js:1037jQuery.Callbacks.self.fireWith @ jquery-1.9.1.js:1148done @ jquery-1.9.1.js:8074jQuery.ajaxTransport.send.callback @ jquery-1.9.1.js:8598

I am still thinking or trying to figure out what it can be :I

allan

Can you link to the page showing the issue so I can debug it please? It suggests your table variable is undefined - which probably means you are still using var table = inside the document ready function. You just want table =, otherwise it is local to that function.

Allan

Kren

hmm I am trying to find a way to send what I got, I am using asp.net and adding editable free plugin yet i don't know how to upload it, any ideas for this :)?

, I already tried what you say, the changes I did was removing first line and making the
var table =('#example').dataTable, be just table =( '#example').dataTable

without the var and it still didn't worked, it shows:

Uncaught ReferenceError: table is not defined

pointing to the line table.fnDraw();

allan

Perhaps you can post your latest code in that case please.

Allan

Kren

Sorry for late replay, I was finally able to fix it, not sure what the bug was, but it seems i was making typo somewhere making it not work correctly, the line I added is:

table.fnDraw(false);

which allowed me to refresh the table with correct pagination, right now it scrolls to the top once the refresh is done, but that's something small :D! thanks alot Allan.