I'm using this CRUD tutorial https://www.webslesson.info/2017/01/php-pdo-ajax-crud-with-data-tables-and-bootstrap-modals.html to make some tests and i would like to improve it including 2 columns related to another tables on MySql.
I'm working with those tutorial files below:
- One php file that fetch data to display on DataTables (fetch.php);
- One index.php file;
- One table that call "Users" and it has 4 columns:
Users table
-------------------------------------
id | first_name | last_name | image
I created 2 tables to relate with "Users" table. Are they:
- "type_service" table with columns ("typeID" and "type") and
- "categories" table with columns ("categoryID" and "category").
On "users" table i included 2 columns that call "type_fk" and "category_fk" where "fk" is foreign key:
Users table
----------------------------------
id | first_name | last_name | image | type_fk | category_fk
When columns were created they were related to "users" table where relationships works perfectly.
After this i included an INNER JOIN query in fetch.php file like below:
$query .= "SELECT users.*, type_service.type, categories.category
FROM users
INNER JOIN type_service ON users.type_fk = type_service.typeID
INNER JOIN categories ON users.category_fk = categories.categoryID ";
Fetch.php file:
<?php
include('db.php');
include('function.php');
$query = '';
$output = array();
$query .= "SELECT users.*, type_service.type, categories.category
FROM users
INNER JOIN type_service ON users.type_fk = type_service.typeID
INNER JOIN categories ON users.category_fk = catgories.categoryID
";
if(isset($_POST["search"]["value"]))
{
$query .= 'WHERE first_name LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR last_name LIKE "%'.$_POST["search"]["value"].'%" ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$_POST['order']['0']['column'].' '.$_POST['order']['0']['dir'].' ';
}
else
{
$query .= 'ORDER BY id DESC ';
}
if($_POST["length"] != -1)
{
$query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$statement = $connection->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
foreach($result as $row)
{
$image = '';
if($row["image"] != '')
{
$image = '<img src="upload/'.$row["image"].'" class="img-thumbnail" width="50" height="35" />';
}
else
{
$image = '';
}
$sub_array = array();
$sub_array[] = $image;
$sub_array[] = $row["first_name"];
$sub_array[] = $row["last_name"];
$sub_array[] = $row["type"];
$sub_array[] = $row["category"];
$sub_array[] = '<button type="button" name="update" id="'.$row["id"].'" class="btn btn-warning btn-xs update">Update</button>';
$sub_array[] = '<button type="button" name="delete" id="'.$row["id"].'" class="btn btn-danger btn-xs delete">Delete</button>';
$data[] = $sub_array;
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $filtered_rows,
"recordsFiltered" => get_total_all_records(),
"data" => $data
);
echo json_encode($output);
?>
After included INNER JOIN query on code above, i included 2 sub_array in the same file (fetch.php) like below:
$sub_array[] = $row["type"];
$sub_array[] = $row["category"];
Where code stay like this:
$sub_array = array();
$sub_array[] = $image;
$sub_array[] = $row["type"];
$sub_array[] = $row["category"];
$sub_array[] = $row["first_name"];
$sub_array[] = $row["last_name"];
$sub_array[] = '<button type="button" name="update" id="'.$row["id"].'" class="btn btn-warning btn-xs update">Update</button>';
$sub_array[] = '<button type="button" name="delete" id="'.$row["id"].'" class="btn btn-danger btn-xs delete">Delete</button>';
$data[] = $sub_array;
When the code above is executed, the index.php page show data through html code below:
<body>
<div class="container box">
<h1 align="center">PHP PDO Ajax CRUD with Data Tables and Bootstrap Modals</h1>
<br />
<div class="table-responsive">
<br />
<div align="right">
<button type="button" id="add_button" data-toggle="modal" data-target="#userModal" class="btn btn-info btn-lg">Add</button>
</div>
<br /><br />
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th width="10%">Image</th>
<th width="10%">Type</th>
<th width="15%">Category</th>
<th width="15%">First Name</th>
<th width="15%">Last Name</th>
<th width="10%">Edit</th>
<th width="10%">Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
And when i refresh index.php page, DataTable return an invalid JSON response like image below:
https://i.stack.imgur.com/pieF9.jpg
In this case if i remove the query line:
INNER JOIN categories ON users.category_fk = categories.category
The DataTable return all data but show Category column ID instead of the category name. The image below can show this:
https://i.stack.imgur.com/E2TnB.jpg
But if i reinclude:
INNER JOIN categories ON users.category_fk = categories.categoryID
DataTables display the error below again:
DataTables warning: table id=user_data - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
What i see is when i include just one INNER JOIN query the DataTable display all data but if i include one more INNER JOIN, DataTable return an invalid JSON response even including the respective sub_arrays.
$sub_array[] = $row["type"];
$sub_array[] = $row["category"];
In this case what can i do to improve this code to show name instead of ID?
