I'm using jQuery DataTables for tabular data in asp.net mvc 5. I have the following problem, when I enter to the URL where is supposed to appear the datatable, the table gives me an error, so pick the URL request which datatable uses to request the data and enter manually.
But if I do this request using postman, the request works as expected.
This is a snipped of my controller:
public ActionResult List(PagedListRequestViewModel pagedListRequestViewModel)
{
var pagedListRequest = Mapper.Map<PagedListRequest>(pagedListRequestViewModel);
PagedListResult<VacancyDTO> pagedListResult =
_vacancyService.GetAllVacancies(pagedListRequest);
var pagedResultViewModel = new PagedListViewModel<VacancyViewModel>
{
draw = pagedListRequestViewModel.draw,
recordsFiltered = pagedListResult.Count,
recordsTotal = pagedListResult.Count,
data = Mapper.Map<IEnumerable<VacancyViewModel>>(pagedListResult.Entities)
};
return Json(pagedResultViewModel, JsonRequestBehavior.AllowGet);
}
This a snipped of my ViewModel
public class VacancyViewModel
{
public int Id { get; set; }
public string Title { get; set; }
public int QuantityOfPositions { get; set; }
public string RequestedDate { get; set; }
public string ClosedDate { get; set; }
public int OpenPosition { get; set; }
public int ClosedPosition { get; set; }
public decimal Salary { get; set; }
public decimal AmountOfBenefits { get; set; }
[Display(Name = "Compesacion")]
public decimal CompesationTotal { get; set; }
public int TimeToRespond { get; set; }
public int DepartmentId { get; set; }
public string DepartmentName { get; set;}
public string VacancyType { get; set; }
}
A snipped of my js:
<script>
var vacancyListUrl = "/vacancy/list";
$("#vacancydt").DataTable(
{
processing: true,
serverSide: true,
ajax: vacancyListUrl,
ordering: false,
columns: [
{
"data": "DepartmentName",
render: function (data, type, row, meta) {
return "<a href=/department/detail/" + row.DepartmentId + ">" + data + "</a>";
}
},
{
"data": "Title",
render: function (data, type, row, meta) {
return "<a href=/vacancy/detail/" + row.Id + " >" + data + "</a>";
}
},
{
"data": "QuantityOfPositions"
},
{ "data": "RequestedDate" },
{ "data": "OpenPosition" },
{ "data": "ClosedPosition" },
{ "data": "ClosedDate" },
{ "data": "TimeToRespond" },
{ "data": "VacancyType" }
]
}
);
</script>
Response returned by postman:
{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
{
"Id": 4,
"Title": "Analista de Sistema",
"QuantityOfPositions": 5,
"RequestedDate": "09/10/2015",
"ClosedDate": "16/10/2015",
"OpenPosition": 0,
"ClosedPosition": 0,
"Salary": 20000,
"AmountOfBenefits": 0,
"CompesationTotal": 0,
"TimeToRespond": 7,
"DepartmentId": 1,
"DepartmentName": "Tecnologia",
"VacancyType": "Nuevo puesto"
},
{
"Id": 5,
"Title": "Personal de limpieza",
"QuantityOfPositions": 5,
"RequestedDate": "14/10/2015",
"ClosedDate": "19/10/2015",
"OpenPosition": 0,
"ClosedPosition": 0,
"Salary": 10000,
"AmountOfBenefits": 0,
"CompesationTotal": 0,
"TimeToRespond": 5,
"DepartmentId": 5,
"DepartmentName": "Operaciones",
"VacancyType": "Nuevo puesto"
},
{
"Id": 6,
"Title": "Hola Mundo",
"QuantityOfPositions": 5,
"RequestedDate": "12/10/2015",
"ClosedDate": "N/A",
"OpenPosition": 5,
"ClosedPosition": 0,
"Salary": 10000,
"AmountOfBenefits": 0,
"CompesationTotal": 0,
"TimeToRespond": 0,
"DepartmentId": 1,
"DepartmentName": "Tecnologia",
"VacancyType": "Reemplazo"
}
]
}
Request made by jquery datatable:
http://localhost:9765/vacancy/list?draw=1&columns[0][data]=DepartmentName&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=false&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=Title&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=false&columns[1][search][value]=&columns[1][search][regex]=false&columns[2][data]=QuantityOfPositions&columns[2][name]=&columns[2][searchable]=true&columns[2][orderable]=false&columns[2][search][value]=&columns[2][search][regex]=false&columns[3][data]=RequestedDate&columns[3][name]=&columns[3][searchable]=true&columns[3][orderable]=false&columns[3][search][value]=&columns[3][search][regex]=false&columns[4][data]=OpenPosition&columns[4][name]=&columns[4][searchable]=true&columns[4][orderable]=false&columns[4][search][value]=&columns[4][search][regex]=false&columns[5][data]=ClosedPosition&columns[5][name]=&columns[5][searchable]=true&columns[5][orderable]=false&columns[5][search][value]=&columns[5][search][regex]=false&columns[6][data]=ClosedDate&columns[6][name]=&columns[6][searchable]=true&columns[6][orderable]=false&columns[6][search][value]=&columns[6][search][regex]=false&columns[7][data]=TimeToRespond&columns[7][name]=&columns[7][searchable]=true&columns[7][orderable]=false&columns[7][search][value]=&columns[7][search][regex]=false&columns[8][data]=VacancyType&columns[8][name]=&columns[8][searchable]=true&columns[8][orderable]=false&columns[8][search][value]=&columns[8][search][regex]=false&start=0&length=10&search[value]=&search[regex]=false&_=1444758438997