jQuery datatables suppress scientific notation

Question

I am using datatables to render a table and show data from my api.

<script type="text/javascript">
$.fn.dataTable.ext.errMode = 'throw';
$(document).ready(function (){
    var table = $('#example').DataTable({

        'ajax': {
            'url': '/api/books',
            'dataSrc': '',

        },
      "language": {
        "emptyTable": "Nothing to show",
    },
      "columns": [
            { "data": "price", render: $.fn.dataTable.render.number(',', '.', 8, ''), "width":"40%"  },
            { "data": "amount", render: $.fn.dataTable.render.number(',', '.', 8, '') },
            { "data": "sum", render: $.fn.dataTable.render.number(',', '.', 8, '') },
           
        ],
       "scrollY":        "300px",
       "scrollCollapse": true,
       "autoWidth": false,
       "lengthChange": false,
       "ordering": false,
       "pageLengt"': 50,
       "bFilter": false,
       "bPaginate": false,
       "bInfo": false,
       "bSort": false,
       "createdRow": function( row, data, dataIndex){
        
                [...more code here...]
});

</script>

This code is working fine, but any number < 0.00000100 is showing using scientific notation. is there any way to suppress it? thank for the help

Does increasing the precision help? If not you're most likely best off rendering the value as a string — Rory McCrossan
– Rory McCrossan, Commented Jul 22, 2021 at 18:12

andrewJames · Accepted Answer · 2021-07-22 19:32:49Z

You can use the JavaScript Intl.NumberFormat object in a DataTables column renderer:

Intl.NumberFormat('en', { maximumSignificantDigits: 15 }).format(1234.00000000123);

Here is a demo:

var dataSet = [
    {
      "name": "Tiger Nixon",
      "amount": 1234.00000000123
    }
  ];

$(document).ready(function() {

var table = $('#example').DataTable( {
  data: dataSet,
  columns: [
    { 
      title: "Name", 
      data: "name" 
    },
    {
      title: "Amount", 
      data: "amount",
      render: function ( data, type, row, meta ) {
        if (type === 'display') {
          return Intl.NumberFormat('en', { maximumSignificantDigits: 15 }).format(data);
        } else {
          return data;
        }
      }
    }
  ]

} );

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
    </table>

</div>

</body>
</html>

The plug-in used in the question uses the JavaScript parseFloat() function which, as you have seen, will convert values to scientific notation if the value is sufficiently small - like the example you give:

parseFloat(0.00000099) -> 9.9e-7

Collectives™ on Stack Overflow

jQuery datatables suppress scientific notation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related