Data collected from Ajax not appearing in data table

Data collected from Ajax not appearing in data table

loganfgloganfg Posts: 5Questions: 3Answers: 0

I'm having trouble outputting the data in my table after the ajax call. When my page loads, the data table is created with the correct format, however the data that should be contained inside the table is not being displayed. Instead all I'm getting is the "Loading..." text inside the empty table. The first chunk of code is my javascript for creating the table, the second is the C# code used to obtain the data and return it as a JsonResult, and last but not least is the model being used by the server to collect the data from the data table into an array. How do I alter the 'columns' option to make it work correctly?

$('#SP_Table').DataTable({
        autoWidth: false,
        lengthChange: false,
        info: false,
 
        responsive: true,
 
        //processing: true,
        //serverSide: true,
        //deferRender: true,
 
        searching: true,
 
        ordering: true,
        order: [0, 'asc'],
 
        paging: true,
        pagingType: "full_numbers",
        pageLength: SP_NumberOfRows($(window).height() - 330),
 
        ajax: {
            url: SP_Table_Data_URL,
            type: 'GET',
            cache: false,
            async: false,
            dataType: 'json'
        },
 
        columns: [
            { title: "Username", data: "Username", className: "alignleft", width: "88%" },
            { title: "", data: "readbutton", className: "aligncenter", orderable: false, searchable: false, width: "4%" },
            { title: "", data: "editbutton", className: "aligncenter", orderable: false, searchable: false, width: "3%" },
            { title: "", data: "deletebutton", className: "aligncenter", orderable: false, searchable: false, width: "5%" }
        ],
 
        initComplete: function () {
 
        }
    });
[HttpGet]
        public JsonResult SecurityPermissionsTableData()
        {
            List<SecurityPermissionsGridModel> list = securityPermissionsTable.Get(System.Security.Principal.WindowsIdentity.GetCurrent().Name.Split('\\').Last());
 
            var json = JsonConvert.SerializeObject(list);
 
            return ResultJson(json);
        }
public SecurityPermissionsGridModel()
{
     this.Username = null;
     this.readbutton = null;
     this.editbutton = null;
     this.deletebutton = null;
}

Note: an example of the data returned by the ajax call is:

Text:
"[ \"data\" : { \"Username\" : \"loganfg\", \"readbutton\" : \"<a onclick='SP_read(\"7\")' class='SRKbutton tiny SP_rbutton'>Details</a>\", \"editbutton\" : null, \"deletebutton\" : null}]"

JSON visualizer:
Username: "loganfg"
readbutton: "a onclick='SP_read("7")' class='SRKbutton tiny SP_rbutton'>Details</a>"
editbutton: ""
deletebutton: ""

This discussion has been closed.