Loading

jQuery DataTables - Can't bind data

jQuery DataTables - Can't bind data

L A

9y1k.NET

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.

"~/Scripts/jquery.js">
"~/Scripts/DataTables/jquery.dataTables.js">
"https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js">
"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" }]
});
}
});
});

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.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

L A9y ago
Thanks Ramesh Palanivel for your help.
Ramesh Palanivel9y ago
Hi Avid,

Try this code, It worked for me
$('#DatatableId').DataTable({
            "ajax": {
                "url": '@Url.Action("getVechicleInProgress", "Vechicle")',
                "type": "GET",
                "datatype": "json",
                "data": { vtrStatus: status },
            },
            "columns": [
                 {
                     "data": "Code",
                     "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                         $(nTd).html("<a onclick=GetInProgressDetails('" + oData.ID + "','" + encodeURIComponent(oData.CommCategory) + "')>" + oData.VTQICode + "a>");
                     }
                 },
                 { "data": "Grading" },
                 { "data": "Component" },
                 { "data": "DefectName" },
],
});
}