I want to create dynamic column and rows based on response. I am using ASP.net MVC Core
I want to create dynamic column and rows based on response. I am using ASP.net MVC Core
jitendraakshay
Posts: 2Questions: 1Answers: 0
I am getting different response coming from single API for which i need dynamic column and rows datatable with pagination.
Controller:
public async Task<JsonResult> PreviewFileUpload(string FileName, string FileType)
{
SearchParam param = new SearchParam();
long totalRows = 0;
DataTableFilters filters = new DataTableFilters();
filters.Offset = 0;
filters.Limit = 10;
filters.SortColumn = Request.Form["columns[" + Request.Form["order[0][column]"] + "][name]"];
filters.SortDirection = Request.Form["order[0][dir]"];
filters.SearchKey = Request.Form["search[value]"].FirstOrDefault();
param.FileName = FileName;
param.FileType = FileType;
param.DataTableFilters = filters;
var response = await fileUploadRepo.GetFieUploadPreview(param);
return Json(new { data = response, recordsTotal = 100, recordsFiltered = 100 });
}
JQuery
$.ajax({
url: "/Admin/FileUploadDetails/PreviewFileUpload",
type: 'POST',
data: { 'FileName': data.FILE_NAME, 'FileType': data.FILE_TYPE },
success: function (response) {
if ($.fn.DataTable.isDataTable('#example')) {
$('#tblPreview').DataTable().destroy();
$('#tblPreview').empty();
}
//Listing Columns (Table Header) from json ajax response
var Columns = [];
var TableHeader = "<thead><tr>";
$.each(response.data[0], function (key, value) {
debugger;
Columns.push({ "data": key })
TableHeader += "<th>" + key + "</th>"
});
TableHeader += "</thead></tr>";
$("#tblPreview").append(TableHeader);
$('#tblPreview').dataTable({
"data": response.data,
"columns": Columns,
"JQueryUI": true
});
}
});
but it give me only page number 1 in pagination. the pagination detail coming from controller (server side)
Looking forward
Thanks in advance
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
Answers
Datatables has its own server side paging protocol called Server Side Processing. The protocol is documented here. To use it you need to enable both the
ajaxoptions andserverSideoptions. This protocol won't work with the way you are loading data using jQuery ajax() anddatato load the data.You have this in the server script:
This will limit the number of rows returned to 10. The
dataoption will see only 10 rows and set the paging buttons appropriately for 10 rows.Here is an example using server side processing and dynamic columns from the server:
http://live.datatables.net/qimukefe/1/edit
The jQuery ajax() is used to just fetch the column header data. In the example it uses the same URL as Datatables but you will want a different URL that just returns the column header definitions. Then it initializes Datatables with server side processing and the dynamic columns.
Kevin
when i include serverside=true nothing will appear. i did all the stuff i get only page number 1
If you enable server-side processing, did you implement the search, sort and paging code needed on the server-side? The page Kevin linked to describes the full requirements from a client-side point of view.
Another option is to use our Editor .NET libraries which do support server-side processing at the back end.
Allan