Thousand seperator not working

miltont

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

miltont

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>

kthorngren

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

miltont

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.

colin

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

miltont

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.

kthorngren

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

miltont

Thanks Kevin,

That did the trick!!!!

Regards

Milton