在 DataTables 上添加徽章和样式列答案

【问题标题】：Adding badge and styling columns on DataTables在 DataTables 上添加徽章和样式列
【发布时间】：2018-12-21 04:31:15
【问题描述】：

问题

我想在引导程序“徽章”类中设置 Datatable 的样式，使其看起来像这样：，

使用下面的代码，这就是我所拥有的：

我通过 AJAX 将 mysql 数据库中的数据加载到数据表中

<script type="text/javascript">
  $( document ).ready(function() {
  var table = $('#transactionTable').DataTable( {
  "ajax": "walletTable.php",
  "bPaginate":true,
  "order":[[1,"desc"]],
  "bProcessing": true,
  "aoColumnDefs":[
    { "sClass": "badge badge-success", "aTargets":[4]}
  ],
  "columns": [
            {mData: 'id'},
            {mData: 'Date'},
            {mData: 'Amount', render: $.fn.dataTable.render.number(',','.',0,' ')},
            {mData: 'Info'},
            {mData: 'Status'}
          ]
        });

    });
  </script>

walletTable.php 从数据库中获取数据并将其发送到 json 数组中

walletTable.php

$tableSQL = "SELECT `id` as id, `amount` as Amount, `time` as Date, `status` as Status, `type` as Info FROM `transactionhistory` ORDER BY `transactionhistory`.`time` DESC";

 $getTable = mysqli_query($conn, $tableSQL);
$data = array();
while( $rows = mysqli_fetch_assoc($getTable) ) {
$data[] = $rows;
}
$results = array(
"sEcho" => 1,
"iTotalRecords" => count($data),
"iTotalDisplayRecords" => count($data),
"aaData" => $data
);
echo json_encode($results);

和 HTML 表格

<div class="table-responsive">
<table id="transactionTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                 <thead>
                   <tr>
                   <th>ID</th>
                   <th>Date</th>
                   <th>Amount</th>
                   <th>Info</th>
                   <th>Status</th>
                   </tr>
                 </thead>

                 </table>
             </div>

我也想要一个这样的功能，用状态改变徽章的颜色

function badgeColor($badgeStatus){
  if ($badgeStatus == "success") {
    echo "badge-success";
  }elseif ($badgeStatus == "pending") {
      echo "badge-info";
  }elseif ($badgeStatus == "failed") {
      echo "badge-danger";
  }

}

【问题讨论】：

标签： javascript php datatables

【解决方案1】：

所以，我做的事情有点不同，但也许这可以在某种程度上帮助你。

我正在使用 PHP 将我的数据加载到 DataTable 中。连接到服务器并查询后，我将数据加载到变量 $stmt 中，然后执行以下操作（我已删除实际的列名）：

while($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC))
{
  echo "<tr>";
  echo "<td>".$row['ColumnName']."</td>"; //0
  echo "<td>".$row['ColumnName']."</td>"; //1
  echo "<td>".$row['ColumnName']."</td>"; //2
  echo "<td>".$row['ColumnName']."</td>"; //3
  echo "<td>".$row['ColumnName']."</td>"; //4
  echo "<td>".$row['ColumnName']."</td>"; //5
  echo "<td>".$row['ColumnName']."</td>"; //6
  echo "<td>".$row['ColumnName']."</td>"; //7
  echo "<td>".$row['ColumnName']."</td>"; //8
  echo "<td>".$row['ColumnName']."</td>"; //9
  echo "<td>".$row['ColumnName']."</td>"; //10
  echo "<td>".$row['ColumnName']."</td>"; //11
  echo "<td>".$row['ColumnName']."</td>"; //12
  echo "<td>".$row['ColumnName']."</td>"; //13
  echo "<td>".$row['ColumnName']."</td>"; //16

  if($row['ColumnName'] > 0){
    echo "<td> <span class=\"badge badge-pill badge-primary\">".$row['ColumnName']."%</span></td>"; //17
  }
  else{
    echo "<td> <span class=\"badge badge-pill badge-danger\">".$row['ColumnName']."%</span></td>"; //17
  }

  echo "<td>".$row['ColumnName']."</td>"; //18
  echo "<td>".$row['ColumnName']."</td>"; //19
  echo "<td>".$row['ColumnName']."</td>"; //20
  echo "<td>".$row['ColumnName']."</td>"; //21
  echo "<td>".$row['ColumnName']."</td>"; //22
  echo "<td>".$row['ColumnName']."</td>"; //23
  echo "</tr>";
}

这不是最优雅的解决方案，但我对 Web 开发还比较陌生，而且由于这是我公司面向 Intranet 的网站，他们并不关心代码是否优雅。

Proof that it works

希望这对您有用，如果不是一个很好的答案，我深表歉意...这是我第一次在这里回答问题，哈哈。

【讨论】：