How to set columnDefs parameters dynamically

Honeydew

My datatable show columns that are created dynamically and it works fine but I had to set the visibility and other options at front end page in columnDefs option. I want to pass all the things related to a column from the server side.

I have done this so far:

.ashx code

private void GetColumnNames(HttpRequest request, HttpResponse response)
{
    List<DatatableInboxColumnNames> columnNames = new List<DatatableInboxColumnNames>();
    columnNames.Add(new DatatableInboxColumnNames { data = "checkboxColumn", title = "" });
    columnNames.Add(new DatatableInboxColumnNames { data = "EmployeeId", title = "EmployeeId" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Name", title = "Name" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Title", title = "Title" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Joining", title = "Joining" });
    columnNames.Add(new DatatableInboxColumnNames { data = "Viewed", title = "Viewed" });

    string output = new JavaScriptSerializer().Serialize(columnNames);
    response.Write(output);
}

The above code returns the column name which works fine.

The front end code:

                   columns: result,
                    columnDefs: [
                        {
                            targets: 0,
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<input type="checkbox" class="editor-active">';
                                }
                                return data;
                            },
                            className: "dt-body-center",
                            orderable: false,
                            searchable: false
                        },
                        {
                            targets: 1,
                            visible: false
                        },
                        {
                            targets: -1,
                            visible: false
                        }
                    ]

Now instead of hard coding it here in front end I want to send the columnDef parameters through server side.

this is what I have started with:

public class Column
{
public string data { get; set; }
public string name { get; set; }
public bool searchable { get; set; }
public bool orderable { get; set; }
public Search search { get; set; }
}

public class Search
{
public string value { get; set; }
public string regex { get; set; }
}

Can you please suggest me a JSON format which will set the columnDef parameters?

colin

Hi @Honeydew ,

You'll need to get that columns prior to the DataTables' initialisation - since those initialisation parameters can't be changed afterwards, and the ajax will respond asynchronously.

The format for the response is entirely up to you, provided what you eventually pass to DataTables is in the expected format.

Cheers,

Colin

Honeydew

Thanks Colin for the reply. I would appreciate if you could please explain this with an example.

colin

If you're getting Ajax based data already, then you're familiar with what's needed then. So you just need to get the server to respond either with the columns and the data, and you separate the two, or you make two requests, one for the columns, and a second for the data.

kthorngren

Here is an example that builds the column headers and columns.data from the object keys in the first record.
http://live.datatables.net/huyexejo/1/edit

How your server script provides this info is up to you. You can apply things like columns.visible within the columns config. I suspect it will be easier to hard code the checkbox column instead of trying to build it programatically. My example doesn't show this but if your server script packages the column config in JSON then you can simply use JSON.parse() to apply it to the columns. The format just needs to match each option you want from the docs:
https://datatables.net/reference/option/

Kevin