Displaying Characters Such As The Percent Sign

Displaying Characters Such As The Percent Sign

DanOshDanOsh Posts: 37Questions: 11Answers: 1

I am trying to get the percentage sign behind an INT field value column. I've searched but almost all forum posts relate to the Legacy Interface notice for earlier versions.

The only place I've found in either the manual or forum post similar was a forum post and applied the following code, but it leaves the % sign in front of the integer:

{ data: "Pct_Dif_Price", render: $.fn.dataTable.render.number('', '', 'post', '%', 0 ), "sClass": "alignright" },

How can I display characters before or after what is in the cell?

Thanks

Answers

  • allanallan Posts: 63,687Questions: 1Answers: 10,500 Site admin

    You would need to use columns.render to format and display the number as you wish. The number rendering helper doesn't currently have an option to add a postfix character.

    Allan

  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    It worked in-part.

    When I target two columns, 49 and 50, only the 49th column displays the %. I thought maybe a comma after the 50 but still no display of the % sign in column 50.

        $('#example').DataTable( {
            "columnDefs": [ {
                    "targets": [ 49, 50 ],
                    "render": function ( data, type, full, meta ) {
                    return +data+'%';
                    }
                } ],
    
  • DanOshDanOsh Posts: 37Questions: 11Answers: 1

    Allan,

    Figured it out. I had the number rendering helper already in the "data:" column 50 and removed it.

    This actually now raises a very interesting question, are functions such as render superceded like CSS, meaning external, then in-page (header), then inline?

    Example: Would render inline with "Data:" supercede render in columnDef?

  • allanallan Posts: 63,687Questions: 1Answers: 10,500 Site admin

    Would render inline with "Data:" supercede render in columnDef?

    I don't understand what you mean by render inline. As in using the columns option? Yes, columns will always take priority over the options defined incolumnDefs`.

    Allan

  • AnonymoleAnonymole Posts: 13Questions: 2Answers: 1

    Should just update the number render function with,

    DataTable.render = {
      number: function ( thousands, decimal, precision, prefix, suffix ) {
        return {
          display: function ( d ) {
            var negative = d < 0 ? '-' : '';
            d = Math.abs( parseFloat( d ) );
    
            var intPart = parseInt( d, 10 );
            var floatPart = precision ?
              decimal+(d - intPart).toFixed( precision ).substring( 2 ):
              '';
    
            return negative + (prefix||'') +
              intPart.toString().replace(
                /\B(?=(\d{3})+(?!\d))/g, thousands
              ) +
              floatPart + (suffix ? suffix : "");
          }
        };
      }
    };
    
  • allanallan Posts: 63,687Questions: 1Answers: 10,500 Site admin

    Yes I plan to. Thanks for the suggestion.

    Allan

This discussion has been closed.