désactiver la pagination s'il n'y a qu'une seule page dans les tables de données
J'implémente des balles de données et selon mes besoins, la plupart des choses ont été résolues à l'exception du problème de pagination. Dans mon cas, à chaque fois que la navigation de pagination s'affiche. Je souhaite désactiver la navigation de pagination s'il n'y a qu'une seule page, comment faire? Mon code est comme:
JS
<script>
function fnFilterColumn(i) {
$('#example').dataTable().fnFilter(
$("#col" + (i + 1) + "_filter").val(),
i
);
}
$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": "datatable-interestdb.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "Save to CSV"
}
]
},
"oLanguage": {
"sSearch": "Search all columns:"
}
});
$("#example").dataTable().columnFilter({
aoColumns: [
null,
null,
null,
null
]
});
$("#col1_filter").keyup(function() {
fnFilterColumn(0);
});
});
</script>
HTML
<table cellpadding="3" cellspacing="0" border="0" class="display userTable" aria-describedby="example_info">
<tbody>
<tr id="filter_col1">
<td>Interest:</td>
<td>
<input type="text" name="col1_filter" id="col1_filter">
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" class="form_table display" id="example">
<thead>
<tr>
<th class="sorting_asc" width="25%">Interest</th>
<th width="25%">Name</th>
<th width="25%">Email</th>
<th width="25%">Contact No</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
Vous devez les masquer dynamiquement je pense, vous pouvez utiliser fnDrawCallback()
$('#example').dataTable({
"fnDrawCallback": function(oSettings) {
if ($('#example tr').length < 11) {
$('.dataTables_paginate').hide();
}
}
});
EDIT - une autre manière trouvée ici pourrait être
"fnDrawCallback":function(){
if ( $('#example_paginate span span.paginate_button').size()) {
$('#example_paginate')[0].style.display = "block";
} else {
$('#example_paginate')[0].style.display = "none";
}
}
À partir de la réponse de Nicola, vous pouvez utiliser le rappel fnDrawCallback () et l'objet oSettings pour masquer la pagination de la table une fois qu'elle a été dessinée. Avec oSettings, vous n'avez pas besoin de connaître les paramètres du tableau (enregistrements par page, sélecteurs spécifiques au tableau, etc.)
Les vérifications suivantes permettent de voir si la longueur d'affichage par page est supérieure au nombre total d'enregistrements et de masquer la pagination si elle l'est:
$('#your_table_selector').dataTable({
"fnDrawCallback": function(oSettings) {
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
$(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
}
}
});
Documentation
Voir mon plugin de fonctionnalité conditionalPaging .
Usage:
$('#myTable').DataTable({
conditionalPaging: true
});
or
$('#myTable').DataTable({
conditionalPaging: {
style: 'fade',
speed: 500 // optional
}
});
Il s'agit de la bonne approche lorsque vous travaillez dans V1.10 + de JQuery Datatables. Le processus est généralement le même que dans les versions précédentes, mais les noms d'événements et les méthodes API sont légèrement différents:
$(table_selector).dataTable({
preDrawCallback: function (settings) {
var api = new $.fn.dataTable.Api(settings);
var pagination = $(this)
.closest('.dataTables_wrapper')
.find('.dataTables_paginate');
pagination.toggle(api.page.info().pages > 1);
}
});
Documentation
Utilisation de @ sina suggestion ci-dessus, y compris le correctif mentionné par @ GuiSim .
Ajoutez ce code à votre demande d'initialisation des tables de données.
JQUERY
"fnDrawCallback": function (oSettings) {
var pgr = $(oSettings.nTableWrapper).find('.dataTables_paginate')
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
pgr.hide();
} else {
pgr.show()
}
}
Ou mieux encore remplacer
"fnDrawCallback": null
dans votre datatables.js pour appliquer le code à l'échelle du site.
jQuery - J'ai essayé avec les options suivantes, cela a fonctionné pour moi
$("#your_tbl_selector").dataTable({
"pageLength": 3,
"autoWidth": false,
"fixedHeader": {"header": false, "footer": false},
"columnDefs": [{ "width": "100%", "targets": 0 }],
"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"oLanguage": {
"oPaginate": {
"sNext": "",
"sPrevious": ""
}
},
"fnDrawCallback": function(oSettings) {
if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) {
$(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
}
}
});
Je préfère la solution de @ sina. Bon travail.
Mais le mien vient avec quelques améliorations nécessaires. @sina a oublié la partie else pour afficher à nouveau la pagination si nécessaire. Et j'ai ajouté la possibilité de définir l'option all dans le lengthMenu comme suit:
jQuery('#your_table_selector').dataTable({
"lengthMenu": [[10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"]],
"fnDrawCallback": function(oSettings) {
if (oSettings._iDisplayLength == -1
|| oSettings._iDisplayLength > oSettings.fnRecordsDisplay())
{
jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
} else {
jQuery(oSettings.nTableWrapper).find('.dataTables_paginate').show();
}
}
});
Cette fonction de rappel fonctionne de manière générique avec n'importe quelle table de données sans avoir à coder en dur l'ID de la table:
$('.data-table').dataTable({
fnDrawCallback: function(oSettings) {
if(oSettings.aoData.length <= oSettings._iDisplayLength){
$(oSettings.nTableWrapper).find('.dataTables_paginate').hide();
}
}
});
Je fais le suivi pour atteindre cet objectif, car c'est une solution plus dynamique qui n'est pas exprimée ci-dessus. comme il obtient d'abord le nombre total de pages, puis décidez d'afficher/masquer la pagination. La beauté de ce code n'est que si l'utilisateur change la longueur de la page, il ne sera pas effectué.
jQuery('#example').DataTable({
fnDrawCallback: function(oSettings) {
var totalPages = this.api().page.info().pages;
if(totalPages == 1){
jQuery('.dataTables_paginate').hide();
}
else {
jQuery('.dataTables_paginate').show();
}
}
});
Vous pouvez également suivre cette voie.
"fnDrawCallback":function(){
if(jQuery('table#table_id td').hasClass('dataTables_empty')){
jQuery('div.dataTables_paginate.paging_full_numbers').hide();
} else {
jQuery('div.dataTables_paginate.paging_full_numbers').show();
}
}
Cela a fonctionné pour moi.
$('#dataTable_ListeUser').DataTable( {
//usual pager parameters//
"drawCallback": function ( settings ) {
/*show pager if only necessary
console.log(this.fnSettings());*/
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('#dataTable_ListeUser_paginate').css("display", "block");
} else {
$('#dataTable_ListeUser_paginate').css("display", "none");
}
}
});
J'ai essayé de faire sPaginationType comme dynamique dans datatable pour chaque entrée, mais je ne trouve pas de solution appropriée pour cela, mais ce que j'ai fait était
"fnDrawCallback": function(oSettings) {
$('select[name="usertable_length"]').on('change', function(e) {
var valueSelected = this.value;
if ( valueSelected < 10 ) {
$('.dataTables_paginate').hide();
} else {
$('.dataTables_paginate').show();
}
});
},
Ajoutez simplement ce qui suit à votre feuille de style:
.dataTables_paginate .paginate_button.disabled {
display: none;
}
Je sais que c'est un ancien poste, mais pour ceux d'entre nous qui l'utiliseront et auront un TOC comme moi, un changement est nécessaire.
Modifiez l'instruction if,
if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay())
à
if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay())
Avec ce petit changement, vous verrez les boutons de pagination pour les longueurs d'enregistrements supérieures à 10, 25, 50, 100 au lieu de présenter les boutons de pagination avec seulement 10 enregistrements, techniquement 10, 25, etc. les enregistrements sont toujours une vue d'une page.
Si vos données ne sont pas dynamiques, c'est-à-dire que le serveur génère une table HTML qui est ensuite améliorée par DataTables, vous pouvez rendre l'option de pagination sur le serveur (j'utilise un rasoir).
$("#results").dataTable({
paging: @(Model.ResultCount > Model.PageSize ? "true" : "false"),
// more ...
});
Cela a résolu mes problèmes:
.dataTables_paginate .disabled {
display:none;
}
dataTables_paginate .disabled + span {
display:none;
}
J'espère que cela vous aide à tous
Voici ma solution, cela fonctionne aussi si vous avez plusieurs tableaux sur la même page. Il empêche la colision par exemple (la table A doit avoir une pagination, et B ne doit pas).
tableId dans mon code n'est jamais indéfini. Si vous n'avez pas défini d'ID pour votre table, dataTable le fera pour vous en ajoutant quelque chose comme 'DataTables_Table_0'
fnDrawCallback: function (oSettings) {
if ($(this).DataTable().column(0).data().length <= oSettings._iDisplayLength) {
var tableId = $(this).attr('id');
$('#' + tableId + '_paginate').hide();
}
}
Ce n'est pas directement possible car DataTables ne prend pas en charge l'activation et la désactivation des fonctionnalités sont au moment de l'exécution. Cependant, vous pouvez utiliser la fonction fnDrawCallback () pour vérifier s'il n'y a qu'une seule page et, si c'est le cas, masquer les contrôles de pagination.