时间戳

首页 > 解决方案 > 按其值着色行背景

php - 按其值着色行背景

问题描述

我希望通过取决于状态列的值来更改行颜色，（状态上会有这三个词之一，例如：“已订购”、“已发货”、“已完成”）

这是我从网上找到的零代码制作的

这是我的代码：

    <div class="tabela">
<div class="table-responsive">
    <table id="order_data" class="table table-bordered table-striped">
     <thead>
      <tr>
        <th>ID.</th>
        <th>Date</th>
        <th>Name</th>
        <th>Description</th>
        <th>Address</th>
        <th>City</th>
        <th>Phone</th>
        <th>Status</th>
        <th>Shipping</th>
        <th>Value</th>
      </tr>
     </thead>
     <tbody></tbody>
     <tfoot>
      <tr>
          <th colspan="9"><b>Total</b></th>
       <th id="total_order"></th>
      </tr>
     </tfoot>
    </table>
    <br />
    <br />
    <br />
   </div>
  </div>

<script type="text/javascript" language="javascript" >
 $(document).ready(function(){
  
   var dataTable = $('#order_data').DataTable({
    "processing" : true,
    "serverSide" : true,
    "order" : [],
    "ajax" : {
     url:"template/fetch.php",
     type:"POST" 
    },
    drawCallback:function(settings)
    {
     $('#total_order').html(settings.json.total);
    },

   });
   });
</script>

这也是我的 Fetch：

<?php

//fetch.php

// Include config file
require_once "../config/configpdo.php";


$column = array('order_id', 'order_date', 'order_customer_name', 'order_item', 'order_address', 'order_city', 'order_number', 'order_value', 'order_ship', 'order_status');

$query = '
SELECT * FROM tbl_order 
WHERE order_id LIKE "%'.$_POST["search"]["value"].'%" 
OR order_date LIKE "%'.$_POST["search"]["value"].'%" 
OR order_customer_name LIKE "%'.$_POST["search"]["value"].'%" 
OR order_item LIKE "%'.$_POST["search"]["value"].'%"
OR order_address LIKE "%'.$_POST["search"]["value"].'%"
OR order_city LIKE "%'.$_POST["search"]["value"].'%"
OR order_value LIKE "%'.$_POST["search"]["value"].'%"
OR order_ship LIKE "%'.$_POST["search"]["value"].'%"
OR order_number LIKE "%'.$_POST["search"]["value"].'%"
OR order_status LIKE "%'.$_POST["search"]["value"].'%"

';

if(isset($_POST["order"]))
{
 $query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['0']['dir'].' ';
}
else
{
 $query .= 'ORDER BY order_id DESC ';
}

$query1 = '';

if($_POST["length"] != -1)
{
 $query1 = 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}

$statement = $connect->prepare($query);

$statement->execute();

$number_filter_row = $statement->rowCount();

$statement = $connect->prepare($query . $query1);

$statement->execute();

$result = $statement->fetchAll();

$data = array();

$total_order = 0;

foreach($result as $row)
{
$sub_array = array();
$sub_array[] = $row["order_id"];
$sub_array[] = $row["order_date"];
$sub_array[] = $row["order_customer_name"];
$sub_array[] = $row["order_item"];
$sub_array[] = $row["order_address"];
$sub_array[] = $row["order_city"];
$sub_array[] = $row["order_number"];
$sub_array[] = $row["order_status"];
$sub_array[] = $row["order_ship"];
$sub_array[] = $row["order_value"]; 
 $total_order = $total_order + floatval($row["order_value"]);
 $data[] = $sub_array;
}

function count_all_data($connect)
{
 $query = "SELECT * FROM tbl_order";
 $statement = $connect->prepare($query);
 $statement->execute();
 return $statement->rowCount();
}

$output = array(
 'draw'    => intval($_POST["draw"]),
 'recordsTotal'  => count_all_data($connect),
 'recordsFiltered' => $number_filter_row,
 'data'    => $data,
 'total'    => number_format($total_order, 2)
);

echo json_encode($output);


?>

我可以想象这对某些人来说很容易，但对我作为初学者来说却很难。如果有人会在这个问题上帮助我，会很高兴

标签： phpuitableviewbackground-color

解决方案

我感谢您的帮助，所以在论坛上挣扎了几天，我从头开始解决了问题。如果创建了一个特定的单词并在脚本上方插入了一个函数，那么有一个想法是通过定位行并在行中插入一个类：

   rowCallback: function( row, data, index ) {
if ( data[7] == "Ordered" ) {$(row).addClass('green');} 
else if ( data[7] == "Shipped" ) {$(row).addClass('orange');}
else if ( data[7] == "Completed" ) {$(row).addClass('red');}

}

还必须通过在...内插入这样的样式来制作 css 样式。

<style>
.green{
background-color:#85e085 !important;}
.orange{
background-color:#ffb366 !important;}
.red{
background-color:#ff6666 !important;
}
</style>

我正在发布答案，也许有人遇到同样的问题，它可以提供一点帮助。如果您需要属于此的任何东西，请告诉我...

推荐阅读