create custom render for dom data
create custom render for dom data
Teroa
Posts: 9Questions: 3Answers: 0
Currently I'm using another plugin for displaying tables on my site.
I want to replace it with data tables. Everything is updated, but there is on thing left.
I'm creating a table like that:
<table id="data-table-command" class="table table-command table-striped table-bordered display" cellspacing="0" width="100%">
<thead>
<tr>
<th data-column-id="id" data-visible="false" data-type="numeric">ID</th>
<th data-column-id="name" data-order="asc">Name</th>
<th data-column-id="icon" data-type="icon">Icon</th>
<th data-column-id="commands" data-sortable="false">Options</th>
</tr>
</thead>
<tbody>
<% @datax.each do |data| %>
<tr>
<td><%= data.id %></td>
<td><%= data.name %></td>
<td><%= data.icon %></td>
<td><%= link_to 'Edit' edit_datax_path(data.id) %></td>
</tr>
<% end %>
</tbody>
</table>
Is there a posibility to update the icon-column with a custom render?
I want to return a html tag. Is it possoble to update data with client-side rendering?
like
icon:{
from: function (value) { return (value); },
to: function (value) { return ("<i class='fa fa-fw "+value.trim().toLowerCase()+"'></i>"); }
}
I'm creating the datatable currently with no options
$(".table-command").each(function () {
$(this).DataTable()
})
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
columns.render
should do what you want.Kevin
@kthorngren Thank you I've alerad read the render option.
But therefor I need to know on which position this data is located.
I've got serveral tables where I'm using an icon. And it's on diferent positions.
This was also one example. I need about 6 different modifying functions.
There are about 60 tables on my page, so I don't want to define each table manually.
You can use
columnDefs
for your render function. You will usecolumnDefs.targets
to define which columns to apply the render function. I'm not sure how you are determining which column has the icon but you can build the columnDefs options outside of Datatables, assign it to a variable then in the Datatables init assign the variable to the columnDefs option.If this suggestion doesn't work for you maybe others can provide alternatives.
Kevin
I cannot follow how this works. I'm little bit confused. I'm will not be the first one, who has a similar issue
Here is a quick example:
http://live.datatables.net/banigoba/1/edit
I'm not sure how your code is structured nor how you know which column contains the icon. So this example assumes column 0 is the column to render and it just renders a link. Assigns to a variable that can then be used in the Datatables init function.
Kevin