How to resize columns with DataTables with the search inputs into the table header?

How to resize columns with DataTables with the search inputs into the table header?

CrezCrez Posts: 5Questions: 1Answers: 0
edited May 2015 in Free community support

Hi! I would like to know how can I make an auto-sizing of my table columns when I add search inputs into the table header.

By the time the column width is fixed at 169px (probably due to the search inputs) and I don't know how to resize it (so it can fit to my data).

Can you help me please?

$(document).ready(function() {
    // Setup - add a text input to each header cell
    $('#maTable thead .search').each( function () {
        var title = $('#maTable thead .header_title').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'"/>' );
    } );
 
    // DataTable
    var table = $('#maTable').DataTable();
    
    // Apply the search
    table.columns().every( function () {
        var that = this;
        
        $( 'input', this.header() ).on( 'keyup change', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );
});

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you link to a test case showing the issue, as per the forum rules please.

    Allan

  • CrezCrez Posts: 5Questions: 1Answers: 0
    edited June 2015
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    I need a link to the actual page so I can inspect the DOM and specifically look at the CSS. An image shows the issue, but does not allow me to offer any help as to how to fix the issue.

    Allan

  • CrezCrez Posts: 5Questions: 1Answers: 0
    edited June 2015

    I can't do that because the site is on a private server (it's an intranet website for a company in which I do my internship). I can access to the website but external users can't...
    But if you want the CSS and Php files I can post it here

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Can you use http://live.datatables.net or JSFiddle to reproduce a test case. Also did you try my suggestion from GitHub - use your browser's developer tools to inspect the input elements and see if they have a width set on them. Try setting the width to (eg) 90%

  • CrezCrez Posts: 5Questions: 1Answers: 0
    edited June 2015

    I tried to use it to reproduce a test case but I use php injections and SQL requests in my code so the result is not visible. Sorry

    Otherwise I tried your suggestion from Github but it didn't work. As I said on Github, I think it's a default build configuration in the dataTables.js. So I certainly have to use jquerry functions to modify it. But I don't know which one and how...

    When I use the browser's developer tools to inspect the element, the only width setting on my input is the next one:

    element.style {
      width: 146.996997117996px;
    }
    
  • CrezCrez Posts: 5Questions: 1Answers: 0

    By the way, I can see all of my CSS width properties crushed by this one...

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    edited June 2015

    DataTables' CSS doesn't set the width on any input element.

    I'm afraid that without a page showing the issue, there is little I can do to help.

    Allan

This discussion has been closed.