Neither tablesorter nor dataTables working with ajax - php

Question

I have tried both, tablesorter and datatables in order to get sorting functionalities. With both, I'm able to see the sorting arrows (and filter box, pages... with dataTables; although they don't work neither), and they change, but the data are not sorted.
Here is the ajax (with dataTables it's the same but using 'dataTable' instead of 'tablesorter'.
$.ajax({
type: "GET",
url: "search.php",
data: {data : encrypted.data, salt: enc_salt},
success: function(enc_response){
var response = decrypt_cryptojs(enc_response, encrypted.salt);
var data = JSON.parse(response);
$("#search_result").html(data);
// Initialise tablesorter
$('#search_table').tablesorter();
}
});
I create the table with php:
if (mysqli_num_rows($result) > 0) {
$message .= "<table id='search_table' class='tablesorter'>
<thead><tr>
<th id='search_user'>Usuario</th>
<th id='search_name'>Nombre</th>
<th id='search_surnames'>Apelidos</th>
<th id='search_email'>Correo</th>
<th id='search_role'>Rol</th>
<th id='search_access'>Acceso</th>
<th id='search_center'>Centro</th>
<th id='search_edit'></th>
<th id='search_delete'></th>
</tr></thead>";
while ($row = mysqli_fetch_row($result)) {
// Define $id
$id = $row[7];
// Replace space(" ") whith "&#32" to avoid errors inside functions
$user = str_replace(" ", "&#32", $row[0]);
$name = str_replace(" ", "&#32", $row[1]);
$surnames = str_replace(" ", "&#32", $row[2]);
$center = str_replace(" ", "&#32", $row[6]);
$message .= "<tbody><tr>
<td>" . $row[0] . "</td>" .
"<td>" . $row[1] . "</td>" .
"<td>" . $row[2] . "</td>" .
"<td>" . $row[3] . "</td>" .
"<td>" . $row[4] . "</td>" .
"<td>" . $row[5] . "</td>" .
"<td>" . $row[6] . "</td>" .
"<td>" .
"<input type='image' src='../resources/edit.png' id='edit_" . $row[0] . "' class='edit' onclick=edit_user(\"$user\",\"$name\",\"$surnames\",'$row[3]','$row[4]','$row[5]',\"$center\",'$id') title='Editar'></button>" .
"</td>" .
"<td>" .
"<input type='image' src='../resources/delete.png' id='delete_" . $row[0] . "' class='delete' onclick=delete_user('$user','$row[4]') title='Eliminar'></button>" .
"</td>
</tr>";
}
$message .= "</tbody></table>";
$message .= "<div id='modify_panel'></div>";
}
And after that:
// Encode the message using json
$response = json_encode($message);
// Encrypt the response and send it.
$enc_response = encrypt_cryptojs($response, $salt);
echo $enc_response;
With datatables I can see message saying that I have an invalid json response.
"#search_result" is in a php file that is included into another php file.
What I'm doing wrong?
Thank you.
EDIT: I've found the stupid mistake, I was generating several tbodys. If I move the tag outside the while, it works. Sorry.

Answer 1

It looks like the problem is likely in the encoding and processing of the JSON.
JSON cannot be merely a string. It needs to be wrapped in an array or object, so when you use php json_encode make sure it's getting an array
// Encode the message using json
$response = json_encode(array($message));
Note: I don't know php that well, so this example might be wrong.
Now in the javascript, make sure to get the data from the first element of the array
var data = JSON.parse(response)[0];
Now the data should be ready to be added as HTML.
$("#search_result").html(data);