CODEWITHSUNDEEP
jquerydatatablesnumbers
stefano manzi
stefano manzi

Reputation: 123

jQuery datatables suppress scientific notation

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

Upvotes: 2

Views: 453

Answers (1)

andrewJames
andrewJames

Reputation: 21918

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

Upvotes: 3

Related Questions