jquery datatable server side pagination mvc with Dynamic Columns

Question

I have used the below link code for server side paging in the datatable.

http://www.dotnetawesome.com/2015/11/jquery-datatable-server-side-pagination-sorting.html

but in my scenario. columns are dynamic and fetch from database.

$("#myTable").DataTable({
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": false, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "ajax": {
                    "url": "/home/LoadData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": [
                        { "data": "ContactName", "name": "ContactName", "autoWidth": true },
                        { "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
                        { "data": "Phone", "name": "Phone", "autoWidth": true },
                        { "data": "Country", "name": "Country", "autoWidth": true },
                        { "data": "City", "name": "City", "autoWidth": true },
                        { "data": "PostalCode", "name": "PostalCode", "autoWidth": true }
                ]
            });

Please help me how provide dynamic columns in this code.

Emil Alkalay Emil Alkalay · Accepted Answer · 2016-09-19T15:45:50

My suggestion is following:

Prepare second web service called /home/GetColumns. The service will return following JSON:

{
     "columns": [
                        { "data": "ContactName", "name": "ContactName", "autoWidth": true },
                        { "data": "CompanyName", "name": "CompanyName", "autoWidth": true },
                        { "data": "Phone", "name": "Phone", "autoWidth": true },
                        { "data": "Country", "name": "Country", "autoWidth": true },
                        { "data": "City", "name": "City", "autoWidth": true },
                        { "data": "PostalCode", "name": "PostalCode", "autoWidth": true }
                ]

}

Make Ajax request and get the these columns.
If operation is successful, provide the column information as variable to your snippet.

Example code:

$.ajax({url: "home/GetColumns", dataType: "json", success: function(result){
      $("#myTable").DataTable({
                "processing": true, // for show progress bar
                "serverSide": true, // for process server side
                "filter": false, // this is for disable filter (search box)
                "orderMulti": false, // for disable multiple column at once
                "ajax": {
                    "url": "/home/LoadData",
                    "type": "POST",
                    "datatype": "json"
                },
                "columns": result.columns
            });
}});

Note: You can start with mock service which returns static information and then implement real logic when ensure the front-end works.

jquery datatable server side pagination mvc with Dynamic Columns

2 Answers