Render Helper Dynamically

Render Helper Dynamically

deep88deep88 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

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    Try chaining display() to the number renderer inside the columns.render function, like this:

          {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 $.fn.dataTable.render.number( ',', '.', 0).display( row.cost );
          }}
    

    Kevin

  • deep88deep88 Posts: 6Questions: 2Answers: 0
    edited February 2022

    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)

    $('#mytable').DataTable().column(2).visible(false);
    
  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736
    edited February 2022

    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 try rows().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

  • deep88deep88 Posts: 6Questions: 2Answers: 0

    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/

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736
    edited February 2022

    I think the problem is you are using this:

    render: $.fn.dataTable.render.number(',', '.', nDecimals),
    

    This statically sets the number render format to the initial values. Using columns.render as a function will allow for calling the number renderer with updated values. See this example:
    https://jsfiddle.net/j4h0Lfk8/1/

    Kevin

  • deep88deep88 Posts: 6Questions: 2Answers: 0

    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?

            $(tbl1).DataTable().rows().invalidate().draw();  
            $(tbl1).dataTable().fnClearTable();
            $(tbl1).dataTable().fnAddData(result);  
    
  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    The functions that start with fn are 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,

    $(tbl1).DataTable().clear().rows.add(result);
    

    Colin

  • deep88deep88 Posts: 6Questions: 2Answers: 0

    Thanks a ton. This is what I wanted. FYI - .draw( ) was missing at the end of your code.

Sign In or Register to comment.