paginacion - pagination table html

deshabilite la paginación si solo hay una página en datos

Question

Estoy implementando bases de datos y de acuerdo con mi requerimiento, la mayoría de las cosas se han resuelto, excepto el problema de la paginación. En mi caso cada vez que se visualiza la navegación de paginación. Quiero deshabilitar la navegación de paginación si solo hay una página. ¿Cómo hacerlo? Mi código es como

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>

Answer 1

A partir de la respuesta de Nicola, puede usar la devolución de llamada fnDrawCallback () y el objeto oSettings para ocultar la paginación de la tabla después de que se haya dibujado. Con oSettings, no necesita saber nada acerca de la configuración de la tabla (registros por página, selectores específicos de la tabla, etc.)

Las siguientes verificaciones para ver si la longitud de visualización por página es mayor que el total de registros y oculta la paginación si es:

$(''#your_table_selector'').dataTable({
    "fnDrawCallback": function(oSettings) {
        if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
            $(oSettings.nTableWrapper).find(''.dataTables_paginate'').hide();
        }
    }
});

Documentación

• fnDrawCallback()
• oSettings

Answer 2

Aquí está mi solución, también funciona si tiene varias tablas en la misma página. Evita la colisión, por ejemplo (la tabla A debe tener paginación y B no).

TableId en mi código nunca está indefinido. Si no ha definido una ID para su tabla, dataTable lo hará por usted agregando algo como ''DataTables_Table_0''

    fnDrawCallback: function (oSettings) {
        if ($(this).DataTable().column(0).data().length <= oSettings._iDisplayLength) {
            var tableId = $(this).attr(''id'');
            $(''#'' + tableId + ''_paginate'').hide();
        }
    }

Answer 3

Debes esconderlos dinámicamente, creo que puedes usar fnDrawCallback()

$(''#example'').dataTable({
    "fnDrawCallback": function(oSettings) {
        if ($(''#example tr'').length < 11) {
            $(''.dataTables_paginate'').hide();
        }
    }
});​

EDITAR - otra forma encontrada here podría ser

"fnDrawCallback":function(){
      if ( $(''#example_paginate span span.paginate_button'').size()) {
      $(''#example_paginate'')[0].style.display = "block";
     } else {
     $(''#example_paginate'')[0].style.display = "none";
   }
}

Answer 4

Esta función de devolución de llamada funciona de forma genérica con cualquier datatable sin tener que codificar la ID de la tabla:

$(''.data-table'').dataTable({
    fnDrawCallback: function(oSettings) {
       if(oSettings.aoData.length <= oSettings._iDisplayLength){
         $(oSettings.nTableWrapper).find(''.dataTables_paginate'').hide();
       }
    }
});

Answer 5

Este es el enfoque correcto cuando se trabaja en V1.10 + de JQuery Datatables. El proceso es generalmente el mismo que en las versiones anteriores, pero los nombres de los eventos y los métodos de la API son ligeramente diferentes:

$(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);
    }
});

Documentación

• https://datatables.net/reference/option/preDrawCallback
• https://datatables.net/reference/api/page.info()

Answer 6

Esto no es posible directamente ya que DataTables no admite la activación y desactivación de las funciones en tiempo de ejecución. Sin embargo, lo que podría hacer es utilizar la función fnDrawCallback () para verificar si hay solo una página y, si es así, ocultar los controles de paginación.

Answer 7

Esto solucionó mis problemas:

.dataTables_paginate .disabled {
   display:none;
}   
dataTables_paginate .disabled + span {
   display:none;
}   

Espero que os sirva de ayuda.

Answer 8

Prefiero la solución de @ sina. Buen trabajo.

Pero mi uno viene con algunas mejoras necesarias. @sina olvidó la else parte para mostrar la paginación otra vez si fuera necesario. Y agregué la posibilidad de definir all opciones en el lengthMenu como sigue:

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();
        }
    }
});

Answer 9

Puedes seguir este camino también.

"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();
      }
 }

Esto funcionó para mí.

Answer 10

Sé que este es un post antiguo, pero para aquellos de nosotros que usaremos esto y tenemos TOC como yo, se necesita un cambio.

Cambia la sentencia if,

if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) 

a

if (oSettings._iDisplayLength >= oSettings.fnRecordsDisplay()) 

Con este pequeño cambio, verá los botones de paginación para longitudes de registros superiores a 10, 25, 50, 100 en lugar de presentar los botones de paginación con solo 10 registros, técnicamente los registros de 10, 25, etc. sigue siendo una vista de una página.

Answer 11

Si sus datos no son dinámicos, es decir, el servidor genera una tabla HTML que luego se mejora con DataTables, puede representar la opción de paginación en el servidor (estoy usando la maquinilla de afeitar).

$("#results").dataTable({
  paging: @(Model.ResultCount > Model.PageSize ? "true" : "false"),
  // more ...
});

Answer 12

Solo agrega lo siguiente a tu hoja de estilo:

.dataTables_paginate .paginate_button.disabled {
    display: none;
}

Answer 13

Traté de hacer sPaginationType como Dinámico en datos para cada entrada, pero no puedo encontrar la solución adecuada para eso, pero lo que hice fue

"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();
        }
    });
},

Answer 14

Utilizando la sugerencia de @sina anterior, incluido el arreglo mencionado por @GuiSim .

Agregue este código a su solicitud de inicialización de datos.

JQUERY

    "fnDrawCallback": function (oSettings) {
      var pgr = $(oSettings.nTableWrapper).find(''.dataTables_paginate'')
      if (oSettings._iDisplayLength > oSettings.fnRecordsDisplay()) {
        pgr.hide();
      } else {
        pgr.show()
      }
    }

O mejor aún reemplazar

"fnDrawCallback": null 

en su datatables.js para aplicar el código en todo el sitio.

Answer 15

Ver mi plugin conditionalPaging característica.

Uso:

$(''#myTable'').DataTable({
    conditionalPaging: true
});

or

$(''#myTable'').DataTable({
    conditionalPaging: {
        style: ''fade'',
        speed: 500 // optional
    }
});

Answer 16

jQuery - Probé con las siguientes opciones, funcionó para mí

    $("#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();
        }
    }
});

Vista de salida de DataTable

Answer 17

$(''#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");
    }

    }
   });