fnFormatNumber an example

fnFormatNumber is used to format the numbers in the information element at the bottom (by default) of the table ("Showing 10 of 10,000 records" for example).

by Shrikrishna Gupta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<html>
<title>

</title>

<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="..\js\jquery-3.4.1.js"></script>
    <script src="..\js\jquery.dataTables.min.js"></script>
    <script src="..\js\dataTables.bootstrap.js"></script>
    <script src="..\js\dataTables.responsive.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

</head>
<style>
    .lightRed {
        background-color: #ff8080 !important
    }
    
    .lightRed a {
        color: #fff;
        font-weight: bold;
    }
    
    .red {
        background-color: #f00;
    }
    
    body {
        margin: 2em;
        font-size: 140%;
    }
    
    h2 {
        text-align: center;
        padding: 20px 0;
    }
    
    table caption {
        padding: .5em 0;
    }
    
    table.dataTable th,
    table.dataTable td {
        white-space: nowrap;
    }
    
   ...

JavaScript

$(document).ready(function() {
        // DataTable initialisation
        $('#example').DataTable({
            ajax: {
                url: 'employee_data.json',
                dataSrc: ''
            },
            columns: [{
                data: null
            }, {
                data: "name"
            }, {
                data: "position"
            }, {
                data: "office"
            }, {
                data: "age"
            }, {
                data: "start date"

            }, {
                data: "salary"
            }],
            "fnFormatNumber": function(iIn) {
                if (iIn < 1000) {
                    return iIn;
                } else {
                    var
                        s = (iIn + ""),
                        a = s.split(""),
                        out = "",
                        iLen = s.length;

                    for (var i = 0; i < iLen; i++) {
                        if (i % 3 === 0 && i !== 0) {
                            out = "," + out;
                        }
                        out = a[iLen - i - 1] + out;
                    }
                }
                return out;
            },
            "fnRowCallback": function(nRow, aData, iDisplayIndex) {
                var info = $(this).DataTable().page.info();
                $("td:nth-child(1)", nRow).html(info.start + iDisplayIndex + 1);
                return nRow;
            },
            "paging": true,
            "autoWidth": true,

        });
    });