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

Question

I am creating a system that manages event expenses.

In this system, one event can have multiple installments of a single payment. What I am trying to do is to show these installments whenever the user hovers its mouse over an event in the Table. (Each row represents one event)

These installments can vary from one to multiple, meaning all events won't have same number of installments.

So, what I did was basically this,

So, if you can see, basically green buttons represent paid installments and yellow warning buttons represent unpaid installments.

but problem is, they are being shown under a single column. I want these to be spread horizontally under that row, rather than being shown under a single column.

Here's a code that I am using to show this datatable, (only including the relevant code)

jQuery code

$(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(); 
    });

And this is the action.php file, this is where I am writing all the syntax for this table.

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


    ';
      $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 .= '';

        $number++;  
    }
    $output .= '
              
                
                  ID
                  Event Name
                  Date
                  Total Payment
                  Expenses
                  Profit
                  Actions
                
              
              
        '.$number.'
        '.$row['e_name'].'';

        $payments = $db->get_payments($row['c_id']);
        foreach ($payments as $payment)
        {
          if ($payment['p_status'] == 'pending')
          {
            $output .= '
                '.$payment['p_amount'].'
';
          }
          else 
          {
            $output .= '
                '.$payment['p_amount'].'
';
          }
        }
        $output .='
        '.$date.'
        '.$row['payment'].'
        '.$expense.'
        '.$profit.'
        View
        Update
        Delete
        ';
    echo $output;
}

As you would notice, currently I have my buttons set under the "Event Name" field. I would like to have those buttons spread over the whole row. Any help would be really appreciated.

Also, can anyone tell how can I align the Show entries and the Search Bar on top of the table? Thank you.

Edit: I tried to use the colspan property by creating a new row in the table and put my buttons in it (as suggested in comments) but it did not work out for me. Instead, it showed some very undesirable results.

First of all, the buttons did separate from the "one" column, so that issue did get resolved but in this case, now all the similar buttons were in same column still. For example, Green buttons were stacked up upon each other while yellow buttons were separate but stacked up upon each other.

Plus, bigger problem was now the buttons would show only when I "hover" over the row under the "Events" Row. It has a created a very small White Line under each row to represent the buttons row and Buttons get displayed only when I hover over that white line while nothing shows up when I hover over the actual Event Row.

The new modified code of action.php is as follows,

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


    ';
      $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 .= '';

        $number++;  
    }
    $output .= '
              
                
                  ID
                  Event Name
                  Date
                  Total Payment
                  Expenses
                  Profit
                  Actions
                
              
              
        '.$number.'
        '.$row['e_name'].'';

        
        $output .='
        '.$date.'
        '.$row['payment'].'
        Rs. '.$expense.'
        Rs. '.$profit.'
        View
        Update
        Delete
        
        ';
        $payments = $db->get_payments($row['c_id']);
        $output .= '';
        foreach ($payments as $payment)
        {
          if ($payment['p_status'] == 'pending')
          {
            
            $output .='    '.$payment['p_amount'].'
';
          }
          else 
          {
            $output .='    '.$payment['p_amount'].'';
          }
        }
        $output .='';
    echo $output;
}

user_12567365 · Answer

You can use the "child rows" feature of DataTables - see an example here.

The benefit of these child rows is that they span the entire width of the table but only contain one cell.

In your case, you need to make some adjustments:

Make sure every child row is always displayed. As you can see in the above linked demo, they are all hidden by default.
Hide the column which normally contains the "show/hide" button for each child row.

Here is some code showing my simple demo:

// 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 'Put whatever you want in here, for example: "' + rowData.name + '". It spans all the columns.';
}

$(document).ready(function() {

  var dataSet = [
    {
      "id": "123",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "456",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    },
    {
      "id": "567",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "432",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "987",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,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');
  });


} );

In the above example, look specifically at the format ( rowData ) function.

In my demo, that function simply assembles some very basic HTML, as a string. That HTML is displayed as the content of the child row.

In your case, you can build much more complex HTML, representing the horizontally-aligned row of buttons you want to display underneath each row.

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

1 Answers