Complex server side table creation MVC, Razor

asingh18

Im using datatables with MVC and Razor

My json response is good I'm getting the right row information, paging is working too.

My issue is i want to manipulate the how the data is displayed in the table and i cant seem to figure out how to do it.

I've looked at the columns.render documentation https://datatables.net/reference/option/columns.render

As well as the more detailed version https://datatables.net/manual/data/renderers

I cant seem to figure it out. I need my table to look like this https://imgur.com/a/Ws6FWXy
This image is for a single row.

I have made this work with razor but the data load is way to slow hence i moved to data tables to procedurally load the information.

I've tried using the render:function(data,type,row) but i cant seem to figure it out. I'm thinking maybe i have to create the row manually in jQuery and then add and draw the table.

This is my serverside code for table info, its spitting out the right results

public JsonResult OnGetServerSideDataTable(DataTableAjaxModel ajaxModel)
        {
            List<DutyWeb> temp = HttpContext.Session.Get<List<DutyWeb>>("appsSession");
            //int filteredResult = 0;
            int totalResult = 0;

            totalResult = temp.Count;

            temp = temp.Skip(ajaxModel.start).Take(ajaxModel.length).ToList();

            //filteredResult = temp.Count;

            var result = temp.Select(x => new
            {
                url = x.url,
                appName = x.appName,
                location= x.location,
                contactName = x.contactName,
                contactRole = x.contactRole,
                server = x.server,
            }).ToList();

            CleanData(temp);

            return new JsonResult(new {draw = ajaxModel.draw, recordsTotal = totalResult, recordsFiltered = totalResult, data = result});
        }