jQuery DataTables - Can't bind data

Question

Hi all,

 

My application (ASP.NET MCV) refrences a Webservice to GET data & display using DataTables jQuery (https://datatables.net/).

•  Created ajax function to call Controller/ Action.

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetDetailsFromService", "GetProductData")',
            dataType: "json",
            success: function (DBdata) {
                alert(DBdata); //Data To Display in Alertbox
                $('#productDataTable').DataTable({
                    data: DBdata,
                    columns: [
                        { "data": "ProductName" },
                        { "data": "SupplerName" },
                        { "data": "CategoryName" }]
                });
            }
        });
    });
</script>

• Consumed Webservice data to show.

    [HttpPost]
    public ActionResult GetDetailsFromService()
    {
        ProductDetails.GetDetailsService service = new ProductDetails.GetDetailsService();
            JavaScriptSerializer json = new JavaScriptSerializer();
            return Json(json.Serialize(service.GetProductData()), JsonRequestBehavior.AllowGet);
   }

• JSON data shown in alert box from webservice.

• Can't bind data to jQuery DataTable

Please help me out, to figure whats the problem.