0

tengo esta tabla en c#, la cual la lleno con ajax

  <table id="Colocacion" class="table table-bordered table-striped">
      <thead>
          <tr>
              <th style="visibility:collapse; display:none;">Orden</th>
              <th >Productos</th>
              <th>Objetivo</th>
              <th>Real</th>
              <th>Var Q</th>
              <th>Var %</th>
              <th>Pedidos</th>
              <th>Ticket Real Q</th>
              <th>Asesores</th>
              <th>Prod Req Q. </th>
              <th>Prod Real Q. </th>
              <th>Prod Real #</th>
              <th>Prod Compromiso Q.</th>
              <th>Prod Compromiso #</th>
              <th>Nuevo #</th>
              <th>Recompra #</th>
              <th>Renovacion #</th>
          </tr>
      </thead>
      <tfoot></tfoot>
  </table>



 var tabla = $('#Colocacion').DataTable({
     bPaginate: false,
     paging: false,
     searching: false,
     info: false,
     destroy: true,
     responsive: false,
     lengthChange: true,
     autoWidth: false,
     ordering: false,
    
     scrollCollapse: true,
     scrollX: true,
     scrollY: 400,
     fixedHeader: true,
     
     ajax: {
         method: "GET",
         url: "/ReportCol/Productos",
         data: {
               TipoGrafica: true
             , IdTerritorio: Territorio
             , IdRegion: Region
             , Sucursal: Sucursal
             , Producto: Producto
             , SemanaIni: SemanaIni
             , SemanaFin: SemanaFin
             , Anio: Anio
             , Formatos: Formatos
             , Criterios: CriteriosS
             , Dia: Dia
             , FechaIni: FecIni
             , FechaFin: FecFin
             , Clasificacion: Clasificacion
             , Orden: Orden
             , Columna: Columna
         },
         contentType: "aplication/json;  charset = utf-8",
         dataType: "json",
         dataSrc: ""
     },
     columns: [
         { "data": "orden" },
         { "data": "rubro" },
         { "data": "meta"},
         { "data": "real"},
         { "data": "diferencia",
             render: function (data, type, row, meta) {
                 if (row.positivo) {
                     return '<span>' + data + ' </span>'
                 }
                 else  {
                         return '<span class="text-danger">' + data.replace("-", "") + ' <i class="text-danger fas fa-caret-down"></span>'
                 }
             },
         },
         { "data": "porcentaje",
             render: function (data, type, row, meta) {
                 if (row.positivo) {
                     return '<span class="description-percentage  ml-2" >' + data + '%</span>'
                 }
                 else  {
                         return '<span class="description-percentage text-danger ml-2" >' + data.replace("-", "") + '% <i class="text-danger fas fa-caret-down"></span>'
                 }
             },
         },
         { "data": "pedidos" },
         {"data": "ticketReal" },
         {"data": "asesores" },
         {"data": "metaPQ2"},
         {"data": "realPQ"},
         {"data": "realPN" },
         {"data": "metaPQ"},
         {"data": "metaPN"},
         {"data": "nuevo"},
         {"data": "recompra"},
         {"data": "renovacion"},
     ],
     columnDefs: [
         {
             target: 0,
             visible: false,
             searchable: false,
         },
                  {
                 targets: [4,5], 
                 width: 100,   
             }
     ],
     createdRow: function (row, data, dataIndex) {
           $('td:eq(2)', row).css('background-color', '#f9f2a1 !important');
     }
 });

le puse un scroll vertical como horizontal , pero al momento de que la pantalla cambie de tamaño los headers con las columnas de los datos se desajustan , se desalinean si recargo la pagina se vuelven a alinear como podria hacer para que si cambia el tamaño de la pantalla se alineen bien los headers con el body ,

le agregue un fixColumns: true y un fixHeader:True pero sigue haciendo el mismo efecto, necesito que cuand cambie de tamaño los encabezados y el body se alinean bien.

veo que el problema es al agregarle el fixedColumns: true,

para que la primera columan se quede fija

introducir la descripción de la imagen aquí


ya elimine la fila oculta que tenia y probe poniendo width fijos tanco con css que en el mismo datatable pero sigue haciendo el mismo efecto, lo hace solo cuando le agrego la linea fixedColumns: true, para dejar la primera columan fija cuando se utiliza el scrol vertical .

1
  • intenta con CSS ponerle un width fijo
    – fredyfx
    Commented el 14 feb. a las 3:09

2 respuestas 2

1

Tienes display none en la primera columna (th), entonces tienes 16 th y 17 td, esto hace que no queden alineados.

0

si alguien le pasa lo mismo que al agregar scrooll y fixedColumasn yo lo solucione con estop

    $(window).on('resize', function () {
            $($.fn.dataTable.tables(true)).DataTable()
                    .columns.adjust();
    });

validao si la pantalla cambia de tamaño y reajusto todos mis datables

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.