I’m using datatablet net with bootstrap 5 :
"datatables": "^1.10.18",
"datatables.net": "^1.13.1",
"datatables.net-bs5": "^1.13.1",
"datatables.net-buttons-bs5": "^2.3.3",
"datatables.net-dt": "^1.13.1",
"datatables.net-responsive-bs5": "^2.4.0",
In my datatables.js :
require("bootstrap");
window.jQuery = window.$ = require("jquery");
require("datatables.net");
require("datatables.net-dt");
require("datatables.net-bs5");
$(document).ready(function () {
var postsDt = null;
const datatabeSettings = {
"ordering": false,
"pageLength": 10,
"paginate": true,
"lengthChange": false,
"searching": true,
"processing": true,
"serverSide": true,
"sAjaxDataProp": "data",
"oLanguage": {
"sProcessing": "<i class="fa fa-spinner" aria-hidden="true"></i>n",
"sSearch": "Rechercher",
"sLengthMenu": "Afficher _MENU_ éléments",
"sInfo": "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
"sInfoEmpty": "Affichage de l'élement 0 à 0 sur 0 éléments",
"sInfoFiltered": "(filtré de _MAX_ éléments au total)",
"sInfoPostFix": "",
"sLoadingRecords": "<i class="fa fa-spinner" aria-hidden="true"></i>n",
"sZeroRecords": "Aucun élément à afficher",
"sEmptyTable": "Aucune donnée disponible dans le tableau",
"oPaginate": {
"sFirst": "Premier",
"sPrevious": "Précédent",
"sNext": "Suivant",
"sLast": "Dernier"
},
"oAria": {
"sSortAscending": ": activer pour trier la colonne par ordre croissant",
"sSortDescending": ": activer pour trier la colonne par ordre décroissant"
}
},
"columns": null,
"ajax": null,
"stateSave": false
};
function postsDatatable() {
if (postsDt !== null) {
postsDt.destroy();
}
datatabeSettings["ajax"] = {
"url": Routing.generate('get_all_posts'),
"type": "POST",
dataSrc: "data",
};
datatabeSettings["columns"] = [
{"data": "Id"},
{"data": "Title"},
{"data":"Slug"},
{"data": "Content"},
{"data": "Show"},
{"data": "Edit"}
];
postsDt = $('#postsTable').DataTable(datatabeSettings);
}
if ($('#postsTable').length) {
postsDatatable();
}
});
I’m getting the data from server correctly but when i change the page i’m getting an empty page.
My backend function :
#[Route(path: '/all', name: 'get_all_posts', options: ['expose' => true], methods: ['POST'])]
public function getAllPosts(PostRepository $postRepository, Request $request): Response
{
$start = $request->get('start');
$length = $request->get('length');
$page = ($start != 0) ? $start / $length : 0;
$count = $postRepository->total();
$allPosts = $postRepository->search($start, $length);
$output = array(
'data' => array(),
'recordsFiltered' => $count,
'recordsTotal' => $count,
'page' => $page,
'start' => $start,
'length' => $length,
);
foreach ($allPosts as $post) {
$output['data'][] = [
'Id' => $post->getId(),
'Title' => $post->getTitle(),
'Slug' => $post->getSlug(),
'Content' => $post->getContent(),
'Show' => '<a alt="Show" title="Show" class="btn btn-default" href="' . $this->generateUrl('app_post_show', array('slug' => $post->getSlug())) . '"><i class="fa fa-eye"></i></a>',
'Edit' => '<a alt="Edit" title="Edit" class="btn btn-default" href="' . $this->generateUrl('app_post_edit', array('slug' => $post->getSlug())) . '"><i class="fa fa-pencil"></i></a>'
];
}
return new Response(json_encode($output), 200, ['Content-Type' => 'application/json']);
}
How can i fix this ?