dataTable does not remove entry after jquery .remove function call

devtai

Hi All,

Having some problem with entry not removed from table after calling jquery .remove. If I do not use dataTables atall, this works. But once I include the dataTable code it stops.

Please see below:

function StudentList() {
var self = this;
// observable arrays are update binding elements upon array changes
self.students = ko.observableArray([]);

var studlists = this.students;

self.getStudents = function () {
    self.students.removeAll();

    // retrieve students list from server side and push each object to model's students list
    $.getJSON('/api/student', function (data) {
        $.each(data, function (key, value) {
            self.students.push(new Student(value.Id, value.FirstName, value.LastName, value.Age, value.Description, value.Gender));
        });
        oTable = $('#example').dataTable({
            "scrollY": "125px",
            "scrollCollapse": true,
            "paging": false,
            "searching": true,
            "info": true,
            "ordering": false,
        });
    });


};

// remove student. current data context object is passed to function automatically.
self.removeStudent = function (student) {

    oTable.fnDestroy();

    $.ajax({
        url: '/api/student/' + student.Id(),
        type: 'delete',
        contentType: 'application/json',
        success: function () {
            studlists.remove(student);

            oTable = $('#example').dataTable({
                "scrollY": "125px",
                "scrollCollapse": true,
                "paging": false,
                "searching": true,
                "info": true,
                "ordering": false,
            });

        }
    });
};

}