Question

我有一个带有bootstrap 4的以下数据表。在我的一个列（'Status'）上，我使用createdRow添加一个bootstrap徽章类。问题是徽章的对齐有点偏差：

我尝试在这个createdRow添加类函数中添加'align-center'，'text-align'等，但徽章仍然保留在左上角。

<script>
$(document).ready(function() {
    $('#dataTable').DataTable( {
        responsive: true,
        columnDefs: [
            { responsivePriority: 1, targets: 0 },
            { responsivePriority: 3, targets: 5 },
            { responsivePriority: 2, targets: -1 }
        ],
         "createdRow": function ( row, data, index ) {
            if ( data[6] == 'FB-PAYG' ) {
                $('td', row).eq(6).addClass('badge badge-info');
            }
        }
    } );
} );
</script>

HTML：

<div class="card mb-3">
<div class="card-header">
  <i class="fa fa-table"></i> Client Database</div>
<div class="card-body">
  <div class="table">
    <table class="table table-striped table-bordered display no-wrap" id="dataTable" width="100%" cellspacing="0">
    <thead>
        <tr>
          <th>Address</th>
          <th>Location</th>
          <th>Name</th>
          <th>Joining Date</th>
          <th>Phone</th>
          <th>DB Serial</th>
          <th>Status</th>
          <th>Contract Payments</th>
          <th>Battery Reserve</th>
          <th>Action</th>
        </tr>
    </thead>
    <?php
    if($result = $mysqli->query($sql)){
      if($result->num_rows > 0) {
        while($row = $result->fetch_array()) {
        echo '
        <tr>
          <td>'.$row["client_address"].'</td>
          <td>'.$row["client_location"].'</td>
          <td>'.$row["client_name"].'</td>
          <td>'.$row["client_joining_date"].'</td>
          <td>'.$row["client_cell"].'</td>
          <td>'.$row["client_db_number"].'</td>
          <td>'.$row["client_status"].'</td>
          <td>'.$row["client_contract_payments"].'</td>
          <td>'.$row["client_battery_reserve"].'</td>
          <td><a href="clientdetails.php?client_id='. $row["client_id"] .'" title="View Client" type="button" data-toggle="tooltip"><span class="btn btn-primary btn-xs">View</span></a></td>
        </tr>
        ';
        }
      } else {echo "<p class='lead'><em>No records were found.</em></p>";}
     }
     $mysqli->close();
    ?>
    </table>

以下内容：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.bootstrap4.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.0/js/responsive.bootstrap4.min.js"></script>
    <!-- Custom scripts for all pages-->
    <script src="js/sb-admin.min.js"></script>

Answer 1

它看起来只是对齐关闭，问题是你实际上是将bootstraps徽章类附加到<td>本身，而不是<td>的内容，或者内部是什么。你可以这样做：

createdRow: function ( row, data, index ) {
  if ( data[6] == 'FB-PAYG' ) {
    var content = $('td', row).eq(6).text();
    $('td', row).eq(6).html('<span class="badge badge-info">'+content+'</span>')
  }
}

我会喜欢使用.wrap()的链式oneliner，但text()或html()无法做到这一点。

createdRow的数据库单元中心对齐

1 个答案: