Unable To Display Json Data in html Table Using jquery DataTable

Question

i have C# function That Return Me Json Formated Data, function is below

  void DisplayProjectMasterList()
        {
            string JSONString = "";
            DataTable Dt = DB.GetDataTable("Sp_GetProjectMasterList");
            if (Dt.Rows.Count > 0)
            {
                JSONString = JsonConvert.SerializeObject(Dt);
            }
            Context.Response.Write(JSONString);
    
        }


and I am Calling This Function Via Ajax  .in console i am getting json data  But i dont know how to pass it to Jquery data table to display.. below is the javascript function... please help Me

function DisplayProjectMasterList() {
    $.ajax({
        url: 'project-master.ashx',
        type: "POST",
        dataType: 'json',
        data: {
            'fun': 'DisplayProjectMasterList'
        },
        success: function (data) {
            console.log(data);
            if (Chk_Res(data.errorMessage) == false) {
                    $('#tbl').dataTable({
                        paging: true,
                        sort: true,
                        searching: true,
                        scrollY: 200,
                        data: data,
                        columns: [
                            { 'data':data.Prj_Id },
                            { 'data':data.Prj_No },
                            { 'data':data.Prj_Name },
                            { 'data':data.Cus_Company_Name },
                            { 'data':data.Prj_StartDate },
                            { 'data':data.Prj_CompletionDate },
                        ]

                    });
               
             }
        }
        
    });
}

i am Getting FOllowing error while doing So:

DataTables warning: table id=tbl - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Answer 1

Hi make sure the data you are being returned is in the following format:

{
  "data": [
    {
     "Prj_Id": 1,
      "Prj_No": 1,
      "Prj_Name": "name",
      "Cus_Company_Name": "company",
      "Prj_StartDate": "2011/04/25",
      "Prj_CompletionDate": "2011/04/25"
    },
{
      "Prj_Id": 1,
      "Prj_No": 1,
      "Prj_Name": "name",
      "Cus_Company_Name": "company",
      "Prj_StartDate": "2011/04/25",
      "Prj_CompletionDate": "2011/04/25"
    }
  ]
}

jquery Datatables by default looks for data property for the array of objects https://datatables.net/reference/option/ajax.dataSrc https://datatables.net/examples/ajax/objects.html