尝试在 DataTable Bootstrap 中的每一行下显示按钮，但只能在特定列而不是整行下显示它们

Question

我正在创建一个管理活动费用的系统。

在这个系统中，一个事件可以有多次分期付款一次付款。我想要做的是在用户将鼠标悬停在 Table 中的事件上时显示这些分期付款。（每一行代表一个事件）

这些分期付款可以从一个到多个不等，这意味着所有事件的分期付款次数不会相同。

所以，我所做的基本上就是这样，

所以，如果你能看到，基本上绿色按钮代表已支付的分期付款，黄色警告按钮代表未支付的分期付款。

但问题是，它们显示在单列下。我希望这些在该行下水平分布，而不是显示在单个列下。

这是我用来显示此数据的代码table、（仅包括相关代码）

<style type="text/css">
  #events-table tr .links 
  {
    display:none;
  }
  #events-table tr:hover .links 
  {
    display:block;   
  }
 </style>   
            <!-- Begin Page Content -->
            <div class="container-fluid">

                <!-- Page Heading -->
                <h1 class="h3 mb-4 text-gray-800">Events</h1>

                <div class = "container mb-3 mt-3" id = "events_table">

                </div>

jQuery代码

$(document).ready(function(){
        function getEvents() {
            $.ajax ({
                url: "action.php",
                type: "POST", 
                data: {action: "get_events"},
                success: function(response) {
                    $("#events_table").html(response);
                    table = $("table").DataTable({
                        pagingType: 'full_numbers',
                        filter: true, 
                    });
                }
            })
        }

        getEvents(); 
    });

这是 action.php 文件，这是我为 table.

编写所有语法的地方

if (isset($_POST['action']) && $_POST['action'] == "get_events")
{
    $output = ''; 
    $data = $db->get_all_events(); 
    $output .= '


    <table id = "events-table" class = "table table-striped table-bordered ">
              <thead>
                <tr>
                  <th data-field="id" data-sortable = "true">ID</th>
                  <th data-field="event_name" data-sortable = "true">Event Name</th>
                  <th data-field="date" data-sortable = "true">Date</th>
                  <th data-field="payment" data-sortable = "true">Total Payment</th>
                  <th data-field="expense" data-sortable = "true">Expenses</th>
                  <th data-field="profit" data-sortable = "true">Profit</th>
                  <th data-field="actions" data-sortable = "false">Actions</th>
                </tr>
              </thead>
              <tbody>';
      $number = 1; 
    foreach($data as $row)
    {
        $expense = $row['discount']+$row['photo']+$row['video']; 
        $profit = $row['payment'] - $expense; 
        $date = $row['day'].'-'.$row['month'].'-'.$row['year'];
        $output .= '<tr class ="text-center text-secondary">
        <td>'.$number.'</td>
        <td>'.$row['e_name'].'';

        $payments = $db->get_payments($row['c_id']);
        foreach ($payments as $payment)
        {
          if ($payment['p_status'] == 'pending')
          {
            $output .= '<div class="links" style = "margin-right: 50%; margin-top: 10px;">
            <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></div>';
          }
          else 
          {
            $output .= '<div class="links" style = "margin-right: 50%; margin-top: 10px;">
            <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></div>';
          }
        }
        $output .='</td>
        <td>'.$date.'</td>
        <td>'.$row['payment'].'</td>
        <td style="color: red">'.$expense.'</td>
        <td style="color: green">'.$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>';

        $number++;  
    }
    $output .= '</tbody></table>';
    echo $output;
}

如您所见，目前我的按钮设置在“事件名称”字段下。我想让这些按钮分布在整行。非常感谢任何帮助。

此外，谁能告诉我如何将 显示条目 和 搜索栏 对齐到 table 顶部？谢谢。

编辑： 我试图通过在table 并将我的按钮放入其中（按照评论中的建议），但它对我没有用。相反，它显示了一些非常不理想的结果。

首先，按钮确实与“一个”列分开了，所以问题确实得到了解决，但在这种情况下，现在所有类似的按钮仍然在同一列中。例如，绿色按钮相互堆叠，而黄色按钮分开但相互堆叠。

