Edit, delete buttons inline

sNok3

I managed to populate my table with the data from the database but I can't find any method to add edit and delete buttons on the same line. I'm trying to add a font-awesome icon for the delete button as well for the edit one. Also if possible, I don't want to use the PHP library

This is my script

$(document).ready( function () {
      $('#datatables').DataTable({
      ajax: {
        url: 'staff.php'
      },
      columns: [
        { data: 'steam_name' },
        { data: 'ranks' },
        { data: 'steamid' },
        { data: 'created_at' },
        { data: 'last_login' }
      ]
    });
    $("#datatables").append(
      $('<tfoot/>').append( $("#datatables thead tr").clone() )
    );
    
    });

<table id="datatables" class="table table-hover users" width="100%">
    <thead class="text-warning">
      <tr>
          <th class="sorting">Nickname</th>
           <th>Rank</th>
           <th>SteamID</th>
          <th>Date</th>
          <th>Last Access</th>
         <th class="disabled-sorting text-right">Delete</th>
      </tr>
   </thead>
</table>

$data = array();

$stmt = $conn->prepare("SELECT * FROM users");
$stmt->execute();
  while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $row["created_at"] = date('j M Y, g:i A', strtotime($row["created_at"]));
        $row["last_login"] = date('j M Y, g:i A', strtotime($row["last_login"]));
        
        $data[] = $row;
}


echo json_encode(array('data' => $data));

{
    "data": [{
                "id": "1",
                "steamid": "STEAM_0:1:XXX",
                "ranks": "Co-Owner",
                "created_at": "5 Dec 2019, 9:27 PM",
                "last_login": "25 Apr 2020, 8:58 PM",
                "steam_name": "X"
            }, {
                "id": "2",
                "steamid": "STEAM_1:0:XXX",
                "ranks": "Owner",
                "created_at": "5 Dec 2019, 9:29 PM",
                "last_login": "25 Apr 2020, 6:47 PM",
                "steam_name": "X"
            }]
}

kthorngren

Here is an example of buttons using columns.defaultContent. You should be able to adjust the styling to use font awesome.

Kevin

sNok3

Yes, but I only see edit and I have to select which one... What I want to achieve is bubble editing alongside deleting the row.

kthorngren

The example I provided show how to get the click ed row and the data for that row. If you want bubble editing you can use the Editor or create your won code. This example might give you some ideas but I don't know of any bubble editor examples except what comes with Editor.

Kevin