Я создаю таблицы с использованием таблиц данных и данных из 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 (таблица данных): в 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");
}
});
});
Используйте обратный вызов рендеринга в определении столбца. Позволяет вам управлять тем, что отображается на основе входного значения
@LucaKiebel, это то, что OP говорит, что они используют. Изображение похоже на
Да ладно, я думал, что читал это где-то там. Добавил тег.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


вы можете создать свою таблицу в 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 Просто добавьте предложенный раздел columnDefs (т.е. часть {...}) к уже имеющемуся columnDefs.
@davidkondrad, спасибо, вот оно появилось. Но когда я распечатываю таблицу или экспортирую в pdf, почему отсутствует знак? Каким образом (° C) и (%) по-прежнему отображаются при экспорте данных?
Извините, я новичок в веб-программах. Это моя домашняя работа из школы, и у меня нет решения для моей программы. Спасибо за помощь заранее.
У меня есть решение проблемы 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;
}
Пожалуйста, добавьте код, который вы используете для заполнения таблицы.