J'ai lu Charger un message à l'aide de Datatables
DataTables 1.10.16 à l'aide d'ajax données source et mode côté serveur.
Ma table a le code d'initialisation suivant:
"language:" {
// ...
"loadingRecords": "Loading data..."
}
DataTables utilise correctement le code "processing" > propriété - il montre un spinner FontAwesome ( .fa-spinner ) lorsque les données sont prêtes à être rendues par DataTables; ce qui se produit lorsque la requête ajax est terminée.
Cependant, je souhaite afficher un message - tel que "Chargement des données ..." - pendant que la requête ajax est en cours.
Ainsi, le conseil sur le lien SO précédent indique l'utilisation de la propriété loadingRecords dans language . J'ai donc ajouté ceci:
var substancesTable = $('#substancesTable').DataTable({
"processing": true,
"serverSide": true,
"searching": false,
"ajax": function(data, callback){
// code for ajax request
},
"language": {
"lengthMenu": "_MENU_ per page",
"zeroRecords": "Sorry no records found",
"info": "Showing <b>_START_ to _END_</b> (of _TOTAL_)",
"infoFiltered": "",
"infoEmpty": "No records found",
"processing": '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
},
});
Cela ne fait rien.
De plus, je préférerais utiliser quelque chose de similaire à ma superposition que j'ai définie en utilisant le propriété de traitement . Je pense que l'utilisation de loadingRecords n'ajoute qu'une ligne à la table pendant que le processus ajax est en cours d'achèvement, ce qui n'est de toute façon pas idéal.
Je ne vois rien dans la documentation DataTables à ce sujet.
Quelles options ai-je ici? Comment informer l'utilisateur que la demande ajax est en cours? Cela se produit souvent car certaines recherches prennent> 4 secondes dans mon application en raison de la nature des données recherchées.
Il y a des informations contradictoires (et erronées) sur le site Web DataTables: https://datatables.net/forums/discussion / 41654 / how-to-display-a-progress-indicateur-for-serverside-processing dit que la propriété processing peut être utilisée pour cette question. Mais https://datatables.net/reference/option/language.processing (correctement ) dit que c'est pour "lorsque la table traite une action utilisateur".
D'après mon expérience, le traitement ne se déclenche que lorsque DataTables effectue un travail côté client (c'est-à-dire la mise à jour de la table), rien à voir avec l'attente de données côté serveur.
3 Réponses :
Vous devez définir votre option dom de DataTables. Il a une valeur par défaut de lfrtip . Le r représente l'élément d'affichage p r ocessing. Combinez-le avec l'option language.processing avec la valeur souhaitée.
De plus, j'ai remarqué que vous utilisez des données source ajax avec le mode côté serveur activé. Comme détaillé dans la documentation, les language.loadingRecords ne doivent être utilisés que si vous êtes initialisation par ajax des données d'origine avec traitement côté client.
$('#example').dataTable({
"dom": 'lrtip',
"language": {
"processing": 'Loading data...'
}
});
Cela ne marche pas. Il ne montre à aucun moment "chargement des données ...".
Selon la language.loadingRecords référence : ( formaté pour plus de clarté)
Notez que ce paramètre n'est pas utilisé lors du chargement de données par traitement côté serveur , juste des données provenant d'Ajax avec côté client traitement.
Donc, dans votre cas - en utilisant le traitement côté serveur, le message / indicateur de chargement n'apparaîtra jamais.
Cependant, il s'agit en fait d'une simple ligne de tableau ( tr code >) élément que DataTables ajoute au corps de la table ( tbody ), afin que vous puissiez ajouter manuellement le tr à partir de votre ajax option / fonction .
Voici un exemple où j'ai utilisé jQuery.ajax () pour effectuer la requête AJAX, et l'option beforeSend pour afficher le message de chargement:
$(document).ready(function() {
$('#example').DataTable( {
serverSide: true,
processing: true,
language: {
processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
},
ajax: {
url: 'http://example.com/path/to/some-file',
beforeSend: function(){
// Here, manually add the loading message.
$('#example > tbody').html(
'<tr class="odd">' +
'<td valign="top" colspan="6" class="dataTables_empty">Loading…</td>' +
'</tr>'
);
}
}
} );
} );
Et si votre option ajax est un objet (qui DataTables passe simplement à jQuery.ajax () ), puis:
$(document).ready(function() {
$('#example').DataTable( {
serverSide: true,
processing: true,
language: {
processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
},
ajax: function(data, callback){
$.ajax({
url: 'http://example.com/path/to/some-file',
'data': data,
dataType: 'json',
beforeSend: function(){
// Here, manually add the loading message.
$('#example > tbody').html(
'<tr class="odd">' +
'<td valign="top" colspan="6" class="dataTables_empty">Loading…</td>' +
'</tr>'
);
},
success: function(res){
callback(res);
}
});
}
} );
} );
Remarque: Modifiez l'exemple à votre ID de table et la valeur colspan à la valeur appropriée en fonction de votre table.
C'est une réponse vraiment utile, merci d'avoir si bien expliqué cela. Dans mon cas, j'ai dû l'adapter un peu car j'utilise une fonction ajax personnalisée pour envoyer des données de formulaire à un point de terminaison qui effectue une recherche complexe. Cependant, utiliser beforeSend: dans cet appel ajax et insérer le balisage que vous avez suggéré fait exactement ce qui est nécessaire.
Hé Andy, je suis content que ça t'ait aidé. :)
Ajoutez simplement ces lignes dans la fonction datatable
language: {
processing: '<i class="fa fa-spinner fa-spin fa-2x fa-fw"></i>'
},