另外，更大的问题是现在按钮只会在我“悬停”在“事件”行下的行上时显示。它在每一行下方创建了一条非常小的白线来表示按钮行，只有当我将鼠标悬停在该白线上时才会显示按钮，而当我将鼠标悬停在实际事件行上时则不会显示任何内容。

修改action.php代码如下,

if (isset($_POST['action']) && $_POST['action'] == "get_events")
{
    $output = ''; 
    $data = $db->get_all_events(); 
    $output .= '


    <table id = "events-table" class = "table table-striped table-bordered ">
              <thead>
                <tr>
                  <th data-field="id" data-sortable = "true">ID</th>
                  <th data-field="event_name" data-sortable = "true">Event Name</th>
                  <th data-field="date" data-sortable = "true">Date</th>
                  <th data-field="payment" data-sortable = "true">Total Payment</th>
                  <th data-field="expense" data-sortable = "true">Expenses</th>
                  <th data-field="profit" data-sortable = "true">Profit</th>
                  <th data-field="actions" data-sortable = "false">Actions</th>
                </tr>
              </thead>
              <tbody>';
      $number = 1; 
    foreach($data as $row)
    {
        $expense = $row['discount']+$row['photo']+$row['video']; 
        $profit = $row['payment'] - $expense; 
        $date = $row['day'].'-'.$row['month'].'-'.$row['year'];
        $output .= '<tr class ="text-center text-secondary">
        <td>'.$number.'</td>
        <td>'.$row['e_name'].'';

        
        $output .='</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>
        <tr><td colspan="5">';
        $payments = $db->get_payments($row['c_id']);
        $output .= '<div class="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></div>';
          }
          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></div>';
          }
        }
        $output .='</td></tr>';

        $number++;  
    }
    $output .= '</tbody></table>';
    echo $output;
}

Answer 1

您可以使用 DataTables 的“子行”功能 - 请参阅示例 here。

这些子行的好处是它们跨越了 table 的整个宽度，但只包含一个单元格。

对于你的情况，你需要做一些调整：

确保始终显示每个子行。正如您在上面链接的演示中看到的，默认情况下它们都是隐藏的。
隐藏每个子行通常包含“show/hide”按钮的列。

下面是一些显示我的简单演示的代码：

// this function controls what is displayed in each child row. It has access to all the parent row's data
function format ( rowData ) {
    // `rowData` is the data object (or array) for the row
    return '<span>Put whatever you want in here, for example: "<b>' + rowData.name + '"</b>. It spans all the columns.</span>';
}

$(document).ready(function() {

  var dataSet = [
    {
      "id": "123",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "0,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "456",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "2,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    },
    {
      "id": "567",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "3,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "432",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "2,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "987",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "2,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    }
  ];


  var table = $('#example').DataTable( {
    data: dataSet,
    columns: [
      {
        "className": 'details-control',
        "orderable": false,
        "data": null,
        "visible": false, // do not show the open/close column
        "defaultContent": ''
      },
      { "data": "name" },
      { "data": "position" },
      { "data": "office" },
      { "data": "salary" }
    ],
    "order": [[1, 'asc']]
  } );

  // force each child row to be displayed:
  $("#example").DataTable().rows().every( function () {
    this.child( format(this.data()) ).show();
    $( this.node() ).addClass('shown');
  });


} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
    <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

</div>

</body>
</html>

上面的例子，具体看format ( rowData )函数

在我的演示中，该函数只是将一些非常基本的 HTML 组合为一个字符串。即HTML显示为子行的内容。

在您的情况下，您可以构建更复杂的 HTML，表示要在每一行下方显示的水平对齐的按钮行。

尝试在 DataTable Bootstrap 中的每一行下显示按钮，但只能在特定列而不是整行下显示它们

Trying to show buttons under every row in DataTable Bootstrap but can only display them under a specific column instead of whole row

javascript

datatable

jquery

datatables

bootstrap-4