How can I populate a table using ajax and php and add buttons in table rows?

Question

I'm trying to read information from a database and put them in a table and also to include buttons on the last column of each row. Besides adding the buttons, I'm having trouble getting it to work.

This is my retrieve.php

 <?php 

require_once 'connect.php';


 $output = array('data' => array());
 $sql = "SELECT * FROM student_acc";
$query = $connect->query($sql);

$x = 1;
while ($row = $query->fetch_assoc()) {

    $actionButton = '<a href="#" class="view" title="View" data-toggle="tooltip" onclick="viewAd('[ad_id]')"><i class="material-icons">&#xE417;</i></a>' +
'<a href="#" class="edit" title="Edit" data-toggle="tooltip" onclick="editAd('[ad_id]')"><i class="material-icons">&#xE254;</i></a>' +
'<a href="#" class="delete" title="Delete" data-toggle="tooltip" onclick="deleteAd('[ad_id]')"><i class="material-icons">&#xE872;</i></a>'
 ; // buttions I'd like to include


    $output['data'][] = array(
        $x,
        $row['address'],
        $row['single_unit'],
        $row['single_rent'],
        $row['sharing_unit'],
        $row['sharing_rent'],
        $row['date'],
        $actionButton; //I'm not sure how to include this
    );

    $x++;
} 
$connect->close();

echo json_encode($output);

My ajax.js

    $(document).ready(function(){               
            $.ajax({
            type: "POST",
            dataType: "json",
            url: "tableretrieve/retrievestudent.php",
            data: {action: "load"},
            success: function (response){
                console.log(response);
                $.each(response, function(index, obj) {
                var row = $('<tr>');
                row.append('<td>' + obj.address + '</td>');
                row.append('<td>' + obj.single_unit + '</td>');
                row.append('<td>' + obj.single_rent + '</td>');
                row.append('<td>' + obj.sharing_unit + '</td>');
                row.append('<td>' + obj.sharing_rent + '</td>');
                row.append('<td>' + obj.date + '</td>');
                row.append('<td>' + *Code to include buttions here* + '</td>');

                $('table').append(row)
                });
                }
            });

    });

I did some test with the code below and it appended fine:

    $(document).ready(function(){

        var ActionButions ='<a href="#" class="view" title="View" data-toggle="tooltip"><i class="material-icons">&#xE417;</i></a>' +
                '<a href="#" class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>' +
                '<a href="#" class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>';

                 var row = $('<tr>');
                row.append('<td>' + "Vanderbijlpark, Bowker str, CE4, 12" + '</td>');
                row.append('<td>' + "3" + '</td>');
                row.append('<td>' + "1500" + '</td>');
                row.append('<td>' + "1" + '</td>');
                row.append('<td>' + "2500" + '</td>');
                row.append('<td>' + "2019/08/14" + '</td>');
                row.append('<td>' + ActionButions + '</td>');

                $('table').append(row); 

});

I'm trying to replicate the code above by reading values from a database.

PHP executes on the server, you can only deliver HTML content to the client as a response to a request. In your PHP I do not see any HTTP headers sent as part of your response, you should have headers to identify the content, length and type of data. — SPlatten
– SPlatten, Commented Aug 23, 2019 at 7:58

Wyck · Accepted Answer · 2019-08-20 01:42:14Z

1

The string should be concatenated with . (dot), not + (plus) in the PHP script. What is [ad_id] here? If it's an id column of DB table, use .$row['ad_id']..

$actionButton = '<a href="#" class="view" title="View" data-toggle="tooltip" 
onclick="viewAd('.$row['ad_id'].')"><i class="material-icons">&#xE417;</i></a>' 
.
'<a href="#" class="edit" title="Edit" data-toggle="tooltip" 
onclick="editAd('.$row['ad_id'].')"><i class="material-icons">&#xE254;</i></a>' 
. 
'<a href="#" class="delete" title="Delete" data-toggle="tooltip" 
onclick="deleteAd('.$row['ad_id'].')"><i class="material-icons">&#xE872;</i> 
</a>'
;

You can try an associative array with key and value like this:

$output['data'][] = array(
    $x,
    $row['address'],
    $row['single_unit'],
    $row['single_rent'],
    $row['sharing_unit'],
    $row['sharing_rent'],
    $row['date'],
    'buttons' => $actionButton // no colon here
);

And try row.append('<td>' + obj.buttons + '</td>');

Use a code editor that helps you to fix the syntax errors. Also, use browser developer tools (F12 on Windows and cmd+option+i on Mac) to find your JavaScript errors.

edited Aug 20, 2019 at 1:42

Wyck

12.1k8 gold badges50 silver badges93 bronze badges

answered Aug 16, 2019 at 21:14

Sukhee Daansuren

503 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thabiso Prosper Ramokopu Over a year ago

thanks for helping me out with the button thing, I just can see why it's not appending

Thabiso Prosper Ramokopu · Accepted Answer · 2019-08-20 17:34:30Z

I've managed to fix my problem I had to include a datatable javascript in my index.php

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

My retrieve.php

include 'connect.php'

 $sql = "SELECT * FROM student_acc";
$query = $connect->query($sql);

$x = 1;
while ($row = $query->fetch_assoc()) {
  $actionButton = '<a href="#" class="view" title="View" data-toggle="tooltip" onclick="viewAd('.$row['ad_id'].')"><i class="material-icons">&#xE417;</i></a>
  <a href="#" class="edit" title="Edit" data-toggle="tooltip" onclick="editAd('.$row['ad_id'].')"><i class="material-icons">&#xE254;</i></a> 
  <a href="#" class="delete" title="Delete" data-toggle="tooltip" onclick="deleteAd('.$row['ad_id'].')"><i class="material-icons">&#xE872;</i></a>';

  $data['data'][] = array(
        $row['address'],
        $row['single_unit'],
        $row['single_rent'],
        $row['sharing_unit'],
        $row['sharing_rent'],
        $row['date'],
        $actionButton);
}


echo json_encode($data);

And back to my index.php page, where my table is, I had to add this script

 $(document).ready(function(){

        Table = $("#studentAccomodationTable").DataTable({
            "ajax": "tableretrieve/retrieve.php"
        });

And that was it.

Thanks to https://datatables.net

Collectives™ on Stack Overflow

How can I populate a table using ajax and php and add buttons in table rows?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related