Twice request ajax

Remy Scanu

Hi,

I know this question is already ask but I tried to apply the solution but not works for me...

I use the version 1.10.20 and for each request ajax I have twice request, I would have juste one if it possible.

This is my code ->

var tableau = $('#example').DataTable({
columns: enteteColonne,
// Effet de style colonne
"columnDefs": columnDefs,
"orderCellsTop": true,
// gestion de la DOM html
// Doc : https://datatables.net/examples/basic_init/dom.html
dom: '<"g-pa-10 g-pb-0 g-mb-10 g-bg-white"<"row"<"col-xl-7 col-lg-12"<"#actionMenu.g-mb-10 g-mr-10">B><"col-xl-5 col-lg-12"<"#searchColonne.float-right">>>><"row"<"col-md-12 g-mb-10"<"g-pa-10 g-bg-white"<"#titreTableau.col-12">it>><"col-md-12 g-mb-10"<"g-pa-10 g-bg-white"<"row"<"col-md-6"l><"col-md-6"p>>>>>',
select: {
style: 'multi+shift'
},
// Gestion des btn
buttons: [
{
extend: 'copy',
text: '<u>P</u>resse-papier',
exportOptions: {
columns: export_colonne
},
className: 'btn rounded-0 u-btn-outline-teal g-mb-10 g-mt-10 w-100',
attr: {
id: 'pressePapier'
},
messageTop: ''
},
{
extend: 'excel',
text: '<u>E</u>xcel',
exportOptions: {
columns: export_colonne
},
className: 'btn rounded-0 u-btn-outline-teal g-mb-10 g-mt-10 w-100',
filename: '',
attr: {
id: 'excel'
},
messageTop: ''
},
{
extend: 'print',
text: '<u>I</u>mprimer',
exportOptions: {
columns: export_colonne
},
className: 'btn rounded-0 u-btn-outline-teal g-mb-10 g-mt-10 w-100',
attr: {
id: 'imprimer'
},
messageTop: ''
},
{
extend: 'selectAll',
text: '<u>T</u>out sélectionner',
className: 'btn rounded-0 u-btn-outline-blue g-mb-10 g-mr-10',
attr: {
id: 'toutSelectionner'
}
},
{
extend: 'selectNone',
text: '<u>D</u>ésélectionner',
className: 'btn rounded-0 u-btn-outline-lightred g-mb-10 g-mr-10',
attr: {
id: 'toutDeselectionner'
}
},
{
text: '<u>S</u>ous sélection',
className: 'btn rounded-0 u-btn-outline-blue g-mb-10 g-mr-10',
attr: {
id: 'sousSelection'
}
},
{
text: '<i class="fas fa-plus"></i> une fiche',
className: 'btn rounded-0 u-btn-outline-blue g-mb-10 g-mr-10',
attr: {
id: 'ajouterFiche'
}
},
{
text: '<i class="fas fa-wrench"></i> Boutons d\'action',
className: 'btn rounded-0 u-btn-outline-blue g-mb-10 g-mr-10',
attr: {
id: 'actionBouton'
}
}
],
"aaSorting": [],
// Paramètres liés au server-side
"processing": true,
"serverSide": true,
// Il s'agit ici des datas en chargement de la page.
"ajax": {
"url": url + paramUrl,
"data": data,
beforeSend: function(){
// Ajout d'un message de loading en attendant que la requête ajax soit finie
$('#example > tbody').html(
'<tr class="odd">' +
'<td valign="top" colspan="6" class="dataTables_empty"><i class="fas fa-spinner fa-spin fa-2x fa-fw"></i> Chargement en cours...</td>' +
'</tr>'
);
}
},
"language": {
"sProcessing": "Traitement en cours...",
"sSearch": "Rechercher dans le tableau :",
"sLengthMenu": "Afficher MENU éléments",
"sInfo": "Affichage de l'élément START à END sur TOTAL éléments ( accessibles)",
"sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément ( accessibles)",
"sInfoFiltered": "(filtré de MAX éléments au total)",
"sInfoPostFix": "",
"sLoadingRecords": "Chargement en cours...",
"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"
},
"select": {
"rows": {
_: "%d lignes séléctionnées",
0: "Aucune ligne séléctionnée",
1: "1 ligne séléctionnée"
}
},
"buttons": {
"copyTitle": 'Ajouté au presse-papiers',
"copyKeys": 'Appuyez sur <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> pour copier les données du tableau à votre presse-papiers. <br><br>Pour annuler, cliquez sur ce message ou appuyez sur Echap.',
"copySuccess": {
_: '%d lignes copiées',
1: '1 ligne copiée'
}
}
},
// Formatage particulier du nombre d'éléments sans le ","
"formatNumber": function ( toFormat ) {
return toFormat.toString().replace(
/\B(?=(\d{3})+(?!\d))/g, ""
);
},
"rowCallback": function( row, data ) {
if ( $.inArray(data.DT_RowId, selectedPK) !== -1 ) {
$(row).addClass('selected');
}
},
// Après le chargement complet des données, si on a une nouvelle recherche on sélectionne toutes les lignes visibles du tableau
"initComplete": function(settings, json) {

    if (nouvelleRecherche == true) {
      tableau.rows().nodes().to$().not(".selected").addClass("selected");

      tableau.rows('.selected').select();

      var rowData = tableau.rows().data().toArray();

      manipTableauSelectedPK(rowData,"toutSelectionner");
    }

    // Si la dernière condition nous indique qu'on doit afficher une alerte spécifique à la fin... alors on l'affiche :D
    if (data.hasOwnProperty("affichageAlerteFin") == true) {
      bootbox.alert({
        message: data.messageAlerteFin
      })
    }
  }

});

Thanks.

rf1234

I know this question is already ask but I tried to apply the solution but not works for me...

Ok, and WHAT is it that does not work for you? Would be great to let us know.

Please format your code using Markdown (see link underneath the comment box).

kthorngren

I don't see anything obvious. You have serverSide: true. Any call to the draw() API will cause a SSP ajax request. Do you have an event or other code that might be using draw()?

Does the double ajax request happen on Datatable load or at some other time.

Please post a link to your page or a running test case showing the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Remy Scanu

Thanks, exactly I use command draw() after and if I comment this part I have just one request, a big thank's that is not easy to see it caused by this...

kthorngren

The draw() API causes Datatables to refresh the table searching and sorting which, with server side processing, uses an Ajax request to fetch the page data.

Kevin