createdRow 的数据表单元格中心对齐

沃伦菲特镇里

我有一个带有引导程序 4 的以下数据表。在我的一列(“状态”)上,我使用 acreatedRow添加引导程序徽章类。问题是徽章的对齐方式有点偏离:

在此处输入图片说明 我已经尝试向这个 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>
大卫康拉德

看起来对齐已关闭,问题在于您实际上是将引导程序徽章类附加到<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>')
  }
}

我会喜欢一个使用 的链式 oneliner .wrap(),但这是不可能的text()html()

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章