Problem with columns width

fedefazz

Hi, im working with the server side editor. All works great, now im tring to set the columns width. I read all the dcumentation, and nothing works for me. I try with

$('#example').dataTable( {
  "columnDefs": [
    { "width": "20%", "targets": 0 }
  ]
} );

or with "autoWidth": false.

I only want to give some columns a fixed width.

Heres is my code

  $('#example').DataTable( {
    
    "columnDefs": 
    [
    { "searchable": false, "targets": [6,0] },
    ],
  
  "footerCallback": function( thead, data, start, end, display ) {
    $(thead).find('th').eq(0).css({"background-color":"#C8ECA9"})
  },
         "footerCallback": function( tfoot, data, start, end, display ) {
    $(tfoot).find('th').eq(0).html("");
    $(tfoot).find('th').eq(1).html("");
    $(tfoot).find('th').eq(2).html("");
    $(tfoot).find('th').eq(3).html("");
    $(tfoot).find('th').eq(4).html("");
    $(tfoot).find('th').eq(5).html("");
    $(tfoot).find('th').eq(6).html("");
    $(tfoot).find('th').eq(7).html("");
  },
        
         responsive: true,
        "pageLength": 30,
        "processing": true,
        
        dom: "Tfrtip",
        ajax: {
            url: "examples/php/staff.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            { data: null, defaultContent: '', orderable: false, class:"center" },
            { data: "empresa", "width": "40%"  },
            { data: "nombre" },
            { data: "direccion", "width": "40%" },
            { data: "localidad" },
            { data: "tel" },
            { data: "mail", "searchable": false },
            { data: "nombre2" },
            { data: "codp" },
            { data: "provincia" },
            { data: "web" },
            { data: "cel" },
            { data: "rubro" },
            { data: "cuit" },
            { data: "notas" },
            
            
        ],order: [ 1, 'asc' ],
        tableTools: {
            sRowSelect: "os",
            sRowSelector: 'td:first-child',
            sSwfPath: "TableTools/swf/copy_csv_xls_pdf.swf",
            aButtons: [
                { sExtends: "editor_create", editor: editor },
                { sExtends: "editor_edit",   editor: editor },
                { sExtends: "editor_remove", editor: editor },
                {
                    sExtends: "collection",
                    sButtonText: "Exportar",
                    sButtonClass: "save-collection hidden-xs",
                    aButtons: [ 'copy', 'csv', 'xls', 'pdf' ]
                },
                {
                    sExtends: "print",
                    sButtonText: "Imprimir",
                    sButtonClass: "hidden-xs",
                    sInfo: "Presiones la tecla 'Escape' para salir"
                    
                    },
            ]
        },
        
    } );
} );

Thanks

allan

So just to check, you updated:

    "columnDefs":
    [
    { "searchable": false, "targets": [6,0] },
    ],

to be:

    "columnDefs":
    [
    { "width": "20%", "targets": 0 },
    { "searchable": false, "targets": [6,0] },
    ],

and that didn't work?

Can you post a link to the page showing the issue please? That looks like it should work to me.

Allan

fedefazz

Hi, thanks for the quick answer. Yes i have the code exactly as you post before. Here is a link to the table working. http://www.eliseoweb.com.ar/test/ . What i want to do is give a width to columns 0,1,2,3,4,5,6 making the columns 7,8,9,10 goes to the details. In the example in the link, columns 7,8,9 are display in the table, i want this columns displays in details and give more with to the 0,1,2,3,4,5 and 6 column. i would like too, if its posible to give column 0 (Detail button) style, to center the icon, vertical and horizontal. And the last thing i would like to do is add a button where i can put a link to redirect the user to a page to see the information to print in an envelope. A link with the ID of the data and send it by GET. Thanks Allan, best regards

allan

What i want to do is give a width to columns 0,1,2,3,4,5,6 making the columns 7,8,9,10 goes to the details

Okay - that requires a slightly different solution. You should add the class none to the columns you want to be hidden - see Responsive documentation.

The reason it isn't working for you at the moment is that the table width is not fixed - you could give a column 120% width if you wanted and the browser would correct you. Which is what is happening here - the browser is overruling.

Allan

fedefazz

Allan, with the class none i get the columns as i wish, works perfect. . http://www.eliseoweb.com.ar/test/ . Could you help me with this issues. I have i href tel in the phone column. This work great in the desktop view, but in Mobile phones the phone colum get responsive and the link is disable. Is there any way to get the link in responsive mode? Thanks Allan, Best Regards

allan

Does the phone number column require Javascript? If it is a simple link then it should work okay, but if it requires some form of Javascript you will need to run that script again when the child row is made visible, or use a delegated event handler if it just needs an event handler.

Allan

fedefazz

I have this link
{ data: "tel", "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='tel:"+oData.tel+"'>"+oData.tel+"</a>");
}},

As i say this work correctly in desktop mode, in mobile the link is disable. How i made this scrip run when the child row makes visible?

Thanks. Best Regards

allan

I would suggest using columns.render to create the cell rather than columns.createdCell. It will worth with the render option.

Allan

fedefazz

Solved this way

´´´{ data: "tel",
"render": function ( data, type, full, meta ) {
return '<a href="tel:'+data+'">'+data+'</a>'
}´´´

Just one las question, how do i make the 0 column (Details button) the icon displays centered horizontal and vertical. I add clasName "center" but didn't work. Here is the link http://www.eliseoweb.com.ar/test/

Best Regard
Federico

tangerine

Your "details button" cell needs class "details-control".

fedefazz

Thanks for the answer Tangerine. This:
columns: [{ data: null, defaultContent: '' , orderable: false, className: "details-control" },
didn't work for me. The same result. The icon is displayed at top left of the cell.

Best Regards
Federico