Как добавить строки (° C) к данным в моей таблице?

Question

Я создаю таблицы, используя таблицы данных и данные из MySQL.Я хочу добавить строковые данные к данным в моей таблице, например, для данных в столбцах температура каждого из данных (C), как показано ниже.Как добавить строки типа ° C и% в мою таблицу?

Код PHP:

<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "db_hosting");
//$columns = array('order_id', 'order_customer_name', 'order_item', 'order_value', 'order_date');
$columns = array('id', 'time', 'temperature', 'humidity');    
$query = "SELECT id, DATE_FORMAT(time, '%d %M %Y %H:00') AS time, temperature, humidity FROM data WHERE ";   
if($_POST["is_date_search"] == "yes")
{
 $query .= 'DATE(time) BETWEEN "'.$_POST["start_date"].'" AND "'.$_POST["end_date"].'" AND ';
}

if(isset($_POST["search"]["value"]))
{
 $query .= '
  (id LIKE "%'.$_POST["search"]["value"].'%")
 ';
}

if(isset($_POST["order"]))
{
 $query .= "GROUP BY DATE_FORMAT(time, '%d-%M-%Y %H:00') ORDER BY 'time'";
}


$query1 = '';

if($_POST["length"] != -1)
{
 $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}    
$number_filter_row = mysqli_num_rows(mysqli_query($connect, $query));    
$result = mysqli_query($connect, $query . $query1);

$data = array();   
while($row = mysqli_fetch_array($result))
{
 $sub_array = array();
 $sub_array[] = ""; 
 $sub_array[] = $row["time"];
 $sub_array[] = $row["temperature"];
 $sub_array[] = $row["humidity"];
 $data[] = $sub_array;
}    
function get_all_data($connect)
{
 $query = "SELECT * FROM data";
 $result = mysqli_query($connect, $query);
 return mysqli_num_rows($result);
}

$output = array(
 "draw"    => intval($_POST["draw"]),
 "recordsTotal"  =>  get_all_data($connect),
 "recordsFiltered" => $number_filter_row,
 "data"    => $data
);    
echo json_encode($output);
?>

Таблица:

<table width="98%" class="table table-bordered table-striped" id="tabel_data" style="text-align:center;">
     <thead >
      <tr >
       <th style="text-align:center;" width="8%">No.</th>
       <th style="text-align:center;" width="22%">Datetime</th>
       <th style="text-align:center;" width="18%">Temp (°C)</th>
       <th style="text-align:center;" width="18%">Humidity (%)</th>
      </tr>
     </thead>

Код Javacript (dataTable):в JavaScript есть код для фильтрации данных на основе даты и может экспортировать данные таблицы

$(document).ready(function(){
     $('.input-daterange').datepicker({
      todayBtn:'linked',
      format: "yyyy-mm-dd",
      autoclose: true
     });

     fetch_data('no');
     function fetch_data(is_date_search, start_date='', end_date='')
     {
      var dataTable = $('#tabel_data').DataTable({
          "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0,
        } ],
       "order": [[ 1, 'asc' ]],
         dom: 'Bfrtip',
            buttons: [
                 {
                    extend: 'print',
                    title: '<h3 align ="center">Data table</h3>',
                     text:      '<i class="fa fa-l fa-print"></i> Print',
                     titleAttr: 'Cetak Tabel',
                    messageTop: '<p align ="center">created by PDFmake</p>',
                     filename: 'data_table'
                },
                {
                    extend: 'pdfHtml5',
                    customize: function (doc) {
                        doc.content[1].table.widths = 
                        Array(doc.content[1].table.body[0].length + 1).join('*').split('');
                        doc.defaultStyle.alignment = 'center';
                        doc.styles.tableHeader.alignment = 'center';
                        doc.content.splice(0, 1, {
                              text: [{
                                text: 'Data Table \n',
                                bold: true,
                                fontSize: 16
                              }, {
                                text: ' Created by PDFmake \n', //
                                bold: true,
                                fontSize: 11
                              },],
                              margin: [0, 0, 0, 12],
                              alignment: 'center'
                            });
                          },
                    exportOptions: {
                    modifier: {
                        selected: null
                    }
                },
                    title: 'Data table',
                    titleAttr: 'Simpan sebagai PDF',
                    text:      '<i class="fa fa-l fa-file-pdf-o"></i> PDF',
                    filename: 'data_tabel_'
                }
            ],

       "paging": false,
       "processing" : true,
       "serverSide" : true,
       bFilter:false,
       "ajax" : {
        url:"fetch.php",
        type:"POST",
        data:{
         is_date_search:is_date_search, start_date:start_date, end_date:end_date
        }, 
       }
      });
         dataTable.on('draw.dt', function () {
    var info = dataTable.page.info();
    dataTable.column(0, { search: 'applied', order: 'applied', page: 'applied', }).nodes().each(function (cell, i) {
        cell.innerHTML = i + 1 + info.start;
        dataTable.cell(cell).invalidate('dom'); 
    });
}); 
 }
     $('#search').click(function(){
      var start_date = $('#start_date').val();
      var end_date = $('#end_date').val();
      if(start_date != '' && end_date !='')
      {
       $('#tabel_data').DataTable().destroy();
       fetch_data('yes', start_date, end_date);
        //$("#tabel").show(); 
        document.getElementById('tabel').style.display = "block";  
      }
      else
      {
       alert("Both Date is Required");
      }
     }); 
    });

Answer 1

Вы можете заключить содержимое в <span> и сделать это в чистом CSS:

Renderer:

columnDefs: [{
  targets: [2,3],
  render: function(data) {
    return '<span>'+data+'</span>'
  }
}]

CSS:

table.dataTable td:nth-child(3) span:after {
  content: '  ℃'; 
  color: red;
  font-size: 80%;
}
table.dataTable td:nth-child(4) span:after {
  content: ' %'; 
  color: red;
  font-size: 80%;
}

Преимущество этого подхода состоит в том, что данные все еще рассматриваются как числа -

demo -> http://jsfiddle.net/1du07tfn/

Answer 2

У меня есть решение проблемы PHP:

$data = array();
$celcius = ' °C';
$percent = ' %';   
while($row = mysqli_fetch_array($result))
{
 $sub_array = array();
 $sub_array[] = ""; 
 $sub_array[] = $row["time"];
 $sub_array[] = $row["temperature"].$celcius;
 $sub_array[] = $row["humidity"].$percent;
 $data[] = $sub_array;
}   

Answer 3

Вы можете создать свою таблицу в JD по строке:

String ="<th style="text-align:center;" width="18%">"+(variable)+"(°C)</th>"