Is it possible to render custom column in DataTables.net? I've read a lot of tutorials and documentations, but cannot make it working. I would like to create thirds column with link where I use information from first column. My code looks like these:
$(document).ready(function () {
$('#categories').DataTable({
"ajax": '@Url.Action("Table", "Categories")',
"columns": [
{ "data": "Name" },
{ "data": "Parent" },
null
],
"columnsDefs": [
{
"render": function(data){
return "<a href='~/Admin/Categories/Edit' + data.Name + '>EDIT</a>";
},
"targets": 0
}
]
});
});
In json I'm only getting Name and Parent column informations. Any ideas to create third column with Name inside it? Thanks!
Each column has an optional rendering control called columns. render which can be used to process the content of each cell before the data is used. columns.
ColumnDefs option allows you to assign specific options to columns in the table.
This callback allows you to 'post process' each row after it have been generated for each table draw, but before it is rendered into the document. This means that the contents of the row might not have dimensions ( $(). width() for example) if it is not already in the document.
targets option provides the information required by DataTables for which columns in the table the column definition object should be applied. It can be: 0 or a positive integer - column index counting from the left. A negative integer - column index counting from the right.
Okay, so I've managed to do it by myself. Here is the answer for next generations:
$(document).ready(function () {
$('#categories').dataTable({
"ajax": '@Url.Action("Table", "Categories")',
"aoColumns": [
{ "data": "Name" },
{ "data": "Parent" },
{
"mData": "Name",
"mRender": function (data, type, row) {
return "<a href='Admin/Categories/Edit/" + data + "'>EDIT</a>";
}
}
]
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With