1

Necesito hacer una condicion que cuando el selector de registro pageLength sea mayor que 10 le agregue a la datatable un scrollY:300 y un scrollX:true, intente con la siguiente condicion y no funciona

var table = $('#tblDistribucionZonas').DataTable({
  dom: 'lBfrtip',
  pageLength: 10,
  buttons: [
    'copy', 'csv', 'excel', 'pdf'
  ],
  language: {
    "emptyTable": "No hay información",
    "info": "Mostrando _START_ a _END_ de _TOTAL_ Documentos",
    "infoEmpty": "Mostrando 0 to 0 of 0 Documentos",
    "infoFiltered": "(Filtrado de _MAX_ total entradas)",
    "infoPostFix": "",
    "thousands": ",",
    "lengthMenu": "Mostrar _MENU_ Documentos",
    "loadingRecords": "Cargando...",
    "processing": "Procesando...",
    "search": "Buscar:",
    "zeroRecords": "Sin resultados encontrados",
    "paginate": {
      "first": "Primero",
      "last": "Ultimo",
      "next": "Siguiente",
      "previous": "Anterior"
    }
  }
});

if(pageLength > 10){
  $('#tblDistribucionZonas').DataTable({
    scrollX:true,
    scrollY:300
  })
}

2 respuestas 2

1

Saludos podrías hacer algo como esto:

primero debemos seleccionar el valor del select del datatable algo asi:

var valor_seleccionado = $("select[name=id_table_length]").val();

si te fijas he puesto id_table_length alli solo debes cambiar por tu ID del table y seguido de tu id agregas _length .

una vez con este valor debes hacer tu condicion deseada con un if, ahora par asignar o cambiar los Scroll del datatable seria algo asi:

$('.dataTables_scrollBody').css('height', 300);

o en su defecto algo como esto:

$('#id_table').dataTable({'sScrollY': 100});

para mayor detalle te sugiero revisar esta respuesta donde dan distintas soluciones: Scroll Datatable

Podrias hacer algo asi:

var valor_seleccionado = $("select[name=id_table_length]").val();
if(valor_seleccionado >10){
  $('.dataTables_scrollBody').css('height', 300);
}
7
  • Viejo me sirvio lo del contador pero necesito es agregar los dos scroll scrollX:true y scrollY:300 cuando se hace la condicion de que pasa de 10
    – PANGALLETA
    Commented el 28 feb. 2019 a las 15:10
  • por ello solo debes hacer la condicion con el valor que recibes del contador Commented el 28 feb. 2019 a las 15:11
  • por eso ya hice la condicion if(valor_seleccionado > 10){ aqui necesito lo de los scroll}
    – PANGALLETA
    Commented el 28 feb. 2019 a las 15:12
  • exacto ya edite mi respuesta prueba como lo hice yo..!! Commented el 28 feb. 2019 a las 15:13
  • Es que no me sirve porque todavia no tengo el scroll lo que necesito es agregarle ese atributo a la datatable, porque la tabla esta sin los dos scroll ni el x ni el y, entonces cuando pasa de 10 filas ahi es cuando necesito agregarle los dos atributos por medio de la condicion pero no me sirve porque estoy es agregando un css y necesito es el atributo como tal
    – PANGALLETA
    Commented el 28 feb. 2019 a las 15:20
0

No se como agregarle un atributo a una tabla ya definida. pero ps para hacer lo que dices yo lo que hago es destruir la definición del datatable y crearla de nuevo pero con los nuevos valores de los atributos

  let parametrosDataTable={
  dom: 'lBfrtip',
  pageLength: 10,
  buttons: [
    'copy', 'csv', 'excel', 'pdf'
  ],
  language: {
    "emptyTable": "No hay información",
    "info": "Mostrando _START_ a _END_ de _TOTAL_ Documentos",
    "infoEmpty": "Mostrando 0 to 0 of 0 Documentos",
    "infoFiltered": "(Filtrado de _MAX_ total entradas)",
    "infoPostFix": "",
    "thousands": ",",
    "lengthMenu": "Mostrar _MENU_ Documentos",
    "loadingRecords": "Cargando...",
    "processing": "Procesando...",
    "search": "Buscar:",
    "zeroRecords": "Sin resultados encontrados",
    "paginate": {
      "first": "Primero",
      "last": "Ultimo",
      "next": "Siguiente",
      "previous": "Anterior"
    }
  }
}
var table = $('#tblDistribucionZonas').DataTable(parametrosDataTable);

if(pageLength > 10){
  table.destroy()
  parametrosDataTable.scrollX=true
  parametrosDataTable.scrollY=300
  table = $('#tblDistribucionZonas').DataTable(parametrosDataTable);
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.