Render Helper Dynamically
Render Helper Dynamically
deep88
Posts: 6Questions: 2Answers: 0
I want to format column dynamically. datatables has built-in helpers for the same. The code below works :
render: $.fn.dataTable.render.number( ',', '.', 0)
But I am trying to format after creation of table as formatting is dependent on user input. The code below does not work.
$('#mytable').DataTable().column(2).render.number(',', '.', 0);
var oldCurrency = 'usd';
var newCurrency = 'usd';
var myTable = $('#mytable').DataTable({
sDom: 't',
columns:[
{data: 'item', title: 'Item'},
{data: 'descr', title: 'Description'},
{data: 'cost', title: 'Cost', render: function(data, type, row){
var exchangeRate = {usd: 1, eur: 0.87, gbp: 0.78};
row.cost = row.cost*exchangeRate[newCurrency]/exchangeRate[oldCurrency];
return row.cost;
}}
]
});
$('#currency').on('focus', function(){
oldCurrency = this.value;
});
$('#currency').on('change', function(){
newCurrency = this.value;
myTable.draw();
});
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="test.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<select id="currency">
<option value="usd">USD</option>
<option value="eur">EUR</option>
<option value="gbp">GBP</option>
</select>
<table id="mytable">
<thead>
<th>Item</th>
<th>Description</th>
<th>Cost</th>
</thead>
<tbody>
<tr>
<td>pen</td>
<td>writing tool</td>
<td>5.5</td>
</tr>
<tr>
<td>pencil</td>
<td>wooden stick</td>
<td>4.8</td>
</tr>
<tr>
<td>eraser</td>
<td>piece of rubber</td>
<td>1.2</td>
</tr>
</tbody>
</table>
</body>
</html>
This question has an accepted answers - jump to answer
Answers
Try chaining
display()to the number renderer inside thecolumns.renderfunction, like this:Kevin
Thanks. I want to do it using API. I want to format after creation of table as formatting is dependent on user input. For example (to hide rows using API)
Its not meant to be used as an API. You can try using
draw()when the user changes the option to redraw the table. If that doesn't work then tryrows().invalidate()for Datatables to invalidate its data cache and re-render the output. If this doesn't help then please provide a test case showing what you have and a description of what you want to have happen.Kevin
Thanks for your prompt response. I tried with rows().invalidate() but it didn't work.
I have created a testcase for your reference. I want to format decimals in the second column based on dropdown value.
https://jsfiddle.net/Deepanshu88/y1or8q7d/10/
I think the problem is you are using this:
This statically sets the number render format to the initial values. Using
columns.renderas a function will allow for calling the number renderer with updated values. See this example:https://jsfiddle.net/j4h0Lfk8/1/
Kevin
Thank you so much. It works like a charm. Last question if you won't mind - I also need to add new data. I'm using fnAddData( ) for that. Can these 3 lines together be converted into more efficient manner or this is the efficient approach?
The functions that start with
fnare legacy. It looks like you're invalidating the rows before clearing them, so that shouldn't be necessary.Something like this should do the trick,
Colin
Thanks a ton. This is what I wanted. FYI -
.draw( )was missing at the end of your code.