Bootstrap DataTable行下按钮占满整行及顶部控件对齐问题咨询

你之前修改方案的问题出在3个地方：

1. 分期行的colspan属性值错误，表格共7列，需要设置colspan="7"才能占满整行
2. 触发逻辑错误：按钮在活动行的下一行，需要通过相邻兄弟选择器实现hover活动行时显示下一行的按钮
3. 按钮堆叠是因为容器未设置横向布局，且你给每个按钮额外套了多余的div、加了错误的margin属性

具体修改步骤 #

1. 替换原有CSS

/* 分期行默认隐藏 */
#events-table .installment-row {
  display: none;
}
/* hover活动行时，显示相邻的下一行分期按钮 */
#events-table tr.event-row:hover + tr.installment-row {
  display: table-row;
}
/* 按钮容器设为flex实现横向排列，支持自动换行 */
.installment-links {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  flex-wrap: wrap;
}

2. 修改action.php的表格生成逻辑

• 给活动行加event-row类，给分期行加installment-row类
• 删掉每个按钮外面多余的div，所有按钮放在同一个installment-links容器内

foreach($data as $row)
{
    $expense = $row['discount']+$row['photo']+$row['video']; 
    $profit = $row['payment'] - $expense; 
    $date = $row['day'].'-'.$row['month'].'-'.$row['year'];
    // 活动行加event-row类
    $output .= '<tr class ="text-center text-secondary event-row">
    <td>'.$number.'</td>
    <td>'.$row['e_name'].'</td>
    <td>'.$date.'</td>
    <td>'.$row['payment'].'</td>
    <td style="color: red">Rs. '.$expense.'</td>
    <td style="color: green">Rs. '.$profit.'</td>
    <td><a id="view_event" data-id1 = '.$row['c_id'].' class="btn btn-outline-info btn-sm" href="">View</a>
    <a id="update_event" data-id1 = '.$row['c_id'].' class="btn btn-outline-secondary btn-sm" href="">Update</a>
    <a id="delete_event" data-id1 = '.$row['c_id'].' class="btn btn-outline-danger btn-sm" href="">Delete</a></td>
    </tr>';
    // 分期行
    $payments = $db->get_payments($row['c_id']);
    $output .= '<tr class="installment-row">
    <td colspan="7">
      <div class="installment-links">';
      foreach ($payments as $payment)
      {
        if ($payment['p_status'] == 'pending')
        {
          $output .='<a id="do_payment" data-id1= '.$payment['p_id'].' class="btn btn-warning btn-icon-split"> <span class="icon text-white-50"> <i class="fas fa-exclamation-triangle"></i> </span> <span class="text">'.$payment['p_amount'].'</span></a>';
        }
        else 
        {
          $output .='<a id="remove_payment" data-id1= '.$payment['p_id'].' class="btn btn-success btn-icon-split"> <span class="icon text-white-50"> <i class="fas fa-check"></i> </span> <span class="text">'.$payment['p_amount'].'</span></a>';
        }
      }
    $output .='</div></td></tr>';
    $number++;  
}

3. 调整DataTable初始化配置

避免分期行影响表格的排序、筛选功能：

table = $("table").DataTable({
    pagingType: 'full_numbers',
    filter: true, 
    rowCallback: function(row, data, index) {
      if ($(row).hasClass('installment-row')) {
        $(row).attr('data-order', '').attr('data-search', '');
      }
    }
});

DataTable默认将两个控件放在.dataTables_length和.dataTables_filter两个容器中，直接通过CSS调整即可：

• 如果要实现默认左右对齐、加间距：

.dataTables_length {
  float: left;
  margin-bottom: 15px;
}
.dataTables_filter {
  float: right;
  margin-bottom: 15px;
}

• 如果要实现居中对齐：

.dataTables_length, .dataTables_filter {
  float: none;
  display: inline-block;
  margin: 0 20px 15px 20px;
}
.dataTables_wrapper .row:first-child {
  text-align: center;
}

也可以直接通过DataTable的dom参数配合Bootstrap类实现更灵活的布局，不需要额外写CSS：

table = $("table").DataTable({
  // d-flex justify-content-between 直接实现左右两端对齐
  dom: '<"d-flex justify-content-between align-items-center"lf>rtip',
  pagingType: 'full_numbers',
  filter: true
});

内容的提问来源于stack exchange，提问作者Awais Shahid