DataTable refuses to populate

JArmbruster

The below listed code is almost exactly out of the DataTables.Net documentation.

I make an Ajax call to the server, code below, and the table does Not Populate

HTML

    <table width="100%" id="example" cellspacing="0" class="display">
        <thead>
            <tr>
                <th>comp_name</th>
                <th>addr_Address1</th>
                <th>addr_State</th>
                <th>pers_FirstName</th>
                <th>pers_LastName</th>
                <th>pers_Gender</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>comp_name</th>
                <th>addr_Address1</th>
                <th>addr_State</th>
                <th>pers_FirstName</th>
                <th>pers_LastName</th>
                <th>pers_Gender</th>
            </tr>
        </tfoot>
    </table>        

JavaScript code:

      var myTable = $('#example').DataTable( {
          ajax: { url: "/api/PatientData/SearchPatientRecord"
                   },
        columns: [
        { data: "comp_name" },
        { data: "addr_Address1" },
        { data: "addr_State" },
        { data: "pers_FirstName" },
        { data: "pers_LastName" },
        { data: "pers_Gender" }
        ]
       } );

server code:

public class PatientRecord
{
    public string comp_name { get; set; }
    public string addr_Address1 { get; set; }
    public string addr_State { get; set; }
    public string pers_FirstName { get; set; }
    public string pers_LastName { get; set; }
    public string pers_Gender { get; set; }

    public PatientRecord() { }

}


public class PatientRecordList
{
    public long draw { get; set; }
    public int recordsTotal { get; set; }
    public int recordsFiltered { get; set; }
    public PatientRecordList() { }
    public List<PatientRecord> data = new List<PatientRecord>();
}



        PatientRecord prcd = new PatientRecord();

        prcd.addr_Address1 = "1st street";
        prcd.addr_State = "NY";
        prcd.comp_name = "Trump";
        prcd.pers_FirstName = "Betty";
        prcd.pers_Gender = "F";
        prcd.pers_LastName = "Smith";


        PatientRecordList prcdLst = new PatientRecordList();

        prcdLst.data.Add(prcd);

        prcdLst.recordsTotal = 75;
        prcdLst.recordsFiltered = 0;
        //          prcdLst.draw = Convert.ToInt64(variables[2]);
        prcdLst.draw = 1;

        return JsonConvert.SerializeObject(prcdLst);

kthorngren

Do you get an error message?

Have you verified the JSON object matches the Datatables required structure?

Kevin

JArmbruster

The complete code is listed here. If there is anything missing, or incorrect, the code above should indicate to someone more knowledgeable about the DataTables framework than I am what is incorrect.

tangerine

It would help if you answered Kevin's questions.
"the table does Not Populate" is not an adequate description of your problem.

JArmbruster

below is the data that is read from the web service:

var tst = "{"data":[{"comp_name":"Trump","addr_Address1":"1st street","addr_State":"NY","pers_FirstName":"Betty","pers_LastName":"Smith","pers_Gender":"F"}],"draw":1,"recordsTotal":1,"recordsFiltered":0}"

this is the DataTable call:

          $('#example').DataTable({
              "dataSrc": tst,
              "serverSide": true,
              "select": {
                  "style": 'single'
              },
              columns: [
              { data: "comp_name" },
              { data: "addr_Address1" },
              { data: "addr_State" },
              { data: "pers_FirstName" },
              { data: "pers_LastName" },
              { data: "pers_Gender" }
              ]
          });

kthorngren

Having the quotes around the object names "data":[{"comp_name" will not work. The JSON data should look like this in the browser:
{data:[{comp_name:"Trump",addr_Address1:"1st street",addr_State:"NY",pers_FirstName:"Betty",pers_LastName:"Smith",pers_Gender:"F"}],draw:1,recordsTotal:1,recordsFiltered:0}

You can check the JSON response in the browser. This page provides steps for Chrome:
https://datatables.net/manual/tech-notes/1

Or you can use the DT debugger as described here to see the JSON:
https://datatables.net/manual/tech-notes/10

Kevin

allan

1. There is no dataSrc option at the top level of DataTables. I think want you want is data.
2. If you do, then you would use tst.data from the above object.
3. Server-side processing fundamentally requires the use of the ajax option. You cannot use server-side processing (you have serverSide enabled) without that option.
4. Your JSON is not valid as Kevin notes. You can actually have quotes in Javascript like you can in JSON, but you haven't escaped them in the string. jsonlint.com will confirm this.

Allan