Question

问题

我想设置数据表的样式，使其具有引导“徽章”类中的状态：，

使用下面的代码，这就是我的意思：

我有来自mysql数据库的数据通过AJAX加载到Datatables中

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

}

Answer 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

希望这对您有用，对于不好的回答，我深表歉意。这是我第一次在这里回答问题。

在DataTables上添加标志和样式列

1 个答案: