how to clear data from grid datatable plugin jquery?

Question

we are using datatable plugin as below to bind the data and display in grid. below is the code:

productJs = {
apiBaseUrl: "/api/Admin/GetProductsPurchasedOrInCart",
dataTableID: "#products_Grid",

ready: function () {
    alert('yyyy');
},
jqueryDatatableSetting: {
    "aaSorting": [],
    "aoColumns": [
     { "mDataProp": "ProductName" },
     { "mDataProp": "Quantity" },
     { "mDataProp": "unitPrice" }
    ]
},

jqueryDatatable: null,

bindJqueryControls: function (e) {

},
loadProducts: function (oderNo) {
    //alert(oderNo);
    var apiUrl = this.apiBaseUrl + '?IsPurchased=Y&OrderNo=' + oderNo;
    $.ajax({
        url: apiUrl,
        type: "GET",
        complete: function (resp) {

            if (resp.status == 200 || resp.status == 201) {
                $('#products_Grid > tbody').html('');
                productJs.bindDatatable(resp.responseJSON);
            } else if (resp.status == 404 || resp.status == 400) {

            }
        },
        error: function () {

        }
    });
}
, bindDatatable: function (records) {

    if ($("#products_Grid_wrapper").length == 0) {
        //it doesn't exist
        this.productdataTableID = $(this.dataTableID).dataTable(this.jqueryDatatableSetting);
    } else {
        var table = $(this.dataTableID).DataTable();
        table.clear().draw();
    }

    if (records.length)
        this.productdataTableID.fnAddData(records);
 }
}

Let me explain what is going on: I have a grid bind t\\in the same as above \\, that is orderJs. We want to display the order details when user click on Detail button in Order Grid. Order Grid is also using the datatable as i am binding the data for Products.

Now what i have done: I have completed the binding the data on the basis of Order number in Product grid, it is working fine first time. means when i click on "Order details" it opens the pop up with Correct Products. now i have closed the pop up. now click on any other order Details button, now when pop up opens it fetching the old order's product + new order's product.

I want to clear the Product Grid before rebind it.

i have tried few things but no luck, could you expert guys, please check i am doing wrong.

Answer 1

HI All i got the answer.. wow..

i have just updated my below method by adding "fnClearTable" functiona

bindDatatable: function (records) {

    if ($("#products_Grid_wrapper").length == 0) {
        //it doesn't exist
        this.jqueryproductDatatable = $(this.dataTableID).dataTable(this.jqueryDatatableSetting);
    } else {
        this.jqueryproductDatatable.fnClearTable();
    }

    if (records.length) {

        this.jqueryproductDatatable.fnAddData(records);

    }
}

Thanks all for your support... :)