无法使用 php 格式化来自 mysql 数据库的 DataTables 数据

Question

I'm using the dataTables plugin to deal with some data. I'm using a mysql database and php. I'm able to display the data in the database, but I'm not able to format it. I have some fields that are dollar amounts, and I'd like to add dollar signs and thousands commas. Can anyone tell me how to do this please? The columns properties in dataTables don't work for me because the columns are being defined in the php file. The code below works, but I can't format my currency columns.

HTML:

<table id="example" class="display desktop" style="">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Title</th>
                <th>Company</th>
                <th>2019 Compensation</th>
                <th>Median Employee Pay</th>
                <th>Type of Position</th>
                <th>Stock Price Change (2018-19)</th>
                <th>2018 Compensation</th>
                <th>Compensation Increase (2018-19)</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
               <th></th>
                <th>Name</th>
                <th>Title</th>
                <th>Company</th>
                <th>2019 Compensation</th>
                <th>Median Employee Pay</th>
                <th>Type of Position</th>
                <th>Stock Price Change (2018-19)</th>
                <th>2018 Compensation</th>
                <th>Compensation Increase (2018-19)</th>
            </tr>
        </tfoot>
    </table>

jQuery:

$('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "php/getTables.php"
} );

PHP from getTables.php file.
This is copied from a tutorial. I just plugged in my database details. The code works; I just can't format my currency columns:

// DB table to use
$table = 'fortunate';
 
// Table's primary key
$primaryKey = 'fortunateID';
 
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
    array( 'db' => 'fortunateID',  'dt' => 0 ),
    array( 'db' => 'name',  'dt' => 1 ),
    array( 'db' => 'title',     'dt' => 2 ),
   array( 'db' => 'company',     'dt' => 3 ),
   array( 'db' => 'compensation2019',     'dt' => 4 ),
   array( 'db' => 'median-employee-pay',     'dt' => 5 ),
   array( 'db' => 'type-of-position',     'dt' => 6 ),
   array( 'db' => 'stock-price-change-2018-19',     'dt' => 7 ),
   array( 'db' => 'compensation2018',     'dt' => 8 ),
   array( 'db' => 'compensation-increase',     'dt' => 9 )
   
);
 
// SQL server connection information
$sql_details = array(
    'user' => 'myUserName',
    'pass' => 'myPassword',
    'db'   => 'myDatabase',
    'host' => 'myHost'
);
 
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * If you just want to use the basic configuration for DataTables with PHP
 * server-side, there is no need to edit below this line.
 */

require( 'ssp.class.php' );
 
echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

Answer 1

You can add a callback to do your formatting in either the php or javascript.

Backend solution:

$columns = array(
  array( 'db' => 'fortunateID',  'dt' => 0 ),
  array( 'db' => 'name',  'dt' => 1 ),
  array( 'db' => 'title',     'dt' => 2 ),
  array( 'db' => 'company',     'dt' => 3 ),
  array( 'db' => 'compensation2019',     'dt' => 4 ),
  array( 'db' => 'median-employee-pay',
         'dt' => 5,
         'formatter' => function( $d, $row ) {   
            return '$ '. number_format($number, 2);
        } ),
  array( 'db' => 'type-of-position',     'dt' => 6 ),
  array( 'db' => 'stock-price-change-2018-19',     'dt' => 7 ),
  array( 'db' => 'compensation2018',     'dt' => 8 ),
  array( 'db' => 'compensation-increase',     'dt' => 9 )   
);

Or you could do your formatting on the front end:

$('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "php/getTables.php"
    "columnDefs" : [
      {
        "targets": [3,4,6,7,8] //currency columns (0 indexed)
        "render": function ( data, type, row, meta ) {
                     let num = parseInt(data); //cast to number
                     let formatted = Number(num.toFixed(1)).toLocaleString();
                     return '$ ' + formatted; 
                 }
      }
 ]
} );