Thousand seperator not working

Thousand seperator not working

miltontmiltont Posts: 22Questions: 8Answers: 0
edited January 2022 in Editor

I have the following script setup for DataTables and everything works except for the Thousand Separator.
Could anyone point me in the right direction please?

<script>
                $(document).ready( function () {
                $('#myTable').dataTable( {
                        "language": {
                            "thousands": "," },                                  //Should add a thousand seperator but it doesn't work
                        "order":[[1,"desc"],[2,"desc"],[3,"desc"],[4,"desc"]],   //Specifies Column to use for sorting 0 = 1st Column and direction = descending - make sure you add a comma at the end
                        "dom": '<lif<t>p>',                                      //Adds the Total Players to the middle
                        lengthMenu: [[100,10,25,50,-1],[100,10,25,50,"All"]],    //First row of Numbers is what is shown initiallly, Second row of Numbers is what is in the Drop Down Menu selector
                        fixedHeader: {headerOffset: 80},                         //Makes the Header fixed        
                           
                        columnDefs: [                                            //This makes the column align to the following
                            { targets: [1,2,3,7,8], className: 'dt-body-center'},
                            { targets: [4,5,6,9], className: 'dt-body-right'}
                                                 
                        ]
                        
                    }); 
                } );
            </script>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

This question has an accepted answers - jump to answer

Answers

  • miltontmiltont Posts: 22Questions: 8Answers: 0

    Sorry it should show:

    <script>
                    $(document).ready( function () {
                    $('#myTable').dataTable( {
                            "language": {
                                "thousands": "," },                                  //Should add a thousand seperator but it doesn't work
                            "order":[[1,"desc"],[2,"desc"],[3,"desc"],[4,"desc"]],   //Specifies Column to use for sorting 0 = 1st Column and direction = descending - make sure you add a comma at the end
                            "dom": '<lif<t>p>',                                      //Adds the Total Players to the middle
                            lengthMenu: [[100,10,25,50,-1],[100,10,25,50,"All"]],    //First row of Numbers is what is shown initiallly, Second row of Numbers is what is in the Drop Down Menu selector
                            fixedHeader: {headerOffset: 80},                         //Makes the Header fixed        
                               
                            columnDefs: [                                            //This makes the column align to the following
                                { targets: [1,2,3,7,8], className: 'dt-body-center'},
                                { targets: [4,5,6,9], className: 'dt-body-right'}
                                                     
                            ]
                            
                        }); 
                    } );
                </script>
    
  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    edited January 2022

    According to the language.thousands docs:

    Please note that unlike the language.decimal option, the thousands separator option is used for output of information only (specifically the info option).

    Sounds like this only affects the information element, ie, Showing 1 to 10 of 57 entries. Use the Number renderer to format the output of the table data.

    Kevin

  • miltontmiltont Posts: 22Questions: 8Answers: 0

    Thanks Kevin,

    I tried the following:
    I made a file called stats.js and linked this to my stats.html file.

    In the stats.js I put the following code:

    {
        data: '#align',
        render; DataTable.render.number( ',', '.', 0,  )
    }
    

    based on what was specified in the number documentation.

    The id for each td is #align (I tried with and without the #)

    I am unsure whether I have done this correctly,

    Any help would be appreciated.

    Milton.

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    You've got a few JS syntax errors there, it should be:

    render: DataTable.render.number( ',', '.', 0  )
    

    Note the removal of the semi-colon and comma,

    Colin

  • miltontmiltont Posts: 22Questions: 8Answers: 0

    Thanks Colin,

    I tried that and nothing changed.

    In the "number helper" documentation they use the following example:

    { data: 'price', render: DataTable.render.number( ',', '.', 2, '$' ) }

    what is the data 'price' referring to?

    Is this a class name of a TH, TR or TD
    or an id of a TH, TR or TD
    or the text used as the column header of a TH
    or none of these?

    I think my error is I am not targeting what data: ' ' should be and I am unclear as to what I should be using.

    Regards

    Milton.

  • kthorngrenkthorngren Posts: 21,330Questions: 26Answers: 4,951
    Answer ✓

    what is the data 'price' referring to?

    Please see the columns.data and Data Sources docs for details. In your original post it you don't have columns.data defined. You are using columnDefs to define some settings for the columns. In your case you would do the same. Use columnDefs.targets to list the column(s) you want to use the number renderer on. For example:

    columnDefs: [                                            //This makes the column align to the following
        { targets: [1,2,3,7,8], className: 'dt-body-center'},
        { targets: [4,5,6,9], className: 'dt-body-right'},
        { targets: [2, 3], render: DataTable.render.number( ',', '.', 2, '$' )                       
    ]
    

    Change the [2, 3] to match the columns you want to apply the renderer.

    Kevin

  • miltontmiltont Posts: 22Questions: 8Answers: 0

    Thanks Kevin,

    That did the trick!!!!

    Regards

    Milton

Sign In or Register to comment.