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

jitendraakshayjitendraakshay Posts: 2Questions: 1Answers: 0
edited November 2022 in Free community support

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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 ajax options and serverSide options. This protocol won't work with the way you are loading data using jQuery ajax() and data to load the data.

    You have this in the server script:

        filters.Offset = 0;
        filters.Limit = 10;
    

    This will limit the number of rows returned to 10. The data option 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

  • jitendraakshayjitendraakshay Posts: 2Questions: 1Answers: 0

    when i include serverside=true nothing will appear. i did all the stuff i get only page number 1

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

Sign In or Register to comment.