How to set columnDefs parameters dynamically
How to set columnDefs parameters dynamically
Honeydew
Posts: 25Questions: 7Answers: 0
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?
This question has an accepted answers - jump to answer
Answers
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
Thanks Colin for the reply. I would appreciate if you could please explain this with an example.
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.
Here is an example that builds the column headers and
columns.datafrom 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.visiblewithin thecolumnsconfig. 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 useJSON.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