Fix columns in Datatables html5- js

Navigation
3

I want to set some columns in a table made with Datatable. However, when I use the fixedColumns property, all it does is duplicate the number of columns that is specified, but it puts it on top of the others, so they overlap.

I attach the code: 

 $("#reporte").DataTable({
   dom: 'Bfrtip',
   buttons: [
     $.extend(true, {}, buttonCommon, {
       extend: 'excelHtml5',
       className: 'btn btn-option',
       text: '<i class="fa fa-table marginExcel"></i><br> Exportar',
       container: '#optionExcel'
     })
   ],
   bFilter: false,
   bInfo: false,
   bLengthChange: false,
   bPaginate: false,
   'oLanguage': {
     'sZeroRecords': false,
     'sEmptyTable': false
   },
   scrollY: 200,
   scrollX: true,
   scrollCollapse: true,
   scrollXInner: '100%',
   fixedColumns: {
     leftColumns: 0,
     rightColumns: 0,
   }
 });
 $("#tblReport").css({
   'width': '100%'
 });
 }

How can I correct it?

    
asked by nstorspeed 02.01.2017 в 15:15
source

4 answers

1

I had the same problem as you, as I show in the first example:

Example dataTable with misaligned fixed columns 

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "160px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            leftColumns: 2//Le indico que deje fijas solo las 2 primeras columnas
        },
         "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            //4 Indica la columna que sera filtrada

            // Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 4 ).footer() ).html(
                '$'+pageTotal +' ( $'+ total +' total)'
            );
        }
    } );
} );
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="table-bordered table-striped ">
  <thead>
    <tr>
      <th rowspan="2">Id</th>
      <th rowspan="2">Producto</th>
      <th colspan="6" style="text-align:center">Ventas</th>
    </tr>
    <tr>
      <th>Ene</th>
      <th>Feb</th>
      <th>Mar</th>
      <th>Abr</th>
      <th>May</th>
      <th>Jun</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>Producto 1</td>
      <td>5</td><td>5</td><td>5</td>
      <td>5</td><td>5</td><td>5</td>
    </tr>
    <tr>
      <td>2</td><td>Producto 2</td>
      <td>50</td><td>54</td><td>5</td>
      <td>5</td><td>87</td><td>56</td>
    </tr>
    <tr>
      <td>3</td><td>Producto 3</td>
      <td>6</td><td>6</td><td>8</td>
      <td>5</td><td>3</td><td>8</td>
    </tr>
    <tr>
      <td>4</td><td>Producto 4</td>
      <td>6</td><td>6</td><td>6</td>
      <td>5</td><td>6</td><td>8</td>
    </tr>
    <tr>
      <td>5</td><td>Producto 5</td>
      <td>6</td><td>6</td><td>6</td>
      <td>5</td><td>6</td><td>8</td>
    </tr>
  </tbody>
        <tfoot>
            <tr>
                <th colspan="4" style="text-align:right">Total:</th>
                <th></th>
            </tr>
        </tfoot>
</table>

Example dataTable with fixed columns trick to align them

The only thing I did was put a div with a fixed size in the head. 

<th rowspan="2">
   <div style="width:200px!Important;">
      Producto
   </div>
</th>


$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "160px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            leftColumns: 2//Le indico que deje fijas solo las 2 primeras columnas
        }
    } );
} );
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>

<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="table-bordered table-striped ">
  <thead>
    <tr>
      <th rowspan="2">Id</th>
      <th rowspan="2">
        <div style="width:200px!Important;">
          Producto
        </div>
      </th>
      <th colspan="6" style="text-align:center">Ventas</th>
    </tr>
    <tr>
      <th>Ene</th>
      <th>Feb</th>
      <th>Mar</th>
      <th>Abr</th>
      <th>May</th>
      <th>Jun</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td><td>Producto 1</td>
      <td>5</td><td>5</td><td>5</td>
      <td>5</td><td>5</td><td>5</td>
    </tr>
    <tr>
      <td>2</td><td>Producto 2</td>
      <td>50</td><td>54</td><td>5</td>
      <td>5</td><td>87</td><td>56</td>
    </tr>
    <tr>
      <td>3</td><td>Producto 3</td>
      <td>6</td><td>6</td><td>8</td>
      <td>5</td><td>3</td><td>8</td>
    </tr>
    <tr>
      <td>4</td><td>Producto 4</td>
      <td>6</td><td>6</td><td>6</td>
      <td>5</td><td>6</td><td>8</td>
    </tr>
    <tr>
      <td>5</td><td>Producto 5</td>
      <td>6</td><td>6</td><td>6</td>
      <td>5</td><td>6</td><td>8</td>
    </tr>
  </tbody>
</table>

I hope it helps you. Greetings.

    
answered by 06.01.2017 в 00:05
0

I use this in an obsolete version of this plugin was used and so far is still used but I think the name of the definition was changed to columnDefs , currently I use it with aoColumns and it does not give me problems 

 $("#reporte").DataTable({
  ...,
  "aoColumns": [
    { "width": "15%", "title": "Descripcion", "bSortable": true },
    { "width": "16%", "title": "Lugar", "bSortable": true },
    { "width": "21%", "title": "Fecha", "bSortable": true },
    { "width": "18%", "title": "Cliente (s)", "bSortable": true },
    { "title": "Usuario (s)", "bSortable": true },
    { "title": "Estado", "bSortable": true }
  ]
});
    
answered by 02.01.2017 в 17:36
0

I had the same problem but I could fix it in a very efficient way with just a few lines of code, when creating the table simply add this property to the DataTable (): 

$('#tabla').DataTable({
initComplete: function(settings, json) {
            setTimeout(function() { $("#tabla").DataTable.draw(); }, 200);
        }
}).draw();

What this will do is that when the loading of your table finishes, it will launch a time out of 200 milliseconds that will make the table refresh and display correctly.

    
answered by 11.01.2017 в 22:46
0

The problem is that you are not making the correct export of the css from the fixedcolumns datatables. The solution is to see which version you are managing from fixedcolumns. 

<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css" rel="stylesheet">
    
answered by 28.11.2018 в 19:13
Import blogger to a specific wordpress page The edges of the table are not printed in TCPDF