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

Я создаю таблицы с использованием таблиц данных и данных из MySQL. Я хочу добавить строковые данные к данным в моей таблице, например, для данных в столбцах температура всех данных равна (C), как показано ниже. Как добавить в таблицу такие строки, как ° 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 (таблица данных): в 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");
      }
     }); 
    });

Пожалуйста, добавьте код, который вы используете для заполнения таблицы.

Luca Kiebel 15.09.2018 13:51

Используйте обратный вызов рендеринга в определении столбца. Позволяет вам управлять тем, что отображается на основе входного значения

charlietfl 15.09.2018 13:51

@LucaKiebel, это то, что OP говорит, что они используют. Изображение похоже на

charlietfl 15.09.2018 13:53

Да ладно, я думал, что читал это где-то там. Добавил тег.

Luca Kiebel 15.09.2018 13:54
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
135
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

String  = "<th style = "text-align:center;" width = "18%">"+(variable)+"(°C)</th>"
Ответ принят как подходящий

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

Рендерер:

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%;
}

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

демо -> http://jsfiddle.net/1du07tfn/

Я добавляю код javascript в свой пост, где я использовал "ColumnDefs:", чтобы указать номер индекса в таблице. Как мне добавить код в свой скрипт?

bagzz 15.09.2018 15:24

@bagzz Просто добавьте предложенный раздел columnDefs (т.е. часть {...}) к уже имеющемуся columnDefs.

davidkonrad 15.09.2018 15:50

@davidkondrad, спасибо, вот оно появилось. Но когда я распечатываю таблицу или экспортирую в pdf, почему отсутствует знак? Каким образом (° C) и (%) по-прежнему отображаются при экспорте данных?

bagzz 16.09.2018 13:40

Извините, я новичок в веб-программах. Это моя домашняя работа из школы, и у меня нет решения для моей программы. Спасибо за помощь заранее.

bagzz 16.09.2018 16:45

У меня есть решение проблемы 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;
}   

Другие вопросы по теме